tomw_uk

Of course! Thank you. Couldn’t see the wood through the trees there.

Hi there, I'm trying to trigger some additional javascript within the `onComplete` callback on stagger within ScrollTrigger.batch(). I found this thread but `this` is undefined when I put it inside a batch call like so: ScrollTrigger.batch('.show', { onEnter: (elements, triggers) => { gsap.to(elements, { y: 0, opacity: 1, duration: 1, stagger: { each: 0.3, onComplete: () => { console.log(this) } } }) }, }) Is there any way I can I can access the element when its animation has finished? Thanks in advance, Tom.

That’s super helpful thank you @akapowl! And thanks for the tip on the delay / safe refresh. I’m sure you’ve saved me hours of banging my head on the table!

Hi there, I'm using ScrollTrigger to show and hide a navbar based on the position of the page scroll, but I've noticed that if I change the length of the DOM, ScrollTrigger's progress does not update. Hopefully it's clear in this example. If you scroll up and down, you'll see the progress is reported accurately at the top of the page. If you then click "Show Box 2" and continue to scroll up and down, you'll get to 100% before reaching the end of the page. Is the solution here to call .refresh() when doing anything like this, or is there a better solution? Thanks in advance, Tom.

Thanks @GreenSock. Working like a charm. Have a good evening.

That seems to have done the trick. Thanks for everyone's help, and @GreenSock for fixing it on a Sunday. Any idea when that release might be? Or are you able to share the patch you put in place? Thanks again all, Tom

Hi all, I'm using the DrawSVG plugin with ScrollTrigger to animate a path on scroll. When I use a path with vector-effect="non-scaling-stroke" applied, I get this error in my browser's console. TypeError: undefined is not an object (evaluating 't._offsetPT.s'). Note, you won't see it in CodePen's console. I've seen some other posts about issues with non proportionally scaled SVG, but I see this error even in my simple non-scaled example. Any thoughts or pointers, greatly appreciated. Many thanks, Tom.

Thanks Zach, that's a great article! Each section is intended to have unique animations inside, and the dot animation will differ for each section too which is why I didn't go down the loop route. I like your suggestion in the article of making functions though, so maybe I can do something in a loop with those to clean up the code Thanks again, Tom.

Hi all, Really enjoying GSAP and ScrollTrigger so far. They've really help bring my current project to life! I'm trying to create a circle reveal effect with ScrollTrigger. I've linked my attempt so far. I'm kinda there, but kinda not and was wondering if there was a better way? My main problem is that I want each panel to have its own ScrollTrigger timeline inside (before the circle scale triggers). It feels like this would be "nicer" than one (potentially) super long timeline with three panels worth of animation. Is that possible, and if so, could you please point me in the right direction? Each timeline would be length based (end: +=4000 for example). I've taken a couple of shortcuts to keep the example short: - To dot wouldn't be visible from the beginning - I'd calculate the proper figure to scale it to Thanks so much in advance, Tom.