cx20012002

I added a line of code on the top window.scrollTo(0,0), this fix the issue, but i think gsap must have its own way to deal with the reset, looking forward to your reply

Hi GSAP I'm facing a new issue to make the scrolltrigger working properly in next js 13.4 when switch between pages, I have done 2 pages with gsap and scrolltrigger in next js (home page, about page), there is no issues if i just visit one of the page, if i go to home page first then about page, and then scroll further down in about page, and then redirect back the home page again, the problem happended, it looks like the scrolltrigger positions were all incorrect, it seems like not been cleaned properly. I have been search online for the solution, and try to use gsap context to wrap all the animation and scrolltriggers, then return to clean with context revert function as recommended from the offical website, i also put ScrollTrigger.refresh() to reset its positions or animations, after i use ScrollTrigger.refresh(), everything works perfectly in dev mode, no problems when i'm swtich between the pages, it aways reset the scrolltrigger to act correctly, but ScrollTrigger.refresh() not working when i deploy with production mode, i tried everything and could not work it out, it is a bit hard for me to put the code into Codepen as it's a project with routes and dependencies and paths...., so i just attach a image of my gsap code for you as an reference, also a link of the website deployed on vercel Create Next App (next-cv-psi.vercel.app)

Thanks a lot, it looks much tidier with timeline!!

Hi, Thanks for the quick response, I have worked out the solution for the effects I want to achieve and codepen forked in my initial post, it would be much appreciated if you can check to see if i am doing correctly or there is another better way or the code can be optimized for reuse, thanks and looking forward to your reply Regard Thomas

Cubo - Framer Template Hi Team Upon scrolling down, the top banner begins to scale down. Simultaneously, there's a text animation taking place within this banner. This top banner is pinned to the center of the browser and remains there. As one continues to scroll down, the elements below the pinned banner start to move up, eventually covering the pinned section. Notably, even as these elements move up to cover the pinned section, the animation on the pinned section continues to run. This means the banner keeps scaling down and the text inside it continues its animation, all while being in the center of the viewport. From my experience with GSAP's ScrollTrigger, when I use the pin feature, elements below the pinned section only start to push it up after the pinned section's animation has fully completed. Can you provide a solution using ScrollTrigger to replicate the described effect?

Thanks very much for the quick response!!! you save my life, this is exactly what i want.

Thanks heaps for the quick response, this is a great example, but when i try to add more sections it just did not look right, could you please show a bit more based on this code with more sections?

Hi Team, here is the link that is showing the scrolling effect of swiping sections Olson Kundig — A collaborative global design practice whose work expands the context of built and natural landscapes. I have checked all the demos listed on GreenSock website, this is different from cover layer sections on the demo of your website, it's a bit more like the comparison section, but with multiple sections, could I please get a help on how to code this effect?