Leaderboard

When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style. element.style { transform-origin: 0px 0px 0px; } The transform origin on your .au site looks like this. element.style { transform-origin: 0px center 0px; } If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.

It's hard to advise without a demo, but you should use callbacks e.g. onComplete. There should be no reason to ever poll an animation to see if it's complete.

Hi @nolimit966, There may be other possibilities. If I understand your option correctly, here a variant using 'progress (1)': As always, a simple CodePen that outlines the problem or the option you want would be great. Kind regards Mikel

Just a note of thanks to the GSAP community for helping me build this, it was a joy to work with GSAP in Angular 6, and couldn't have done it without you. http://dankemper.net

Thanks!!! I had to import the UMD version. It is working now.

If you still need a unique timeline for each slide, here's a fork of the example I posted earlier in the thread. You can see that I created an array of timelines and manually created one for each article. That is then added on to the end of the animation timeline created each time you click a tab. I also modified the tab indicator a bit to make it into a popper instead of a bubble slider. This one gets a bit bigger so it will look best on CodePen in full page mode. https://codepen.io/PointC/pen/VEaYjb Hopefully that gives you some ideas. Happy tweening.

Hi @Faaiz, For fun of the joy ... And if it should be called by buttons: Happy tweening ... Mikel

I notice two problems: 1) You've specifically coded it not to work when the field is empty: if (x != null && x.length > 0 && x.length <= 9) { So you should get rid of that condition or rework it somehow (I'm not sure exactly what you're trying to do). 2) oninput seems to fire before the new value is registered in the input, so maybe try changing it to: onkeydown="setTimeout(inputVal, 1)" We really try to keep these forums focused on GSAP-specific problems. General questions like this are probably better suited to a place like Stack Overflow. Happy tweening!

Hi @neeh Welcome to the forum. If you'd like to infinitely repeat a timeline, but have a pause between repeats, you just need to add a repeatDelay. Like this: var tl = new TimelineMax({ repeat: -1, repeatDelay: 1 }) Hopefully that helps. Happy tweening.

Hi jvolvovski Welcome to the GreenSock forum. If I understand your desired outcome correctly, you'd want to create the timeline outside of your onComplete function. (no need to create it each time you hit the trigger) You can put it into a paused state and then play() it when you hit the panel 2 trigger each time. Like this: var secondPanel = new TimelineMax({paused:true}); secondPanel.to("section.panel.two p", 2, {scale:2, ease:Power3.easeOut}); secondPanel.to("section.panel.two p", 2, {color:"#fff", ease:Power3.easeOut}); function myFunction() { secondPanel.play(0); } Keep in mind that it will jump back to the beginning each time you hit the trigger and call the onComplete function. You could check if it isActive() and prevent it from starting over multiple times with rapid scrolling, but this should get you close to your goal. If you want to reset it when you scroll all the way to the top, you'd have to add some custom logic and seek() back to the beginning or something along those lines. Hopefully that helps. Happy tweening.