Devotee007

Ah, ok, thank you! I will test that and see how it works. Edit: I tried to change the things you mentioned. It works! Thank you. I'm still new to the new syntax, mixed things up a bit.

I'm sorry, I think I haven't been clear enough. The thing that don't work is clicking the image to scale/zoom. Drag and rotate works as expected.

I get the same result using onClick instead of onPress. The image zooms in on Android, I guess it it because I have to, I think, use touchstart to make the zoom work on Android. It's odd, everything else on the site works with click on Android.

Here is a demo. It works on desktop and iPhones. The "click" works for drag and rotate on Android, but not zoom? And then I use touchstart instead it zooms on drag, and I don't want that. Haven't found a way around it. https://codepen.io/Devotee007/pen/ZEoJVqN

It seems the event listener click doesn't work here, but it does on other scripts I got. Like this one for example. const rotate = gsap.timeline({paused:true}) .to(".js-image-container", {rotate:"+=90", transformOrigin: "50% 50%", ease:Expo.easeInOut, duration:.5}, 0) .to(".js-btn-arrow", {rotate:90, transformOrigin: "50% 50%", ease:Expo.easeOut, duration:.1}, 0) .to(".js-btn-arrow", {rotate:0, transformOrigin: "50% 50%", ease:Back.easeOut, duration:.4}, .1); document.querySelectorAll('.js-btn').forEach(item => { item.addEventListener('click', event => { if(!rotate.isActive()){ rotate.invalidate().restart(); } }) })

Hi, I have this code below for zooming images on my site. It works as expected on iPhones, but know I noticed that it doesn't work at all on Android phone. I have missed something? Should I perhaps use another eventlistener? // ZOOM IMAGE const image = document.querySelectorAll(".js-image"); const zoomMin = 1; const zoomMax = 2.8; const zoomStep = "+=0.35"; image.forEach((img) => { img.addEventListener("click", () => { let zoomValue = gsap.getProperty(img, "scale"); if (zoomValue < zoomMax) { gsap.to(img, {duration:.5, scale:zoomStep, transformOrigin: "50% 50%", ease:Expo.easeOut}); } else { gsap.to(img, {duration:.4, scale:zoomMin, transformOrigin: "50% 50%", ease: "elastic.out(.7, .6)"}); //.8 } }); });

I would like to be able to pinch zoom, in and out and also maybe rotate images on mobile. But I have no clue where to start. Is this possible with draggable? Or should I look for something else?

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

Sahil, thanks a lot for this great answer! I will try this out on Flexbox. //Devotee007

Hi, I'm thinking about animating the border on a flexbox using :after and :before just as it's done in the Codepen and the example "Draw Meet". But before I try to do it, is it possible to animate :after and :before with Greensock? //Devotee007

Ok, I start a nre thread. Thanks.