Crystal

I have a page with scrollTrigger, implemented within react project. I am using UseEffect hook for implementing it and cleaning up with kill() afterwards. When loading redirecting to the page the first time - everything works ( from page with no scrollTrigger), after going back to frontpage and to scroll-trigger page again, it stops working. When loading the page directly, it never works, the scroll-trigger markers flash and disappear. This happens only on production - vercel hosted, statically generated page. Any idea what could be causing this. I have tried different solutions, made sure the trigger is loaded and there when scrolltrigger gets initiated, which it always does. When I console log the scrollTrigger after initiation, it's there. No other elements on the page use scrollTrigger, it's the only one. Videos and code for information bellow, it's hard to recreate in codepen as it' a part of bigger ecosystem . https://drive.google.com/drive/folders/1k_ZMRbcrezLGbtemDDX8NIGGqsdgC69K?usp=sharing

Actually one more thing, in your solution the text slides up while the dark background section is revealing, but it should stay in the middle of the screen ?

Thanks for the help Sometimes it's overwhelming so it's nice to hear I am going in the correct direction! works as i wanted it, yes

Ah yes, there was supposed to be id on the h2 inside .fade-div So is there a way of making the animation of the last dark background slide more smooth or not appear so soon after the second title gets scrolled in ? by snapping i mean the when you scroll from the first title to the second i would like it to snap in place / center of screen rather then scrolling it in place. ( like scroll a bit and the title finishes sliding in on it's own)

Hi, I am new to gsap and love it. I am trying to reproduce a scrolling animation like here -> https://drive.google.com/file/d/1G2TyhqcYLDizmPMmHnmkcjUPhh7YK7yC/view?usp=sharing i have managed to do the first part but cannot make the ending nice and smooth as well as having the section "snap" in place rather then scroll all the way. maybe my approach was wrong, can someone help and point out in which direction i should go to make this work ?