(January 19, 2021) on https://strapi.io there is this animation I want to recreate
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c0cb78a5-1200-4921-81b7-2689342ba785/animation.mov
looking at the inspector
.ParentElement {
position: relative;
}
.AnimationContainter {
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
inside the animation container there is
The Red Animation translate is the important one it go from 0% to 90% with a spring like animation curve so it bounce a bit
The Yellow Animation opacity it goes from 0 to 1 to show the correct image based on the current section
The Blue Animation are extra to make it more alive
I'm not sure what is actually being used to trigger the animation but i can use IntersectionObserver when the content section is reached i will trigger the animation to move the AnimationContainer from left to right