Leaderboard

Happy to help. I added a mouseenter event for the hover. It also checks to see if the timeline isActive() so you don't interrupt the animation with rapid hovers. If you're not familiar with the isActive() method, here's some more info: https://greensock.com/docs/TimelineMax/isActive() Happy tweening.

Do you mean it just draws itself off to 0% and then starts again from the same end? Like this? Does that help? Happy tweeing.

Thanks, this was helpful. I ended up starting my own CodePen question before I found Carl's answer so I'm posting this here in case anyone else needs another reference in future:

I would think a CDN is the way to go for popular libraries like GSAP. I'd say pretty much the same thing Blake said in your other thread: Happy tweening.

Hi @roogud Welcome to the forum. I think you may have to rework your path. I forked your pen and changed the stroke to 1px. Watch the animation and use the scrubber. See how the path animates the shape, but then goes over itself again? It looks like there are two identical paths mashed into one. I'm not 100% sure what you're going for here, but that's probably not going to produce the desired results. Hopefully that helps. Happy tweening.

Thanks for the demo. Sometimes its good just to test things like that. What you are doing is fine, but its probably worth pointing out that those conditions only run when then timeline is being built, not when it is running. In other words, if you restart the timeline, its not like those conditions will be re-evaluated and you'll get a different animation if the those elements got removed for some reason. If you need the timeline to behave differently each time it is run, I would suggest creating a function that you call that would re-create the timeline based on the conditions that exist at that time.

Now it's a different conversation. A long time ago, in this galaxy, not far away there was a similar topic about it. Tried finding it, but no luck at the moment. TLDR; Make a timeline that plays your animation but instead of having a repeat:-1, have a onComplete that checks if it should repeat or not. Set a variable that you toggle true or false when the user interacts. That way, the timeline will play the "cycle" until the end after the interaction but will not repeat. Pretty much what Carl has shown you.

I'm going to jump in with some more code cheating If you want to box to check every time it reaches the bottom you can put a tween that repeats once inside a timeline that repeats infinitely. Each time the timeline repeats check to see if it should stop. var shouldStop = false; var tl = new TimelineMax({repeat:-1, onRepeat:checkShouldStop}) tl.to('#div1', 1, {bottom: '200px', ease:Power2.easeOut, repeat: 1, yoyo: true}); function checkShouldStop() { if(shouldStop) { tl.pause(); }else { tl.resume(); } } $('#stop').on('click', function() { $("#div1").text("i will stop at the bottom") shouldStop = true; }); $('#resume').on('click', function() { $("#div1").text("") shouldStop = false; tl.resume(); }); http://codepen.io/GreenSock/pen/jrmgrW?editors=1010

SVG 1.1 does not support CSS z-index or the SVG z-index attribute. z-index only works on HTML DOM elements that have position absolute, relative, or fixed.. which use the CSS Box Model. With SVG you have to rely on the order the SVG child elements appear. The last SVG child element will always have a higher z-index. Your SVG child <path> element #checkE is the last element. And that element is covering up your #checkYellow <path> The z-index attribute will only be available in SVG 2.0. https://www.w3.org/TR/SVG2/render.html So you might have to either hide #checkE or remove and prepend the SVG #checkE <path> so it is before the #checkYellow child <path> to bring it back.

You can do it is just like PointC showed... var tl = new TimelineMax({ onComplete: myCallback, onCompleteParams: ["foo", "bar"], callbackScope: myScope // what 'this' will refer to }); function myCallback(a, { console.log("A: %s B: %s", a, ; // A: foo B: bar } Another option is to create a bound function... var tl = new TimelineMax({ onComplete: myCallback.bind(myScope, "foo", "bar") }); function myCallback(a, { console.log("A: %s B: %s", a, ; // A: foo B: bar } If you don't have a scope, just put null as the first argument.