Leaderboard

As a property of TimelineMax(); You can also "yoyo" the tween to get rid of a fromTo var tl= new TimelineMax({repeat:-1, yoyo: true});

It actually gets called whenever an animation's time updates. Some might think it'd be weird if the playhead moves but onUpdate doesn't fire (even if the ease dictates that the animated values don't change on every update). See what I mean? If you want to call that function as few times as possible, here's another approach: I just whipped together a function that you can reuse and feed in various config values to get the results you want. Does that help?

Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn

Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening

Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all

Have you tried recording the values with progress() before playing the timeline? tl.progress(1).progress(0) // prerecords the values and properties upfront tl.play(); Might be worth a try. Happy tweening.

Hi @Stagnax This should work for you. var tl= new TimelineMax({repeat:-1, yoyo:true}); tl.fromTo("#char", 1, { y: 100 }, { ease: Power0.easeNone, y: -100 }); Happy tweening.

Here's a small demo of how to start/stop animations on focus. The sphere on the right has a bit more advanced implementation.

Hi guys how about this : var scene = new TimelineLite(); scene.add("start", 0) .from("#red", 5, {opacity: 0},"start") .from("#green", 5, {y: "+=60px"},"start") .from("#blue", 5, {scale: "1.15"},"start") $("#kill").click(function() { var targets = scene.getChildren(); scene.kill(); for (var i=0; i<targets.length; i++) { console.log(targets[i].target.selector) // check the console TweenMax.set(targets[i].target.selector, {clearProps:"all"}); /* if you dont use jquery console.log(targets[i].target[0].id) TweenMax.set(targets[i].target[0], {clearProps:"all"}); */ }; }); http://codepen.io/MAW/pen/RNQwyE