Devotee007

I'm sorry, I meant that I didn't understand why I had to use tween.invalidate().restart() and not only play(). Your solution worked great. I have read more about it at the page you linked to now too. Now I get it. Thank you.

Thanks for the reply, this works, but I don't know why. I will go read more on the link.

Thank you for the reply. It works, but I don't want to start from the beginning, I want it to keep rotating on the next button click. I thought += did that.

Hi, I try to rotate an image 90 deg at a time. During the tween it shouldn't be possible to click button to add another 90 deg. I have done the below code, but it only plays once. I have tried play(), resume(), restart(). const rotateImg = document.querySelector('.js-btn-rotate'); let tween = gsap.to(".mt-1", {rotate:"+=90", duration:.5, paused:true}); rotateImg.addEventListener('click', function(event) { if(!tween.isActive()){ tween.play(); } });

Thanks for your help @CassieIt worked out great! I ended up with this code, works great. gsap.set(".js-tooltip", {display:"none", autoAlpha: 0}); gsap.utils.toArray(".js-tooltip-wrapper").forEach(toolWrapper => { let tip = toolWrapper.querySelector(".js-tooltip"), tl = gsap.timeline({reversed: true, paused:true}) .set(tip, {display:"flex", y:5}) .to(tip, {autoAlpha:1, y:0, duration: .2, ease:Expo.easeInOut}) toolWrapper.addEventListener('click', function () { tl.reversed() ? tl.play() : tl.reverse(); }) });

hey @Cassie, Thanks for the link, I will check it out and see if I can get it to work.

Hi, I'm trying to make a tooltip toggle just toggle then one I click on. But I can't get it to work. I don't get the child to a var in the timeline. This is as fas as I have gotten. Any tips on how get the variable to the timeline? const tl = gsap.timeline({reversed: true, paused:true}) .set(".HERE-I-WANT-THIS-CHILD-NAME", {display:"flex", y:5}) .to(".HERE-I-WANT-THIS-CHILD-NAME", {autoAlpha:1, y:0, duration: .3, ease:Expo.easeInOut}) function toggleTooltip(childTarget) { const thisChild = childTarget; tl.reversed() ? tl.play() : tl.reverse(); } const tooltip = document.querySelectorAll('.js-tooltip-wrapper'); for (let i = 0; i < tooltip.length; i++) { tooltip[i].addEventListener('click', function(e) { const parent = e.currentTarget.parentNode; const childTarget = parent.querySelector('.js-tooltip').classList[7]; toggleTooltip(childTarget); }); } //Devotee007

I will try and get a demo together. It's one animation that is affected the other ones seems to be the same efter the restart. The one that is affected seem to be sped up and not as smooth as in the first run. I will come back with a demo. //Devotee007

I have gone over to GSAP 3, but these are some old banners I've done before and I don't want to re-do them. They are to be shown in a portfolio gallery. Can't put them up here because the client haven't given me approval to show them outside of campaign yet. //Devotee007

Hi! I have done some banners that I want to be able to restart from a button click. I use tl.restart(true, false) to restart the banner. But when I do some of the animations feels sped up and a slightly out of sync. I have a delay on the timeline before it starts playing, var tl = new TimelineMax({delay:.3, paused:true});, can that be the problem? Or am I using restart wrong? What's the best way to restart a timeline? //Devotee007

This might be off topic, but I'm trying to draw lines with DrawSVG. It works, the circle is drawn, but it's not drawn with one stroke, it's drawn with the outerlines of the stroke not just one line as I want. Have I exported the SVG from AI wrong or can I have done something else wrong? Is it the way it's drawn in AI, I haven't drawn it myself. It's not my department...

Thank you, it make sense, very well explained.

Thank you for the help and the heads up on the old CDN! I have tried it now and it works great! I have one question, what does overwrite:true do?

Hi, I'm trying to do a spritesheet that moves to a certain point on clicking different points of interests. I have succeded in doing a steppedease that gooes forward and backwords when clicking on two points. But I have three points A, B and C and I want to play the spritesheet correct if you are for example on C and clicks A it should go there, and if I click B from A it should go there. Is this possible to do in one Timeline? Below is the code I have: <!DOCTYPE html> <html> <head> <title></title> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <style> #back { position: absolute; left: 0px; top: 0px; width: 50%; height: 100%; cursor: pointer; background-color: #ccc; opacity: .5; z-index: 1; display: flex; justify-content: center; } #forward { position: absolute; right: 0px; top: 0px; width: 50%; height: 100%; cursor: pointer; background-color: #eee; opacity: .5; z-index: 1; display: flex; justify-content: center; } #timeline { position: absolute; top:0px; left:0px; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: flex; justify-content: center; align-items: center; } #object { top:0px; left: 0px; width: 652px; height: 652px; background:url(sprite-30fps.png); background-repeat: no-repeat; } </style> </head> <body> <div id="back">BACK</div> <div id="forward">FORWARD</div> <div id="timeline"> <div id="object"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> var tl = new TimelineLite({paused:true}); tl.to("#object", 1, {backgroundPosition: "50% 0", ease:SteppedEase.config(14)}) .addPause() tl.to("#object", 1, {backgroundPosition: "100% 0", ease:SteppedEase.config(14)}) $('#forward').on('click', function(event) { event.preventDefault(); tl.play(); }); $('#back').on('click', function(event) { event.preventDefault(); tl.reverse(); }); </script> </body> </html> //Devotee007

HI, I have tried to do this on a flex-box now, and I almost got it. But, the CSS-transistion doesn't happen on the box, instead it fills in the "box" of the browser window? //Devotee007