Vector

I'm not sure I understand what you're saying? The click event is on .svg-container, and the element being animated is .mask, but only the one clicked on, which is defined by this: var $thisMask = $(e.currentTarget).find('.mask'); N.B. Forgot to mention... I know about the reveal progress trick (below), but I can't see a way of implementing it with my current set up. tlReveal.progress(1).progress(0);

I've spent quite a while on this trying different solutions, but not had any luck. Normally I'd place the timeline outside the click function and render it on page load, so that it doesn't suffer from that initial render lag. It's probably down to my lack of JS knowledge, but I'm really struggling to figure out how I can do this when I have more than one on the page (like in my example). The code isn't very well optimised/bug free at the moment, but it's fully functional (in Chrome), providing you don't scroll down the page. Any help would be greatly appreciated, thanks.

Wow. Never expected it to be so simple... Thanks for that!

Am I correct in thinking that pausing your animations until user input is bad practice (I'm sure I read it on here somewhere)? something to do with them not being cached before-hand? It does seem to stutter slightly when it runs for the first time. If this is the case, could anybody offer me some advice on how I would run the animation hidden in the background ASAP and before user input? Edit: Excuse the poor thread title. Suppose it should have read more along the lines of 'is pausing animations considered bad practice?'

Thanks for the in depth explanation and very quick response! Not sure how long it would have took me to get to that stage, but it all seems to functions exactly as I had hoped. Was never aware of the overwrite property, good to know it exists. Much appreciated, thanks again. Edit: After looking at your pen a few more times, I can see what you mean now. What I was trying to do was contradictory.

I'm relatively new to GSAP, so excuse my lack of knowledge here. I've have an animation that runs separate timelines depending on the hover state. It's works as intended on mouse in, but I'm having a bit of trouble with the mouse out animation, for the text. You'll see that it jumps to a set point within the timeline (I think) on mouse out. On mouse out, I want each line of text to slide out in its current state. I can't simply reverse the mouse in animation for the text, because this is staggered. It's been a bit of trial and error for a while now, some of the other versions looked better, but still had issues. Obviously I've looked through the docs on this website, to find a resolution, but I'm not sure what to look for. Maybe it's a slight functional change, or simply a method that I wasn't aware of. N.B. I've slowed down the mouse out animation, and extended the delay, just so you can see my problem more clearly. Edit: I've been working in Chrome, not done any browser testing yet.