Hey guys! Super excited to do my first animation session. Animation is the reason I got into programming. From After Effects scripts, to generating 3D architecture programmatically, there is a special place in my heart for animation. When you open up X for the first time, animations are a bit hidden. Unless you want a transition that can’t be customized, you are going to have to jump into the code. So let’s take a look at how it’s done!

Topics Covered:

  • Container Components
  • Significance of props.children
  • The child connector whip
  • Overrides
  • Animatable.set
  • Spring Options
  • animate.spring
  • Bezier options
  • animate.bezier

Source Code:

Thanks again for following along! I’ll keep saying it, but it you have any suggestions for components or functionality you would like to see, please let me know!

Best,

John



Source link https://blog..io/framer-x--animatable--2ef203cfecb3?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here