Johan ⚡️ Nerdmanship

Thought I would share the final result based on my initial goal: http://codepen.io/stromqvist/pen/yJLxjJ Credit where credit is due in the description. Thanks GSAP, Carl and Dipscom – I learned lots in this exploration! I want to learn how to write smart, consise and readable code – so any critique is appreciated!

Hehe, I'm gonna get two sock-puppets to help me with the logics. Thanks!

That worked really well! This is how I applied it: http://codepen.io/stromqvist/pen/vGoQar?editors=0010 But of course, new questions arise... I couldn't figure out how to use yoyo() in this approach, so I tried a workaround inspired by other examples I've seen. It works well, but I have a few questions. Could I use the yoyo method with this approach? If so, how? I've seen similar solutions with onComplete and onReverseComplete, but mine doesn't look the same. I tried finding these methods in the docs, but failed. Is there a more straight forward way of using onComplete to reverse the timeline without declaring a function such as "reverseTl"? var tl = new TimelineMax({onComplete:reverseTl, onReverseComplete: shouldRepeat}), isPlaying = true; tl.to("rect", 1, {x: 100}); // When the button is clicked, the timeline should toggle repeat $("button").click(function(){ // when the button is clicked if (isPlaying==true){ // if the timeline is playing isPlaying = false; // set it to off } else { // if it's not playing isPlaying = true; // set it to on tl.resume(tl.progress()); // and keep playing from where the playhead currently is, just in case the user clicks the button twice } }); function shouldRepeat() { if(isPlaying==true) { tl.play(0); } else { return; } } function reverseTl() { tl.reverse(); } edit: updated the pen

Oh wow, that's embarrassing... I actually read that post not long ago. Thank you for a great reply, Pedro! It think it will solve my problem. I'll try it out and then hopefully mark this one solved.

Thanks for taking the time, Carl! Sorry for being unclear! I'll try to isolate my problems in the future. I like and understand your suggested approach, but I don't think it solves my problem. I need a timeline to finish before it stops. Here's a very simplified one: http://codepen.io/stromqvist/pen/VaorOG?editors=0011 When I click the button, I want the timeline to stop repeating. However, I want it to finish, not snap back to first position. var tl = new TimelineMax({repeat:-1, yoyo:true}); tl.to("rect", 1, {x: 100}); // When the button is clicked, the timeline should stop repeating $("button").click(function(){ tl.repeat(1); }); This would make sense to me, and works if the button is clicked during the first repetition. But if the button is clicked after the first repetition, the timeline just snaps back.

Thank you so much for the advice, Blake! I woke up to a notification that Chris Coyier picked Bob for the frontpage of codepen – amazing! Having followed Chris for years, just being a fanboy and not even working with front end dev, that's really boosting the confidence to keep working with SVG and GSAP! And Craig, your stuff is amazing! Thanks for the support and the likes! And thank you for enabling me to explore this stuff, Greensock! Carl, Jack and others I may not know! (Sorry for the complete off-topic)

Thanks a million for your reply! And also thanks for the advice and compliments on Bob the crab! Those are some great demos you shared! The examples of caching SVG as images really display some significant difference. I will definitely use that!

While learning GSAP and Js, I'm experimenting with this Crab character – Bob. He can do a bunch of different poses which are specified in different timelines, in separate projects. My end goal is to have one dynamic composition with a bunch of ways to interact with Bob; move him, scare him, flatter him, etc, but I'm having some trouble with the logics beyond making a fun timeline. My Js experience is limited so please bare with me. I've created this simplified pen, without Bob, to explain my challenge: http://codepen.io/stromqvist/pen/YqMJEe?editors=0011 Basically, what I'm trying to solve is this: If a user clicks "left", Bob can walk left – no problem. But if Bob is walking left and the user clicks right, then Bob must first quit walking left and seamlessly transition to a new pose before he starts walking right. My animations are quite granular so I want full control over such transition animations too. So I need to write a little script. My approach to the problem: All poses are animations that should start and finish in the set start values There are three poses in the example: idle, move left and move right Each pose have three parts; "entry", "loop" and "exit" "Entry" animates the character from start values into the "loop" "Loop" is the main animation, i.e. "continuously walk left" "Exit" animates the character form the "loop" back to start values The "loop" is set to infinite repeat, which intentionally hinder the timeline to reach the "exit" To seamlessly transition from one pose to another, the current pose must end before the next pose begins To end the current pose I want to remove "repeat: -1" and allow the timeline to finish and the use a callback to start the next After "repeat: -1" been removed I need to add it again, to make a pose reusable This code doesn't work, but I included it to show you what I'm trying to achieve and how: // CLICK-A-BUTTON LOGICS $("button").click(function(){ // these values are strings, but I need to reference the objects nextPose = "tlPose" + this.dataset.tl; nextLoop = "tlLoop" + this.dataset.tl; // disable looping to reach "exit" label of currentPose TweenMax.set(currentLoop, {repeat:1}); // and re-enable it so it's looping next time it's used TweenMax.set(currentLoop, {repeat:-1}); // when currentPose is complete, update the current pose and play it currentPose.onComplete(function(){ currentPose = nextPose; currentPose.seek("entry").play(); }); }); Is the approach to this problem ok or should I try something else? When I'm defining newPose and newLoop, how can I make those values to be tlPose1 and not a string like so, "tlPose1"? How do I change the repeat value of a timeline? I'm very open to other suggestions and feedback! Thank you so much for helping me and Bob move forward! -- I struggled so with setting a descriptive topic to this post! Any conventions?

I love the effort, but I'm not sure what you're saying. If you have something that "kind of works", I'm very interested to take part. Pls share!

Hello invaluable mods and heroes! In any little project or exploration I do, I try to learn something about performance. Sometimes I need to scrap an interesting technique simply because I can't use it with an ok frame rate. Such as this one: http://codepen.io/stromqvist/pen/grNJwR Here's another one with an ok frame rate: http://codepen.io/stromqvist/pen/bpPyNY In this case specifically – It made me thinking... Somewhere in between those two explorations, my computer starts to breathe heavily. There's probably some very demanding computations going on. Obviously, that's something that I wish to avoid. I'm not too strong on the javascript side, but something tells me there ought to be a way to do this computation once and then just repeat it, since the animation loops identically every time. Is something like this doable? In general – I don't know much about the heavy load on the CPU (and possibly GPU) that different GSAP animations can invoke. Don't know much about memory leaks, caching and similar computer science stuff, but I do come across it in some articles I read, and as a Js novice, I figure I'm making all the typical mistakes in the book. I'd love any thoughts and advice relating to GSAP and performance! Any reading tips and most of all any codepen examples on how to apply GSAP in smart ways! I understand that my question is broad. I would narrow it down if I knew how. Please share any thought that comes to mind. I just wanna move a little bit forward from here. Thanks for reading and taking your time! Peace, love & GSAP!

Thanks for your input guys! @OSUblake If you ever finish it – here's a guy who'd praise you! @Jonathan Thanks, that's really a great resource for beginners, but it only takes you so far. @Carl I appreciate that you have a juicy backlog and higher priorities! Hope to see some offline resources in the future tho. It's my understanding that many modern developers have an internet independent workflow, which would make an offline GSAP resource super valuable! Thanks again, much love!

Hello GSAP forum! I'm a new shockingly green recruit and super excited to be here and get started with this. I work remotely and travel a lot which means that I'm highly dependant on an offline workflow (thank you Sublime, Codekit, MAMP, Git & Dash). So I'm looking for offline resources to learn and troubleshoot GSAP. I'd be super-grateful for any advice! My own contribution: Youtube app for iOS allows you to save videos for offline viewing. (thank you ihatetomatoes, Chris Gannon + more ) Request: To the lovely GSAP team I would like to suggest to create a docset for Dash so that every offline working enthusiast (like me) can access your brilliant documentation. It should return lots of value for little value invested. <3 Thank you!