[Seamless page transition on scroll]

44 minutes ago, Cassie said:

Strange I would have assumed it was routing between pages seeing as it's using barba.js

https://barba.js.org/

 

That's the first place to start, GSAP can help you animate things, but barba (or a similar solution) is what you need to animate things between pages

This example from the Barba docs shows how it works

https://barba.js.org/docs/advanced/third-party/#Scroll-Trigger

My bad, it is a page transition indeed. Thanks for your replies, I will look at it.

[Seamless page transition on scroll]

On 6/13/2024 at 5:42 PM, Cassie said:

There's a tutorial here which looks like it may be useful?

https://webflow.com/made-in-webflow/website/barba-flip

It is in webflow but it might have some useful tips?

Thank you for this one. Client's project is actually also in Webflow and the demo has the same direction I would think of.  The biggest challenge is that I need to make a seamless transition between to url's/pages (hp to CMS item and back). This demo is essentialy just one page with clever css to mimick the feeling of more pages/layouts and thus the interaction looks so smooth (no FOUC, script loading issues etc.). I will need to look at some examples of FLIP being used on interaction between actual pages.  I will be happy for any tip or hint. 

 

[Seamless page transition on scroll]

I have some updates regarding my efforts:

 

Quote

(You may notice a placement mismatch on the talent page that I need to address).

Element "mismatch" was resolved by hiding the scrollbar globally.

Here is the link to the code:
https://stackblitz.com/edit/withastro-astro-dy5jeq?file=src%2Fpages%2Fabout.astro

 

Looking forward to hearing from you!

[Seamless page transition on scroll]

Hello,

I am trying to recreate the interaction on this website: https://studiod.nu/projecten/witsen-site/, where the user is seamlessly redirected to the next page after scrolling to the bottom.

I have created a simple prototype here: https://gsapflippage.netlify.app/#talents (only "Talent 1" has the functionality implemented). I have a few questions:

1. Is GSAP Flip properly utilised in my prototype? Do I need another plugins such ScrollTrigger to achieve desired interaction? I aim for a seamless and smooth animation where the user barely notices the transition. Is FLIP the right choice for this? (You may notice a placement mismatch on the talent page that I need to address).
2. Is triggering the next page based on scrolling to the "bottom" the best approach? Are there any alternative methods I should consider?
3. Is it necessary to implement a page transition to achieve a smoother user experience? If so, what are some recommended practices or techniques?

Thank you in advance for your feedback and guidance.