NickNo

Perfect thanks Jack, thanks for the quick & clear response. In my actual project, the pinning jumps even at fairly slow scroll speed (unlike the codepen demo where it is a solid pin). Any idea why this would be happening? Screen Recording 2023-05-01 at 9.13.59 AM.mov

Hi, I have this filter element that I want to pin in the navbar once I scroll to it - but can't figure out how to get it to stick - do I use ScrollTrigger pin, or do I have to fix it in css? I want it to shrink to size as I scroll up to the navbar and then sit inside the orange box...

Thanks everyone for the comments, and Happy New Year! @Rodrigo yes I've subscribed to Carl's courses ?

Hi, I'm looking for some help on structuring gsap code for zooming in and out of a SVG (by animating viewbox). I've mocked up the behaviour I want, but I'm sure there is a much better way - using timelines? functions? In the example, if you click on one of the circles, it zooms in, then click again (or on background) to zoom back out. If you click between B&D a bit you'll notice some weirdness... Ideally what I want is click to zoom in, click to zoom out - if you click on another circle it zooms out from where you are before zooming into the new circle... I hope that's clear and appreciate any tips!

This is what I ended up with - if there is a tidier/better way to do it, please let me know https://codepen.io/nickjacobsnz/pen/eYMEjWp

Now that you point it out that makes complete sense Although, not completely sure how I would create dynamic timelines?

Hi, I have some legend keys that animate in with a switch toggle - when I toggle them off, I want the legend to animate back out (reverse()) - but the way I have setup it up, it isn't working - can someone shed some light on why? Also, I'm creating the timeline on each toggle of the checkbox, which I realise isn't very efficient. Is there a better way to set it up, keeping in mind the #legendid will be dynamic (on some pages there will be 2 legends, 3 on others and they will all have different #ids)?

Hi, I'm trying to create a combined animation with scrub, with adding a class via toggleClass - at the moment the class only gets applied until the animation/trigger end - how would I keep the class applied until I reverse back up to the top?

Great stuff, thanks!

I've got this animation running where I want the red line to animate to 100% width once the second line of SplitText has animated in... I've tried setting an active class using a callback - but can't figure out how to get it to fire just on the second line - as I've got it, it fires every time....any help appreciated

Perfect!

Actually, one question on this - how would I restrict the draggable movement to its parent? If I use bounds:'.timeline-year' that restricts all items to the very first timeline-year box...I thought something like 'bounds: this.target.parentNode' but that doesn't work...

Yes, thats perfect thanks

Hi, I have multiple draggables, and just wondering how to stop movement on one when another is in play. In the example - the pink timeline should drag everything on it (the dots) - but if dragging a dot, the pink timeline shouldn't move... Thanks for any advice

haha, thanks Jack, that looks like it's worked.... Just after I posted it I thought "maybe I'll remove the will-change and see what happens..." then got distracted