menu

Framer

The best prototyping tool for teams. Join our Discord chat for weekly classes and real-time help with Framer. http://framer.com/r/discord?utm=spectrum

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Bug Reports
view-forward
# FAQ
view-forward
# Learn
view-forward
# Meetups
view-forward
# Resources
view-forward
# Snippets & Tips
view-forward
Team

[framer-motion] How to use easing functions with useTransform

July 7, 2020 at 9:26am

[framer-motion] How to use easing functions with useTransform

July 7, 2020 at 9:26am
How do I use the "ease"-option in useTransform? I can't find an example. Is there a way I can put bezier-parameters? I have tried the following, but it obviously doesn't work:
const yout = useTransform(yin, [-10, 10], [-10, 20], { ease: [0.7, 0, 0.3, 1], });
Are there any predefined functions I can use?
Another question: How do I format code blocks on spectrum?

July 7, 2020 at 3:06pm
You can use normal markdown to format code, so triple backticks for code blocks!
Easing functions within useTransform need to be set inside an array: https://www.framer.com/api/motion/motionvalue#usetransform
const yout = useTransform(yin, [-10, 10], [-10, 20], [{
ease: [0.7, 0, 0.3, 1],
}]);
  • reply
  • like
Thank you! (And sorry for the noob question)
  • reply
  • like
No noob questions :) Feel free to ask whatever you need help with, and join our official community on Discord here! http://framer.com/discord
  • reply
  • like
Sorry: http://framer.com/r/discord (it wouldn't let me edit my last comment)
  • reply
  • like

July 30, 2020 at 8:55pm
Thanks for this! Just a heads up, code like this:
const stroke = useTransform( scrollY, [0, 600], ['#16161A', '#12269A'], [ { ease: [0.7, 0, 0.3, 1], }, ] )
Is throwing some problems in TS: Type '{ ease: number[]; }[]' has no properties in common with type 'TransformOptions<string>'.ts(2559)
If you replace the string hex vals with numbers, it just changes to TransformOptions<number> - is there a way to fix this up?
  • reply
  • like

August 5, 2020 at 6:16pm
Looks like the array needs to be 1 item shorter than the input: https://www.framer.com/api/motion/motionvalue#usetransform
  • reply
  • like