glOo Posted June 13 Share Posted June 13 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: 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). Is triggering the next page based on scrolling to the "bottom" the best approach? Are there any alternative methods I should consider? 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. Link to comment Share on other sites More sharing options...
glOo Posted June 13 Author Share Posted June 13 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! Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 13 Share Posted June 13 Hi @glOo and welcome to the GSAP Forums! We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations. If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. Finally what you're trying to achieve is not the simplest thing to do and indeed the Flip Plugin would be a good tool for achieving that. But this also boils down to handling route changes and layout setup (HTML and CSS) among other things. You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. Link to comment Share on other sites More sharing options...
Cassie Posted June 13 Share Posted June 13 Hi there! Yes this is 10000% a use for page transitions. I'm afraid I'm not super clued up on astro but you can do page transitions with something like barba.js or swup (also natively using the shared element transitions API, but that's only available in chrome) If I were you I'd work on the page transition first, then once you've got that sorted, fire it off using ScrollTrigger when you hit the bottom of a page. 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 13 Share Posted June 13 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? 1 Link to comment Share on other sites More sharing options...
glOo Posted June 15 Author Share Posted June 15 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. Link to comment Share on other sites More sharing options...
Cassie Posted June 15 Share Posted June 15 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 Quote Barba.js — aka Barba — is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website’s pages. It makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user’s web experience. This example from the Barba docs shows how it works https://barba.js.org/docs/advanced/third-party/#Scroll-Trigger Link to comment Share on other sites More sharing options...
glOo Posted June 15 Author Share Posted June 15 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now