Rodrigo

Hi, The problem here is that you're adding your ScrollTrigger configuration to an animation in a timeline. A timeline basically controls the position of a tween's playhead. ScrollTrigger does the same based on the scroll position. So who has control of that particular tween, the timeline or the ScrollTrigger instance? They're both fighting for controlling the tween which causes this result. In this cases just add the ScrollTrigger configuration to the timeline. This seems to work the way you intend: gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: ".split", start: "top 15%", end: "bottom bottom", scrub: 3.5 } }); gsap.utils.toArray(".split rect").forEach((panel) => { const axisY = panel.getAttribute("y"); const string = parseInt(axisY); tl.fromTo( panel, { height: 52, stagger: { each: 0.3 }, attr: { y: `${string + 208}` } }, { height: 260, stagger: { each: 0.3 }, attr: { y: `${axisY}` }, duration: 0.4, } ); }); Hopefully this helps. Happy Tweening!

Hi @Carlo Autor and welcome to the GreenSock forums! Basically the issue is being caused by the other animations you have in your setup. Here is a fork of your codepen removing every other animation and ScrollTrigger instance: https://codepen.io/GreenSock/pen/YzJmvVP You are animating the Y position and scale of some elements which of course will affect the vertical position of the elements that are after the ones being scaled up in the document flow. One option could be to create an HTML/CSS setup that accounts for those spaces or use ScrollTrigger to pin the parent of the elements being scaled up in a way that the increase of the scale doesn't alters the document's flow, that is the vertical position of the elements that come after them. Hopefully this helps. Happy Tweening!

Hi, You have to add a check so the text out animation doesn't run if the element is the last one. In this case this seems to work: $verticalTextItems.each((index, item) => { gsap.set(item, { yPercent: index === 0 ? 0 : 100, opacity: index === 0 ? 1 : 0 }); if ($verticalTextItems[index + 1]) { timelineText .to( item, { yPercent: -100, opacity: 0 }, "+=0.5" ) .to( $verticalTextItems[index + 1], { yPercent: 0, opacity: 1 }, "<" ); } }); Here is a fork of your codepen: https://codepen.io/GreenSock/pen/VwEodeo Hopefully this helps. Happy Tweening!

Hi, The only thin I can think of is that something else in your WordPress setup (CSS file) is messing up your particular setup. Maybe try to create custom styles for your ul element with some specific selector for the element and it's parent and try to add them to Wordpress' queue as late as possible. Other option (not elegant really 😐) is to add !important to the specific style. But other than that I can't think of a something else that could be causing this. Unfortunately, as you mention, in codepen everything works as expected. Hopefully this helps. Happy Tweening!

Hi, I've followed the instructions but can't replicate the issue you mention and illustrated in the gif you included, maybe I'm missing something or perhaps since you created the thread you added this part of the code: onStart: () => { const box2 = document.getElementsByClassName("box2")[0]; box2.innerHTML = tl.progress(); if (tl.progress() > 0.5) { gsap.set(".box2", { x: "80vw" }); } else { gsap.set(".box2", { x: "0vw" }); } }, Have you tried this without styled components? One thing I can think of is that in React child components are rendered before the parent. It shouldn't matter IMHO because the code runs on the parent component, but just in case. Another thing is passing the ref to the layout effect. Are you seeing some issues by passing just an empty array? As far as I can tell it shouldn't matter, but again check just in case. Finally what you could try is checking the latest beta files: https://assets.codepen.io/16327/gsap-latest-beta.min.js https://assets.codepen.io/16327/ScrollTrigger.min.js Hopefully this helps. Happy Tweening!

Hi @Dusan Nedeljkovic and welcome to the GreenSock forums! It's really hard for us to troubleshoot an issue without a minimal demo. The only thing I can think is that the start and end points of each animation are not matching. One thing you can do for better debugging is to pass some different config to each ScrollTrigger's markers (like different indent values) and different ids. Here are a couple of examples background color change with ScrollTrigger: https://codepen.io/cameronknight/pen/RwRebNY https://codepen.io/GreenSock/pen/XWYeagd Hopefully this helps. Happy Tweening!

Hi, The simplest approach is to create side-by-side sections using flexbox. Then create a single timeline to control all the animations using a loop. Here is a codepen example: https://codepen.io/GreenSock/pen/wvYVjvb Here is the same example in a React setup: https://stackblitz.com/edit/vitejs-vite-thxqgj?file=src%2Findex.css,src%2FApp.jsx&terminal=dev For using React, remember to always use GSAP Context. Check the resources in this page: Hopefully this helps. Happy Tweening!

Hi, You can check for the hash in the URL after creating all the ScrollTrigger instances. If for some reason you don't get the right values, you could use a short setTimeout (about 50 ms) to be sure that you get the right values. You already have the getScrollLookup method ready for that. As for updating the hash as you scroll, yeah I don't know about that, you'd have to search for that in Google, but that's beyond the scope of these forums. Is far simpler to give a specific class to the current active link. Hopefully this helps. Happy Tweening!

Hi, Have you checked this example? https://codepen.io/GreenSock/pen/KKoMpMv I'm curious about what's not working for you. If possible, could you create a codepen example or update the one you already created with this issue you're seeing? Happy Tweening!

Hi, Indeed is hard without a minimal demo. The only advice I can offer you right now is to run ScrollTrigger.refresh() after the server response is completed and the new data is reflected in the DOM. Use a layoutEffect hook in order to listen to either some props or state update that is tied to the server's response. Once you have the new data, create your ScrollTrigger instances and run ScrollTrigger.refresh(). I'll see if I can create a simple example that shows this and perhaps upload it to a repo. Also remember to use GSAP Context in that layoutEffect too Hopefully this helps. Happy Tweening!

Hi, I don't see any Flip animation happening in your setup, because right now you're not targeting all the properties that are being updated. Also I spotted a few things that you should consider. Always use GSAP Context when working with React environments. https://greensock.com/docs/v3/GSAP/gsap.context() Always use React's events instead of adding event listeners. It's safer and React will clean those event handlers when/if the component is unmounted. Don't store variables in the global scope of your components, because a re-render will reset those. For a boolean either use state or a ref. Flip.from returns a GSAP Timeline instance so you can store it in a ref. This seems to work the way you expect: export default function App() { const boxRef = useRef(); const flipAnimation = useRef(); const ctx = useRef(gsap.context(() => {})); const clickHandler = () => { ctx.current.add(() => { const state = Flip.getState(boxRef.current, { props: "width,height, background", }); boxRef.current.classList.toggle("enlarge"); flipAnimation.current = Flip.from(state); }); }; useEffect(() => { return () => ctx.current.revert(); }, []); return ( <div className="App"> <div className="composition-component"> <div className="box" ref={boxRef} onClick={clickHandler}> Sky Balls Lopserum Madya </div> <div className="parentBox"> <div className="parentBox1"></div> <div className="parentBox2"></div> </div> </div> </div> ); } Then you can use flipAnimation.current to kill, pause, revert, etc. the timeline returned by the from() method: https://greensock.com/docs/v3/GSAP/Timeline Hopefully this helps. Happy Tweening!

Hi, In this cases is better to create your animations in advance and then add ScrollTrigger to the mix. Also right now you are creating two different timelines which I think is causing more issues than it's solving. Here is an approach that creates a single timeline for each element and then, sets each timeline on a specific position based on the current index of the loop. This has no ScrollTrigger built into it, just a proof of concept of how to approach this in a dynamic way: https://codepen.io/GreenSock/pen/WNaVvBK Now, plugin ScrollTrigger into this is a bit of a challenge I'll have to say, especially with a dynamic approach. I think the best way would be to manually create the animations and add them to the same timeline that controls the texts using the position parameter. Like that you can position each card animation precisely where you want/need it. Sure thing is not the most elegant solution for this, but sometimes the simplest solution, which can be a little bit verbose and not extremely elegant is the best one. Hopefully this helps. Happy Tweening!

Hi, Just a problem with all those &nbsp; there. I just added a single css class for the white space and seems to work as expected now: https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx,src%2Findex.css Happy Tweening!

Hi, What Cassie means by z-index is to have the element on top of everything at all times, something like z-index: 1000; that normally is enough if you have other elements in your page with z-index of their own. Also there is a problem with using pageX and pageY. Those values are relative to the top of the document. If you have a browser window that reports a height of 900px and you scroll 200px down, if you put your mouse pointer at the top of the browser window the value of pageY is going to be 200 and not 0. So as you scroll down the vertical position of the mouse gets further down the screen until after scrolling 900px you'll never see it again unless you scroll up. document.addEventListener("mousemove", (e) => { cursor.style.left = e.clientX + "px"; cursor.style.top = e.clientY + "px"; }); That works the way you intend. Finally I'd recommend you to use GSAP QuickTo for this as seen in this example: https://codepen.io/GreenSock/pen/xxpbORN Hopefully this helps. Happy Tweening!

Hi @Tung Shark and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! 💚 There are a mix of issues in your setup, some are GSAP related and other are just HTML/CSS related. For example the cards container has a width of 100% but no height and since all it's children have an absolute position, the natural height of the parent is zero, so giving it a height of 100vh seems to work. Then you had this on your ScrollTrigger config: end: wheight * 5 + ' bottom', duration: 1, ScrollTrigger doesn't recognize duration as a config option so that's just ignored. Also if you want a ScrollTrigger to extend 5 times the height of the viewport just pass a relative percentage value like this: end: "+=500%" and ScrollTrigger will do the rest for you. Finally you don't need to pass this to a GSAP animation: stagger: 0.2, start: () => "top top", end: () => 'bottom bottom', Start and end are just for the ScrollTrigger config and are ignored in a GSAP animation. I forked your codepen and made a few changes to it and seems to work the way you intend: https://codepen.io/GreenSock/pen/LYgwPwZ Hopefully this helps. Happy Tweening!