Rodrigo

Hi, It shouldn't be more complicated than this: https://codepen.io/GreenSock/pen/BaMKdMo Hopefully this helps. Happy Tweening!

Hi, Yeah in that case the license is personal of that developer and probably the developer changed the token. That means that you should get your own license, probably include the full price or half in the costs of the project you're working with the company. Like that your license will be paid in one or two projects and after that is all profits for you! If you have any questions related to the license, feel free to ask or contact us via DM or using our contact form. Happy Tweening!

Hi, Is great to hear that you were able to solve it, that is working and that somehow the advice was helpful. Finally thanks for sharing the solution, looks great! Happy Tweening!

Hi, As I mentioned in my previous post, you should ask the company for the token they purchased. For the error in your first post on this thread, it looks like the installation you're trying to run is trying to install the business package. So you should first talk to the company and find out who bought the original license the company or the developer that left. If the company did, then ask them for the token, probably they changed it once the other developer left, so that means the company has an GSAP account. Also the structure of the .npmrc should look like this: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=your-token-here Happy Tweening!

Hi, Isn't this the exact same question as this? I believe Jack already explained the availability of ScrollSmoother (and other bonus plugins) in that thread. Pleas confirm that we can delete this post in order to focus on the other one. Thanks! Happy Tweening!

Hi, Maybe this example can serve as a good starting point: https://codepen.io/GreenSock/pen/ExEOeJQ Hopefully this helps. Happy Tweening!

Hi, The Observer Plugin basically is super useful when you need to watch certain events (mouse wheel, scroll, pointer, touch, key, etc) and attach a GSAP instance to those events when they happen. Here is a super simple demo that is kind of close to what you're trying to do: https://codepen.io/GreenSock/pen/ExrKxoy You can mix that with ScrollTrigger and the example that mixes both Observer and ScrollTrigger to do that. Hopefully this helps. Happy Tweening!

Hi I'm on my phone now and I can't tinker with the code . What I can see from a quick glance is that you're not cleaning up your animation in your button component. You should revert your GSAP context instance in the return function of your effect hook: useLayoutEffect(() => { const ctx= gsap.context(); return () => ctx.revert(); }, []); Take a look at our React resources here https://gsap.com/react Hopefully this helps Happy Tweening!

Hi I'm on my phone now so I can't really tinker with the code, but in my first post in this thread I linked to another thread where @Carlactually provides a working demo of that particular effect Hopefully this helps Happy Tweening!

Hi There's a difference between reverse and reversed methods. https://gsap.com/docs/v3/GSAP/Tween/reverse() https://gsap.com/docs/v3/GSAP/Tween/reversed() The first one (reverse) simply sets the direction of the tween's playhead, while the second (reversed) is both getter and setter. So this pattern you can see kind of often when toggling the direction of a GSAP instance in a single line of code: t.reversed(!t.reversed()); Basically consists in the first expression acting as a setter and the one used as a parameter acts as a getter. The we add the ! operator to use the opposite value. But both instances of the method use the same GSAP instance. The error you're getting is because there's no GSAP instance or anything else in your code defined as t. This should solve the problem you have there imageCourtain.reversed(!imageCourtain.reversed()); Hopefully this helps Happy Tweening!

Hi @sharmasarthak950, Just use a Timeline with a call method: https://gsap.com/docs/v3/GSAP/Timeline/call() Here is a simple demo: https://codepen.io/GreenSock/pen/jOdWMmV Hopefully this helps. Happy Tweening!

Hi, You can use the Observer Plugin in combination with ScrollTrigger as shown in this demo: https://codepen.io/GreenSock/pen/oNdNLxL More information on the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ Hopefully this helps. Happy Tweening!

Hi, You just created an infinite loop! The link in your previous post points to this thread! 🫠 Please review it and update it. Happy Tweening!

Hi, One thing that can give you issues is that in your codepen demo you are using really old versions of GSAP and ScrollTrigger, always use the latest versions. Regarding the order, actually ScrollTrigger is doing exactly what it should. Keep in mind that if you have a width that only fits six elements, you'll have (based on your demo) two rows, one with six elements and another with two. As soon as the elements with the class hit the trigger point, they are put into an array and animated based on the instructions you pass in the callbacks. If you scroll really slow and stop when just the first row appears everything will work as you expect, only the first row will show and the second one will show once those elements pass the trigger point. But if you scroll a bit more you'll see that the first and seventh element will animate in at the same time. That is totally expected since both elements passed the start trigger point almost at the same time. See the issue here? This is just because you are expecting this to behave in a different way, nothing more. If you want your boxes inside a group to animate in the order they are present in the DOM, then ScrollTrigger Batch might not be the best alternative, just a regular stagger animation using a regular ScrollTrigger instance and specific selectors for each type of box. Here is a fork of the last demo: https://codepen.io/GreenSock/pen/yLZeJQe Hopefully this helps. Happy Tweening!

I forgot, you might want to have a look at this demo as well https://codepen.io/GreenSock/pen/yLxpWXw Happy Tweening!

Hi @AndreasBP and welcome to the GSAP forums! Just a CSS issue here. You have an element with fixed position but with no top or left position set initially, so it gets positioned after the other elements. Just specify it's top and left position and it works: .teaser { width: 250px; height: 250px; background-color: #4c4c4c; position: fixed; pointer-events: none; cursor: pointer; opacity: 0; overflow: hidden; /* SET TOP AND LEFT POSITION */ top: 0; left: 0; } Here is a fork of your codepen with those changes: https://codepen.io/GreenSock/pen/QWYyEKP Hopefully this helps. Happy Tweening!

Hi, @Carl response in this thread should be a good starting point: The main issue in your code though seems to be related to using the same trigger element for both sections in your loop const mediaWrap = document.querySelectorAll('.page-hero'); mediaWrap.forEach(media => { const mediaImgs = media.querySelectorAll('.page-hero__bg img'); mediaImgs.forEach(img => { const heightDiff = img.offsetHeight - img.parentElement.offsetHeight; const parallaxComp = 140; gsap.to(img.parentElement, { y: -heightDiff + parallaxComp, scale: 1.1, scrollTrigger: { trigger: mediaWrap, start: `top top`, scrub: 1.5, }, }); }); }); In your code mediaWrap is just one element and your page-hero sections are two, so both start at the same time. I made a fork of your codepen here: https://codepen.io/GreenSock/pen/abXdNgd Hopefully this helps. Happy Tweening!

Hi @scuba_d and welcome to the GSAP forums! You should as your company to pass along the required information (Privjs Token) that they can find in their account dashboard) so you can install the bonus plugins in the project. For deploying to Netlify you should follow the instructions in this guide: https://gsap.com/docs/v3/Installation/guides/Club GSAP & Netlify Although if they have some sort of CI/CD flow/pipeline, the deploys should be working automatically on Netlify after you push your latest changes to your repo, so I'm going to guess and assume that you're seeing this issue when trying to run the project locally on your machine? Happy Tweening!

Hi, Is really hard for us to debug without a minimal demo. We have a collection of Starter Templates in Stackblitz: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters The only thing I can see not going right in your code is this: useLayoutEffect(() => { console.log("copy effect"); const ctx = gsap.context(() => { const animation = gsap.tl .to("h1", { xPercent: 100, duration: 0.6, ease: "power1.in" }, 0) .to("h2", { opacity: 1, duration: 0.6, ease: "power1.in" }, 1); addAnimation(animation, index); }); return () => ctx.revert(); }, [addAnimation, index]); The problem I see is that you are adding a new timeline to the parent timeline using the addAnimation method. Now what happens when you change the index prop? Your entire effect hook runs again and that particular GSAP Context is reverted, then a new animation is added to the parent timeline, but the parent timeline already has a reference to a timeline that no longer exists. This could create some logic issues, breaking errors and most definitely a memory leak. If the index prop is not changing then there is no need to have it as a dependency in your array. If ESLINT is complaining about it, just disable the rule in that particular line. Happy Tweening!

Hi, The reason for the unexpected log in your console is because you're calling your setTimeline() method twice: Once with the GSAP Timeline you're creating as a parameter and a second time with the GSAP Context instance you're creating as a parameter. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your animations go in here... let tl = gsap.timeline({ duration: 2.5, delay: 1, repeat: 99 }); // tl.set("#logo", { opacity: 1 }); tl.set(".bg", { opacity: 2 }, 0); tl.to(".triangle", { right: 0, duration: 0.6, ease: "power1.in" }, 0); tl.to(".arrow-left", { right: 100, duration: 0.4, opacity: 1 }, 0.4); tl.to(".arrow-right", { right: 30, duration: 0.4, opacity: 1 }, "<"); tl.to(".title-1", { xPercent: 100, duration: 0.6, ease: "power1.in" }, 0); tl.to(".title-2", { opacity: 1, duration: 0.6, ease: "power1.in" }, 1); // tl.to(".cta", { opacity: 1, ease: "power1.in" }, 1.8); setTimeline(tl); }, root); // <- scopes all selector text to the root element // calling setTimeline again here!!! setTimeline(ctx); return () => ctx.revert(); }, []); So the log you're getting in your console is the GSAP Context instance. Honestly there is no need to call that method twice: useLayoutEffect(() => { let ctx = gsap.context(() => { // all your animations go in here... let tl = gsap.timeline({ duration: 2.5, delay: 1, repeat: 99 }); // tl.set("#logo", { opacity: 1 }); tl.set(".bg", { opacity: 2 }, 0); tl.to(".triangle", { right: 0, duration: 0.6, ease: "power1.in" }, 0); tl.to(".arrow-left", { right: 100, duration: 0.4, opacity: 1 }, 0.4); tl.to(".arrow-right", { right: 30, duration: 0.4, opacity: 1 }, "<"); tl.to(".title-1", { xPercent: 100, duration: 0.6, ease: "power1.in" }, 0); tl.to(".title-2", { opacity: 1, duration: 0.6, ease: "power1.in" }, 1); // tl.to(".cta", { opacity: 1, ease: "power1.in" }, 1.8); setTimeline(tl); }, root); // <- scopes all selector text to the root element return () => ctx.revert(); }, []); Hopefully this helps. Happy Tweening!

Hi, That has to do with the fact that you have a scrub value different than true, that translate into the animation progress catching up during that time (1 second in your case). if you change that to just scrub: true it works but you don't get that scrub during a period of time effect. This seems to work the way you expect: document.querySelectorAll("[data-trigger]").forEach((item, index) => { item.addEventListener("click", (event) => { event.preventDefault(); const st = stInstances[index]; gsap.set(window, { scrollTo: { y: st.start } }); st.animation.progress(0); }); }); Hopefully this helps. Happy Tweening!

Hi, In this cases is better to pin a larger element that wraps all the elements (previous, current and next sections), like in these demos: https://codepen.io/GreenSock/pen/LYMYYEL https://codepen.io/GreenSock/pen/qBLRzVX Hopefully this helps. Happy Tweening!

Hi, This should do it: document.querySelectorAll("[data-trigger]").forEach((item, index) => { item.addEventListener("click", (event) => { event.preventDefault(); const st = stInstances[index]; gsap.set(window, { scrollTo: { y: st.start } }); }); }); Hopefully this helps. Happy Tweening!

Hi, Indeed that is not really a GSAP related questions and we try to keep these forums focused on GSAP questions. Maybe this thread can help: Good luck with your project. Happy Tweening!

Hi @chardin and welcome to the GSAP forums! Maybe something like this: https://codepen.io/GreenSock/pen/wvNKpEg Hopefully this helps. Happy Tweening!