kabocreative

Jack and Cassie thank you! Cassie - really good points especially on drawing out the processes. I started that way and made great progress, then I seemed to get a bit lost... Taking that step back would have been sensible! I'll try to remember this next time I'm falling down a rabbit hole. Jack - this bit is EXACTLY what I wanted to do but had zero idea how to get there: let t1 = gsap .timeline({ delay: 0.8, scrollTrigger: { trigger: ".container", start: "top 75%", end: "bottom 75%", toggleActions: "play pause restart pause", markers: true, onToggle: (self) => { if(!self.isActive && typeof wanderTween !== "undefined") { wanderTween.pause() } } }, onComplete: () => wander(animationContainer.querySelector(".circle")) }) I completely missed onToggle when searching through the docs for answers. In honesty even if I'd found it I wouldn't have been able to write something as neat and succinct as you have to get it all together, but now I understand how you've solved it I'm sure this will help me next time I hit a challenge like this. Big thanks again. The final animation is now on the staging site working perfectly. And I'm working on much simpler animations elsewhere while I learn the ropes. This one was a doozy

Hi Jack, Again massive thanks. That does help a lot. 90% of it makes sense, and the remaining 10% shows that I've still got some learning to do! I've almost got it working perfectly now... in your codepen above it works beautifully until you scroll down and back up again. At that point the ScrollTrigger does exactly what it should pauses, restarts and plays the timeline again, but the Wander function keeps running as it isn't part of the timeline. I want the onComplete to respect the ScrollTrigger rules - i.e. play pause restart pause I've tried for example: scrollTrigger: { trigger: ".container", markers: true, start: "top 75%", end: "bottom 25%", toggleActions: "play pause restart pause", onLeave: () => wander.pause() }, onComplete: () => wander(animationContainer.querySelector(".circle")) The idea was to pause Wander within ScrollTrigger, but no joys. I've been looking at eventCallback, i.e. "onComplete", "onUpdate", "onStart", "onReverseComplete" but there's no 'on leave' style option here to pause that animation. I also looked at wander.kill but again I don't have an option for 'on leave' to use it. Is there a way to make wander be part of the t1 timeline so it can respect the toggle actions?

Hi again! Finally had time to return to this. Jack - big thanks for your help, I much prefer the idea you've presented. I'm having two issues with implementation which no amount of googling, docs and forum searching has resolved. Issue #1 https://codepen.io/kabocreative/pen/jOzpxaG I can't work out how to make the new function play at the end of the timeline. With the loop I added it at the end of the timeline, but this function seems to play immediately regardless of where I place it. Issue #2 https://codepen.io/kabocreative/pen/poLZVWd When I add the function in place of the loop in the full project I'm having this odd effect causing it to look very 'jumpy' or abrupt in direction change. This doesn't apply in my simplified codepen above (which is much smoother in direction change), so it seems to be related either to having the second timeline or having the mouseenter function, but I can't identify what it is causing it. Again thanks so much for your help!!

Thanks! I'll worry less about over-posting

Big thanks Steve & Jack - this is really helpful and gives me some new directions to look at. Client work is demanding I focus elsewhere early this week, but when I pick this back up I'll hop in to let you know how it turned out

Yep Creative Coding Club. It is such a brilliant resource for GSAP and at a really affordable lifetime license price. So worthwhile! I've been really impressed with how supportive the community is here in the forums and generally with tutorials and support. Really happy I've stumbled across it. Thanks so much for your help!

Hello! I'm using match media to change the x value in two tweens in the t1 timeline based on screen width, from: x: "random(-100, 100)" to x: "random(-300, 300)" as commented in the codepen. The Problem: on screen resize the only way to load the correct x values is to reload the screen. I've seen posts on killing and restarting, but I've no idea how to do that in my case. Ideal fix: I loved the idea of changing x pixel values to: x: "random(window.innerWidth -40%, window.innerWidth 40%)" This would avoid repeating so much code in the media queries, but I could not make that work. Alternative fix: I looked at ScrollTrigger's match media as it would solve the resizing issue, but couldn't as one instance of the x value is in a loop. I feel my code is a big behemoth and there must be a neater way of changing the x value in those two places by media query than to repeat the whole thing again... or if that is the best way any hints on how to kill/restart the animation on screen resize is greatly appreciated! I've hit up the forums 3 times in 3 days, noted that's quite cheeky. Promised last post on this animation which is pretty much complete then I'm moving on to MUCH simpler ones while I pick up the ropes.

Thanks for taking the time to explain how I caused a logic issue and the way to resolve it! I'm pretty sure this doesn't count so much as a GSAP issue, but more a general logic issue.. so also thanks for offering support outside of the bounds of this forum. I'd sunk a couple of days into this and was getting nowhere fast. One month ago I'd never touched GSAP. Now with the help of a course I've got this going. Pretty impressive how easy it is to pick up, and I'm sure if I also work on improving my general JS skills the sky is the limit

Oh! What a simple and silly error, and to be honest a relief it is such an easy fix. Ha! Love that my first forum question was 'why doesn't this work?'... 'errr.. you're loading the wrong thing' Thanks so much!

I think you mean you'd like it to start off screen? If yes: https://codepen.io/kabocreative/pen/poLPBra I added: gsap.set(".typography-headline-hero", { xPercent: 100, }); I'm a newbie to GSAP, so others might have greater ideas!

Hi there, I've got Scroll Trigger working on a timeline with toggle actions: play pause restart pause As expected when scrolling back up after leaving the viewport the timeline restarts. Problem: on restart the second .to tween jumps by the x value rather than the smooth to. animation as per the first load before Scroll Trigger gets involved (I've commented in codepen to show where this issue occurs) Most Common ScrollTrigger Mistakes docs shows exactly this under 'Creating to() logic issues', but in that example it is if you applied Scroll Trigger to both tweens and the solution is to apply it to the timeline instead. I'm already applying it to the timeline but getting the same error. Big thanks to anyone who might see what I'm doing wrong here!

Apologies for not being clear enough! The second tween in t1 timeline uses custom ease to cause an agressive shake motion, which works in the codepen but not on the WordPress site. Custom ease is not used in the other tweens. On codepen the circles scale in, shake for 2.5 seconds, then start moving around. On WordPress the circles scale in, sit still for 2.5 seconds, then start moving around.

Hi, first time poster here pretty new to GSAP (and taking Carl's creative coding club course). I've got a GSAP animation working beautifully in codepen, which includes Custom Ease for one tween. Loaded into WordPress the remainder of the animation works, just not the Custom Ease. I can see scripts are loading in the correct order: I've scoured the forums (amaaaazing forums btw - it's solved many of my problems before I ended up posting here) but no joy. Dev site: https://kabonewwebsite.kinsta.cloud/ Greatly appreciate any insights from the geniuses in the know