All Activity

Thanks for the quick reply. Components can be in any order as I may use them in different pages with different content. I tried to keep refreshPriority, but I am facing the same issue. Below is the codepen I tried. GSAP Video Onscroll issue (codepen.io)

Hi. Can this be used with side scrolling sections as well?

Great to hear about it! Yeah sometimes we have to hack our way into something working the way we need 🤷‍♂️ Happy Tweening!

Ahh yeah I see the problem now. Roughly this is your HTML <div class="scroll-through-hero st-hero-animate sth-fadein-off" style="background-color: inherit;"></div> <div class="immersive-scroll-video" style="background-color: inherit;"></div> <div class="immersive-scroll-video" style="background-color: inherit;"></div> <div class="scroll-through-hero st-hero-animate sth-fadein-off" style="background-color: inherit;"></div> In your JS you're creating the ScrollTrigger instances for the elements inside the immersive-scroll-video elements and then for the scroll-through-hero elements. When using ScrollTrigger ideally create the instances in the order they appear on the screen as the user scrolls down, especially if you are pinning one or more ScrollTrigger instances. If you can't create your instances in the order they appear in the screen, then you can use the refreshPriority config option. From the ScrollTrigger docs: refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers. Here is the docs for the sort method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort() Hopefully this helps. Happy Tweening!

Hi @Rodrigo, Thanks you very much for pointing out the issue. It worked as expected. I was thinking something is wrong with my GSAP code where the actual issue was with my markup. Thanks a lot!

Thanks. I fixed it in another way, by removing the background color when it was not needed. That way, no visible strange edges on my images.

Hi, I'm not 100% sure of what issue you're experiencing, but waiting for 1 tick of GSAP's ticker should be enough. As far as I can tell, after you revert your GSAP instances and create the new ones, it should take 1 tick to render the new ones, so that should be enough. Based on your demo this is how I would proceed: const tweenable = document.getElementById('tweenable') let tween, timer; const createTween = () => { tween = gsap.timeline().fromTo(tweenable, {opacity: 1}, {opacity: 0, duration: 1}); }; const revertTween = () => { tween && tween.revert(); createTween(); }; window.addEventListener("resize", () => { timer && clearTimeout(timer); timer = setTimeout(() => { revertTween(); }, 200); }); createTween(); Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNOVzdg Hopefully this helps. Happy Tweening!

Hello Rodrigo, I apologize for any lack of clarity in my previous message. I'll now attempt to precisely pinpoint my issue in this post and make slight modifications to the codepens for clarification. I'm working on creating several components with scroll-triggered video animations. Each component will have its own unique text animations applied later on videos. In the current setup, which includes three video components, I'm ensuring that the animations don't interfere with each other or overlap. GSAP Video Onscroll without issue (codepen.io) - I am trying to post this codepen, but preview is not coming, but its there in my earlier post. However, when attempting to incorporate more video components onto the same page, such as 5-6 video components, the on-scroll video animation breaks, and the components overlap with each other, as illustrated below. GSAP Video Onscroll issue (codepen.io) What I've noticed is that in some instances, a video component starts playing earlier than it should, relative to the previous video component. Additionally, when I include other scroll-triggered pinned components, the on-scroll video components overlap with each other.

Hi @knozz and welcome to the GSAP Forums! Maybe something like this demo: https://codepen.io/GreenSock/pen/vYjqXLm Hopefully this helps. Happy Tweening!

I am trying to implement a horizontal animation using the ScrollObserver plugin. What I am not able to achieve is, stoping animation as it animates from left to right immediately as it reaches a certain point (in pixels), since if you scroll "hard" it will pass the point I need it to stop. What would you suggest here?

That's because the first ScrollTrigger instance is passed the end marker and the second one is passed the start marker, makes total sense: You have to take a look at the clamp feature in ScrollTrigger: Yep I'm aware of what custom hooks do in React, I wrote parts of our useGSAP hook. Hopefully this helps. Happy Tweening!

Yeah, that definitely seems like a Firefox rendering bug, totally unrelated to GSAP. My guess is that the renderer needs time to create the raster image for each SVG image. It likely ignores them completely (skips creating the raster) initially because they are display: none. But once it flips to display: block once, that raster image gets created and cached by Firefox, thus it can show it faster next time. Maybe try setting ALL of the images to display: block initially, just for 1 tick maybe so that the browser gets them all rasterized/cached. Rodrigo's suggestion to go with canvas is very good too.

Hi, Sorry but I can't get 100% what you're trying to achieve here. Do you want to pin the elements in one column in sequence like this demo? https://codepen.io/GreenSock/pen/eYQYxJW If possible try to make a clear description of what should happen and include a live demo that has said feature so we can get the desired effect you're after. Happy Tweening!

Yeah, this seems more like a browser rendering thing rather than anything else, sometimes some combination of negative margins and padding can help, maybe you could try something like that and see if it works. I wish we had a simple one line solution for this. Happy Tweening!

Many Thanks, @mvaneijgen Though it is a little fast now I think I can manage to fix that myself Thank you very much for answering my doubts. Have a good day!

Unfortunately it's just not feasible to make ScrollToPlugin accommodate that automatically. There's no way it could understand which elements are affected by which ScrollTriggers. It's essential that you, as the builder of the page, provide that information. But here's a helper function you could try - it lets you create several lookups that get added together into one big lookup. Splitting them up like this allows you to segregate elements according to whether or not they're in a containerAnimation and/or pinnedContainer: function getScrollLookup(targets, {start, pinnedContainer, containerAnimation}) { targets = gsap.utils.toArray(targets); let initted, triggers = targets.map((el, i) => ScrollTrigger.create({ trigger: el, start: start || "top top", pinnedContainer: pinnedContainer, refreshPriority: -10, onRefresh(self) { if (initted && Math.abs(self.start) > 999999) { triggers[i].kill(); triggers[i] = ScrollTrigger.create({ trigger: el, start: start || "start start", pinnedContainer: pinnedContainer, refreshPriority: -10, }); } }, containerAnimation: containerAnimation })), st = containerAnimation && containerAnimation.scrollTrigger, lookups = [], lookup = target => { let t = gsap.utils.toArray(target)[0], i = targets.indexOf(t); if (i < 0) { for (i = 0; i < lookups.length; i++) { if (lookups[i].targets.indexOf(t) !== -1) { return lookups[i](t); } } return console.warn("target not found", target); } return triggers[i].vars.containerAnimation ? st.start + (triggers[i].start / containerAnimation.duration()) * (st.end - st.start) : triggers[i].start; }; lookup.targets = targets; lookup.add = (targets, config) => { lookups.push(getScrollLookup(targets, config)); return lookup; }; initted = true; return lookup; } So you'd use it like: let lookup = getScrollLookup("section.project", { containerAnimation: tween, pinnedContainer: el }); lookup.add("section.other", {}); // no containerAnimation or pinnedContainer lookup.add("section.pinned", {pinnedContainer: el}); // just a pinned container // then later... let position = lookup(".any-of-the-above-elements"); Hopefully that helps.

Hi Rodrigo, In the stackblitz demo I can't import useGSAP from gsap-trial (not found), however making sure I register useGSAP seems to fix the demo. However I still can't get things working right in my website code even with the paid gsap package. I will see if I can reproduce whatever is happening in stackblitz but thank you for your help with the demo

Hi all, I'm working with SplitText and I need to be able to revert everything, reset timelines, and then recreate and re-run everything on resize. The main issue I'm having is chaining everything nicely. timeline.reverse() returns itself 'for easy chaining' according to the docs. Except you can't chain timeline.reverse().then() (this throws an error) and wrapping it in a promise doesn't work either. What is the best way to make sure everything has been fully reverted when wrapping reverts in external functions? Because if I dump everything into one function, things do get cleaned up correctly, but we obviously don't want to do that.

Thanks. clearProps at the end helps. But I realize that the problem is broader and outside of gsap. Even a CSS animation on opacity creates this kind of lines along the image during the animation. Not sure what the issue is here...

Hi team, I am trying to scroll through the video on scroll which I can able to do it for individual components like below example.GSAP Video Onscroll issue without issue (codepen.io) But when I am trying to keep different component multiple times on same page or with combination of other gsap scrolltrigger animations, animations are overlapping & breaking like below. GSAP Video Onscroll issue (codepen.io) I want these two components to coordinate seamlessly so that different animations can be applied to them and these two components should not break other scrolltrigger pin animations. Any gudience is appreciated, Thanks.

Hello @Rodrigoyes I will try to do it I just have to take the time given the work I have at the moment thank you

Hi, You could try clearing the inline styles applied by GSAP using clearProps on an onComplete callback: gsap.timeline({ repeat: 1, yoyo: true, onComplete: () => gsap.set(element, { clearProps: "scale" }), }) .to(element, { scale: 1.1, duration: 1, }); Another option could be to try using will-change: transform on those images and see how that works. Hopefully this helps, if you keep having issues, please try to create a minimal demo so we can have a better look. Happy Tweening!

Hi @kosmo, Sorry to hear about the issues. Can you provide a minimal demo by forking this codepen: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

Hi, There are a few issues in your demo. First you're creating a single timeline for all the buttons, that is not going to work the way you intend, create the GSAP Tween/Timeline, inside the loop so each button controls it's own animation. Second, you have the same mask name for all the elements, which means that when one mask is animated it affects all the elements with that mask ID, create a different mask ID for each element. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbRxrP Hopefully this helps. Happy Tweening!

Hi, The specific issue here stems from the fact that you're using the GSAP Trial package. The short explanation is that the useGSAP hook uses the regular GSAP import, like this: import gsap from "gsap"; But the rest of your app is using the GSAP core files from the gsap-trial package which is a completely different object (the code is basically the same but it comes from different files, hence a different object), so the scope is not being used because is added to a different GSAP core object. The solution is to register the useGSAP hook using the import from the gsap-trial package so it uses the same GSAP core than the rest of the plugins: gsap.registerPlugin(ScrollTrigger, useGSAP); That should fix the problem. Happy Tweening!