How to create this seemingly-simple effect?

We aren’t entirely sure what this effect is called. In any case, we did a quick draft of what we want to achieve when someone scrolls up/down the page.

We have a rough idea how to go about it, but not entirely sure about laying out the phone images.

Is there a good (structured) way to lay out those phone images? Should we be using a grid? Or just eyeball our way?

Our read-only link is here

Thanks!

@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

Super helpful! Thanks for the detailed instruction :partying_face: :partying_face: :partying_face: :partying_face:

1 Like