In my project, I am aiming to create an animation that is triggered by a fixed position as demonstrated in the following example. I am currently utilizing React, Typescript, and Tailwind, while also experimenting with animation libraries such as Framer Motion and React Spring. Unfortunately, I have yet to discover the ideal solution for this specific type of animation.
The desired outcome includes:
- The animation being activated by the user's scrolling
- Having a fixed screen position with animated elements descending to their starting points
- All elements being displayed in a default column style upon page load
To see the exact animation I am trying to achieve, you can visit the following website:
I am hopeful that React Spring may provide a solution, but I am unsure of the precise approach. Any assistance would be greatly appreciated.