usr1931990

Thank you! I didn't know about the option to clear the timeline

const marquee = { $track: $("[data-places-track]"), tl: gsap.timeline({ repeat: -1, yoyo: true, paused: true }), init: (app) => { marquee.initAnimation(app); }, initAnimation: (app) => { const $trackWidth = marquee.$track.outerWidth(); marquee.tl.to(marquee.$track, { x: -($trackWidth - app.windowWidth), duration: 185, force3D: true, ease: "linear", }); marquee.tl.play(); }, killAnimation: (app) => { marquee.tl.kill(); marquee.initAnimation(app); }, }; I have a timeline I'm trying to kill and reinit on resize. Because I need the updated width of the container I'm animating on the x-axis. Percentages doesn't work here. The killAnimation() function is being run on window.resize. The animation stops but it wont start again when I'm running initAnimation() again after the kill. What am I doing wrong here?

@Cassie hi! So that doesnt work, if i console.log paths i only get one scrolltrigger. See example here: https://codepen.io/helleholmsen/pen/jOGEdEB

Hi everyone! I'm working on a page where a want an animation to happen when the user navigates to a certain page on my website, but kill it on other pages. I'm running this code when the user navigates to the site where I want the animation to happen: logoAnimation: (app) => { app.logo.hasBeenAnimated = true; const paths = document.querySelectorAll("#logo .path"); paths.forEach((path, i) => { const index = i / (paths.length - 1); gsap.to(path, { scrollTrigger: { id: "logoPaths", trigger: "body", scrub: 7, start: `${index * 10}% top`, end: `${index * 60 + 60}% bottom`, }, rotate: gsap.utils.random(-25, 25), opacity: 7, ease: "circ.out", }); }); }, and this code when a user navigates to another page: if (app.logo.hasBeenAnimated) { let pathsTrigger = ScrollTrigger.getById("logoPaths"); pathsTrigger.kill(); } }, And that's not working. The only thing that works is to kill all ScrollTrigger animations, but I just want to destroy this one. How can I do that?

Hi everyone! So I'm working with batch in my scrolltrigger animation, and it works fine, but i want the animation duration to be based on the scrub, NOT a normal duration, how can i do that? This is my code: gsap.set(processItems, { filter: "blur(20px)" }); ScrollTrigger.batch(processItems, { start: app.isDesktop ? "top 60%" : "top 80%", end: "bottom 10%", scrub: 1.5, onEnter: (batch) => { //the duration of the animation here should be based on the scroll scrub gsap.to(batch, { filter: "blur(0px)" }); }, });

Cool, but a little more specific: is the duration of the tween for the image 0 and the scale property is just the distance from the mouse?

I want the same effect achieved here: https://www.davidwilliambaum.com/?fbclid=IwAR1LL0ufo4y4rVcFJc9oNKZQuLc2MxuNgG6gLwCz7EGZZEh7ux2QBD6yZTs So the images scales up and down according to the mouse position. How can I do this with gsap? Thanks!

@PointC sorry, this is what I'm trying to do! I know that I can use a timeline and reverse it, but what if its inside an each function? $(app.$item).each(function() { gsap.set($(this), { opacity: 0, scale: 0, top: Math.floor(Math.random() * 140) + "%", left: Math.floor(Math.random() * 140) + "vw", }); gsap.from($(this), 2, { opacity: 0, scale: 0, top: ????, left: ????, ease: "cubic.inOut", }); });

How can I animate back to the original values without knowing the value? Lets say my code looks like this: gsap.set('div', { top: Math.floor(Math.random() * 140) + "%", left: Math.floor(Math.random() * 140) + "vw", }); Now in another function I just want to animate this div back to its original value (without knowing the original value) and remove the inline styles when the animation is done.

Thank you @Shaun Gorneau the last one with the text was exactly what I needed!

Is it possible? I have many divs with text that have different width. I want them to move at the same animation speed. This is my code: startRolling: function($text, $wrap) { let duration = $wrap.width() / 40; TweenMax.to($wrap, duration, { x: -($text.width()), ease: Linear.easeNone, repeat: -1 }); } So this doesn't work, and setting the duration manually to for instance .9 obviously doesn't work. Thanks!

Hi! macOS Sierra, version 10.12.6. In Chrome, newest version. It appears here as well

There seems to appear a light grey border over the animation when I'm animating a responsive SVG. Any fix?