mjwlist

@pointC, @Sahil, Thanks to you both. Ok so I've got the idea of a master timeline and triggering tidy functions from the excellent css tricks article. This is where I was at just before @pointC kindly did it for me again!..... // RED DOTS TO RIGHT function dotMove() { var dot = document.getElementsByClassName("animation-inner-dot"); var tl = new TimelineMax(); tl.staggerTo(dot, 3.5, {x: 422, repeat: -1, ease:Linear.easeNone}, 0.7); return tl; } // BLINKING RED DOTS function dotPulse() { var pulse = document.getElementsByClassName("animation-pulse-dot"); var tl = new TimelineMax(); tl .staggerTo(pulse, 3.5, {opacity:0, repeat: -1, scale: 4, delay: 1.95, ease:Power4.easeOut }, 0.7); return tl; } var master = new TimelineMax(); master.add( dotMove().timeScale(0.5) ); master.add ( dotPulse().timeScale(0.5), 0 ); Now from looking at @pointC's pen I could theoretically speed up or slow down an entire animation sequence with something like the following...Basically adjusting the timescale in one place on the master. var master = new TimelineMax().timeScale(0.5); master.add( dotMove ); master.add ( dotPulse(), 0 ); master.add ( somethingElse(), 0 ); master.add ( anotherThing(), 0 ); I think I'm starting to picture how things might fit together in nested timelines as complexity builds. One thing I'm not sure of is in this code from @pointC.... In the "animation-pulse-dot" tween at the end there is the 0.7 stagger delay but what is the 1.95 value doing? console.clear(); var tl = new TimelineMax().timeScale(0.5); tl.staggerTo(".animation-inner-dot", 3.5, {x: 422, repeat:-1, ease:Linear.easeNone}, 0.7) tl.staggerTo(".animation-pulse-dot", 3.5, {opacity:0, scale: 4, repeat:-1, ease:Power4.easeOut }, 0.7, 1.95); And just one last question about the forum in general. What is considered best to do with example pens. How long should they be left in the post so others can see the example relating to the initial question. Really I'm asking at what point is it reasonable to delete example pens form my codepen or should they be left accessible indefinitely. EDIT: I realise what the 1.95 value is. Alternative place to put the start delay.... Many thanks again Mark

Hi @pointC, thanks for for the reply. The question is how to adjust the timings so I can speed up the horizontal dots but still pulse at the line. As as you can see I have it working as is but it’s very delicate. If I adjust the timing of the horizontal dots they fall out of sync with themselves and no longer track the line evenly spaced. The pulse is probably easier to adjust the timing without causing a problem. Its really advice on a more logical way of doing this to have some level of control of the speed and coordination of elements. Please let let me know if I’m still not making myself clear. Thanks again Mark

Hi, I am looking for advice on a logical way to make animation timings adjustable. In the attached pen I have a simple animation working more or less how I need it to. Some dots move sequentially along a line and pulse in turn once they hit a certain marked point. The pen makes it obvious. Ultimately I'll need to add a finger pushing a button in time with the dot pulse. So I have the animation kind of working but it's just by the skin of my teeth. If I adjust a parameter for example the length of the sequence or the staggerTo delay I throw everything out of sync. I am hoping for some help with how I would make this work i such a way that I can speed up and slow down the rate of of the pulse whilst keeping everything in sync. I think conceptually this could help with many other things in the future. Many Thanks Mark

Hi @PointC, Thanks so much for basically doing it for me. I can't say I expected that! Massive relief though....:o) I'll certainly be taking a look a the recommended thread. Also looking at your pen I see I was quite far away from a decent solution and really approaching the task in the wrong way. Right now I need to work that into a project quickly but I'll be back to ask a couple of questions if I'm not sure how or why you've done something. Hope that's ok... I expect I'll be asking a fair few questions around here as a new job will be requiring me to get to grips with GASP pretty quick as animating UI's seems to be a bit of a thing.... looks like it's going to be interesting though. Many thanks again Regards Mark

So now several hours later I'm still banging my head on the desk! I have forked and adjusted the above pen. My thinking is if I can change the class or preferably the id of the card variables in an onComplete function if I keep clicking card 3 (in this example) the cards should rotate every time. My issue is getting the animation to fire on subsequent clicks after the first. I have tried invalidate() and restart() but just can't find a way to work it. Again any thoughts would be greatly appreciated. Thanks Mark

Hi, I'm looking for some advice on a rotating cards animation. I have three cards next to each other, the center one enlarged. I need animate either the the left or right card to the center on click animating the others in a rotating fashion. I have the essence of the animation more or less agreeable but I'm looking for advice on how to make the animation persist on every click of the left or right card. The included pen should make it fairly obvious what I'm attempting to achieve. This is my first attempt with Greensock so any advice would be gratefully received. https://codepen.io/mjwlist/pen/rrxjre Many thanks Mark