How to create this seemingly-simple effect?

@skinpores I think better way to do this animation is adding classes to elements (normal element position, and pseudo class for completed animation keyframes).

After that you need to create a page scroll trigger just use this service from @Finsweet team.

In my rough example, a combined version is presented (for animating smartphones, the interactions are used:

And to slide Section 1 to top, add a class to the element using a script generated in Finswit service:

Also on page added short CSS code for correct calculating height of section:

Live version
Read-Only Project

2 Likes