Streaming live at 10am (PST)

Next project transition effect

Hi guys, hope to all a nice weekend,

I am trying to achieve the next project transition like this one in the link i am attaching from the pentagram page.

link: https://www.pentagram.com/work/jane-austens-house?rel=sector&rel-id=7

Thank you
Constantinos


Here is my public share link: https://preview.webflow.com/preview/human-brands?utm_medium=preview_link&utm_source=dashboard&utm_content=human-brands&preview=c1bea8c4faa4d5ea6d4981a9a726a1a8&mode=preview
(how to access public share link)

Hey,

Not an expert but this is how I think they’ve achieved it.

First - all the projects are on one page in order and separated by sections with a unique section ID.
Once the page is completed the sections underneath the first project are hidden, with only a top percentage of the second section visible.

Then they’ve used an interaction so that when you click ‘NEXT PROJECT’ it scrolls that section into view, makes it visible in the properties and hides the previous project.

I think it wouldn’t be too difficult to replicate if you are familiar with working with the interactions section in Webflow.

Again, not 100%, but hopefully that was a little helpful.

@thomass96 I have tried this way, but its too complicated at the moment for me. Can’t seem to figure out the timeline so i can achieve it. Maybe if i find some similar in webflow and check the animation or even clone it.
thanks though. Appreciatee your time.

And now that i am thinking of it its a bit more complicated because its a cms collection.

Ah I see… I actually completely forgot about the face it would be in a CMS collection sorry!

Hope you get it working - if you do please update the forum so I can check it out :smiley:

If you get anytime I’m struggling with a Page Load Effect myself that you might be able to spot where I am going wrong. The post is under my account.

Best of luck!