Leaderboard

It's not really a bug. It's just a fundamental logic problem in the way you're setting things up. Let me explain... In order for a callback to fire, the playhead must cross that spot on its parent timeline, or land directly on top of it. So it's based on the playhead moving (its new position). The timeline doesn't render for the first time until the next tick (it'd be silly to render right away by default because the playhead hasn't moved anywhere yet, so it'd be a waste of CPU cycles). That's why the very first one didn't fire right away. The timeline's playhead updates on each "tick" which is typically about every 16.67ms but that really depends on the browser and how busy the CPU is, etc. Your timeline is 2 seconds long and has repeat: -1. So let's say it renders almost at the end, at like 1.9857 seconds, and then on the next tick, the totalTime renders at 2.013 which means that it went past the end and wrapped around to the beginning, and 0.013 seconds into the timeline (from the start). In that ONE tick, it'd fire that callback that's at the very end of the timeline AND since it looped back to the beginning and went a little bit past, it ALSO triggers the callback that's sitting at the very start. Great. BUT What if the playhead happens to land EXACTLY at the end of the timeline (2 seconds precisely)? What do you think should happen? Obviously the callback at the end should fire, but should the callback that's sitting at the very START of the timeline also fire? I mean the end of the timeline and the start of the timeline are not the same technically, so it'd be weird if both fired. The playhead can't be at 2 seconds AND at 0 seconds. It wouldn't make a lot of sense to fire the callbacks from BOTH places on that ONE tick. See the problem? There are many ways to accomplish what I think you're trying to do there (alter visibility of things in a synchronized way), but I'd need to see what other requirements you have in order to offer the best recommendation. Thanks for the excellent minimal demo, by the way. 👍

Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started. https://codepen.io/PointC/pen/abxYroe Happy tweening.

Hi @WakuWakuCodingu welcome to the forum! Looks perfect to me I would not change a thing! Certainly not if this if your first time using the tool. Pin spacing is needed for ScrollTrigger to do its magic, so you can really remove it. You can but then all your further sections will overlap you animation You could use gsap.utils.toArray, but you can also just feed a query selector to the GSAP tween and it will also get all the elements. In this case I've set all your .innerBox elements and add a stagger to the animation so they come in one by one. I've also move the ScrollTrigger logic to the timeline, so now it is even more clear what ScrollTrigger is controlling. Indeed in this case is it not strictly necessary to set overflow: hidden; but it also doesn't harm anything. https://codepen.io/mvaneijgen/pen/bGJvLZz I've written a guide how to create the kinds of card stacking effect, yours works perfectly, but maybe you can get some knowledge from it. Hope it helps and happy tweening!

Hi @Brandium welcome to the forum and thanks for being a club member! There is a bit much going on in your demo if you could reduce it to just the mask animation (the part you're having trouble with) it will be much easier for us to help you debug. A note your animation also doesn't work on Desktop Safari (at least not in Version 17.2.1). There are a lot of ways mask animation can work in on the web and a few weeks back I'd written a guide how to use most of them. Maybe your the solution you're looking for is already in there. Take a look an I hope it helps you solve your problem, if not post back here (preferably with a more minimal demo) and someone will be here to point you in the right direction!

Wow, how did I miss that?? The scroller property is indeed exactly what I needed. Thank you. And yep, you're right that people with taller monitors than my laptop would have the animation happen immediately. I tweaked the demo to fix that.

Hi, I think you are overcomplicating this quite a bit. It should be as simple as this: https://codepen.io/GreenSock/pen/zYXWVdw Happy Tweening!

Hi @Jake H and welcome to the GSAP Forums! You can tell ScrollTrigger to listen for scroll events in other elements with the scroller config property, no problemo! From the ScrollTrigger Docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. It would be something like this: onMounted(() => { // Slide "Hello #20" rightward when it's centered. const tl = gsap.timeline({ scrollTrigger: { trigger: ".hello-20", start: "top center", end: "+=100", scroller: ".tall-component", markers: true, }, }); tl.to(".hello-20", { x: 30 }); }); Here is a fork of your demo: https://codesandbox.io/p/devbox/vue-scrolltrigger-test-forked-hddg9j?file=%2Fsrc%2Fcomponents%2FTallComponent.vue%3A20%2C25 Is worth noticing though that the center of your scroller element is waaay below the fold so your animation happens immediately, so I would look into enhancing the styles accordingly to make this work the way you want/need. Hopefully this helps Happy Tweening!

Hi, Rodrigo, thanks for the reply and advice! I was able to learn something more about gsap coding today!

I'm on M1. Try this: https://inkscape.org/release/1.3alpha0/mac-os-x/

Ha fair enough, its quite subtle in the demo I admit. Its a lot worse on the actual working project. Just a bad developer 😂 cheers for the heads up, makes sense, I'll change it! Yeah I agree, seems like its an iOS issue. Thanks again for your help.

I resolved it I found a similar project(https://codepen.io/akapowl/pen/rNJOrga) and solved it Thank you so much for the time and support

Thanks for the solution! This worked like a charm!

@Rodrigo Thanks! That's what I ended up doing. Once you get the hang of going back and forth to the ease visualizer (it would just be impossible without it) you begin to see the relations between the curves and the path movement. It's laborious but interesting! As a reference for anyone trying this approach in a framework with SSR (I'm using Next.JS) always leave your markers on until you are done! I came across a problem with the ScrollTriggers getting moved up when I refreshed the page (because the whole document wasn't ready), and only noticed it far ahead. Had to implement a fix (A ScrollTrigger on the 'body' with a ScrollTrigger.refresh();) and had to start over... I would have noticed the markers being offset if they were on... <<trial and error>> indeed. @GreenSock This helper function is like magic to me! Your initial description says it all <<Helper function that returns an ease that bends time>>! I love it. It's beyond my current coding full grasp, I can kinda read the code, but towards the end get lost in its complexity. None the less it mostly works. I'll definitely use it eventually. Thank you both! As always, the best community I've ever seen.

Hi @zanntux and welcome to the GSAP Forums! I'm not 100% sure, but this could be related to the fact that you call the init method, where you add the display none style to the elements. Then the GSAP instances are created and then a single tick runs before the GSAP timeline starts which could lead to this behaviour. Although a single GSAP tick is just 16 milliseconds, so IDK if that should be enough to show the blue element behind and to be noticeable. We'll look into this and let you know. Happy Tweening!

Hi, Most likely this is related to the fact that you're animating the width property. Always avoid animating width/height/top/left properties because they require a paint and layout updates: https://web.dev/articles/animations-guide#triggers https://web.dev/articles/animations-overview#pipeline You can try the demos in this thread, the one from the GSAP collection and the one by @PointC: Hopefully this helps. Happy Tweening!

Hey Nuno! Thanks for reporting back and sharing your work, looks really amazing! 🥳 I really liked the effect in the second image, great job!! 👏👏 Happy Tweening!

Here's a great article from @PointC: https://www.motiontricks.com/svg-dashed-line-animation/ And yes, absolutely, GSAP's DrawSVGPlugin is great for that kind of thing. You'll need a Club GSAP membership. https://gsap.com/pricing

If I'm understanding you correctly, you actually want to create an entirely different path that is visually in the "middle" of the outlines, right? That's definitely not something DrawSVGPlugin can do for you. You'll need to create the SVG path in the proper way. Asset creation is the key here, as @PointC shows in his articles. Once you have the path, DrawSVGPlugin will easily animate it. ✅

Hi, You might want to have a look at this thread, especially the posts by @mvaneijgen and @PointC: Happy Tweening!

Hi @Antibreez and welcome to the GSAP Forums! In this particular case is better to not tie the animation to ScrollTrigger and have it running on an endless loop, then use ScrollTrigger to play with the animation's timeScale property, like this: https://codepen.io/GreenSock/pen/NWmRMpy Finally I'd suggest this approach by @PointC, is far simpler and easier to maintain IMHO: Hopefully this helps. Happy Tweening!

Hi, I've never been in that situation so I couldn't really tell you, but if you ask me my first approach would be to use the Observer Plugin and animate the SVG ViewBox property. In this tutorial @PointC explains how to do that: https://www.motiontricks.com/basic-svg-viewbox-animation/ Also @Carl has a great video on the subject: Another option would be to use Draggable as well as the ViewBox animation, but that would mean a lot more logic too. Happy Tweening!

Hi, @PointC has you covered: https://codepen.io/PointC/pen/YRzRyM That should provide a solid starting point. Happy Tweening!

Hi skipper! Don't think about duration as time. Think about it in percentages. gsap.timeline({ scrollTrigger: {} }) .to(foo, { duration: 100 }) .to(bar, { duration: 40 }, 10); Can you tell what's going to happen. The foo animation is going to be played for entire scroll distance. The bar animation is going to start 10% of the way in.