Animation and Springs

Like Apple and react-spring has frequency response and damping ratio as two paramaters to cover most cases of spring animation, Framer Motion has literal duration and bounce.

The rest of this piece talks about react-spring exclusively.

Keep frequency: 0, damping: 1 as starting point. At frequency 0 the animation would be instant, so you should gradually increase frequency, to say 0.2 (for 200ms). Play with 0 < damping ≤ 1 and 0 < frequency and refer to the Apple talk from the link mentioned above to understand how to play with them.
If you want to use and easing instead, opt for duration and easing.

@use-gesture/react‘S useDrag Findings

• last → Is only true for time when mouse movement stops, which is only one time between two sets of mouse movements
• distance → Distance from the point from where you start the mouse movement, resets to zero when movement stops, for which last is also true
• movement → Has [x, y] with magnitude. Down for y and right for x is positive. Rest it works same like distance, calculating diff from the start, and setting itself to zero on stop
• offset → TODO Need to check, I used to use movement before this. I know that offset starts with options.from: () => values and if movement has exactly the same values, then I would rather use movement.
• delta → The handler which we write in useDrag is debounced and runs after a period of time. Like movement, it too has [x, y] with magnitude. Unlike movement though which only resets on stop, this resets after that interval period and so gives the diff from last time the function ran
• velocity → A +ve value, and like delta that calculates value b/w interval periods, velocity can be 0 or 0.00X, the max I got is 3, so unless one is super crazy it should not go above 10 (or 5 even). Both react-spring and @use-gesture/react use px/ms.
• vxvy → Velocity’s magnitude in [x, y] form
• xy → gives cursor position [x, y] from top left corner of viewport
• previous → this stores value of xy resulted in previous debounced call
• down → is pointer down (click, tap)

React Spring Visualizer translateY Findings:

https://react-spring-visualizer.com/

• More mass → more wobble at end (range: 0.1 to 20)
• More tension → more speed (range: 1 to 500)
• Less friction → more jank at end, animation will take a lot of time to end (range: 1 to 180)
• Precision is from 0.01 to 1 → so if this is converted to 100% scale, if I’m on 0.2 it will mean my animation will after (1–0.2=0.8 =>) 80% jump to complete. If it is 0.9 that jump to complete will happen much earlier, on 10% of prgress of the animation (range: 0.01 to 1)
• Velocity by default on 0 ranges from -50 to 50, this basically denotes from where animation will start wrt to starting point of animation. -50 denotes rather from going 0 to 100% it’ll start from -50% to 100%, and if it has been set 50, animation will start from 50% and will end at 100%. (range: -50 to 50)
• Clamp → clamps to start and end values that you’ve defined
• Decay? -> built on react spring, either not documented (and no types yet) or need to check a way to insert custom animation function via @popmotion/popcorn

You’ll mostly need mass, tension and friction. Feels like mass and friction goes hand in hand. Precision and velocity seems to have rare use-case. Decay can be used slow animation down at the end, mostly used for smooth scroll.

If you’re feeling that almost end of animation, animation clips and jumps to end state then either you need to increase its tension (by 50s) or mass (by 5). Increasing tension seems better choice here (or increase to increase tension by comparatively less amount)

To Learn to Animate

Basics

• https://twitter.com/mattwrightmatt/status/1587110174241984512
• Project https://twitter.com/ajitid/status/1275830158029541378?s=20&t=pDRPc600ZHL5AkZnwd1JPw
  take code from last two projects https://github.com/ajitid/animation-playground-rs9-anew/blob/main/src/uff/use-flick-in-bounds.ts
• Rubberband https://www.youtube.com/watch?v=laPsceJ4tTY https://use-gesture.netlify.app/docs/utilities/#rubberbandifoutofbounds
• Pull down to refresh
• mac os dock https://twitter.com/_josh_ellis_/status/1602966016052822016?s=20 https://twitter.com/austin_malerba/status/1556678271374397440?s=20
• Router transition
• Medium image
• Page transitions
• Imperative controls
• Magical swirls
• Anything remaining in animation-playground-rs9-anew project
• Swipe-in/swipe-out
• Sensors API
• Animation controls
• SVG path drawing
• Game UI
• Apple Watch
• Parallax
• Variants
• Pinned header
• Image trail

Advanced

• Bottom sheet
• Animate boxes and stuff
• Ripple effect in anime.js
• Apple Store
• Inverted scale and here
• Morph (see React Morph)
• More from Things
• Performant animations
• Distortion correction
• Grid and flexbox animation
• Notification
• Devtools, utilties, collections
  • usePresence
  • Graph viz, animation viz (React Spring Viz??)
  • AnimateSharedLayout and this
  • In-Out sdras
  • Variants

Later (mostly threejs)

• Font renderer in threejs and drie
• SDF fonts
• Shadows