danosaur

Thanks so much Jack! Didn't know GSAP accepts the queryselector like that! Very cool!

Hey dear GSAP superheroes, I most likely suck at looping and I can't seem to understand why this interaction doesn't work on single items. I had a similar issue with scramble text but then Jack was so kind and helped me out ( ). I tried to do this the same way, but the SVGs only draw when I hover over the first box and all of them animate simultaneously. What am I missing? Any comment or advice is much appreciated!

Hi Jack, thanks so much! That's exactly what I was trying to achieve. Should've created the timeline inside that loop! Also thanks for explaining me mouseover/mouseout issue! Will be more careful in the future. Have a great Sunday!

Hello dear GSAP community, I'm really bad at this, I was wondering if somebody knows how to proceed. I have two questions: How can I start the animation only on the currently hovered item? Why does the animation play when the page loads even thought it's set to paused? Appreciate any hint or advice! ?

Hey everyone, I'm a Club Greensock member and I'd like to know how I can install the throw pop plugin so can I do this exact interaction: https://codepen.io/GreenSock/pen/LomEvN I'd like to use it on my website via CodeSandbox. Thank you so much!!!

Hey @GreenSock, thanks for the answer, nonono please don't watch the whole video, I was just looking for some tipps for getting started LOL.

Hey dear GSAP community, I've been wondering if this or something similar to this animation in this video could be possible with GSAP and Swiper JS. If yes, how? SVG morph? Or should I do it with the canvas. Maybe Pixi JS? CHeers P.S.:Sorry for the noob question. I only know how to use the scroll trigger so far LOL.

Hey elegantseagulls! Thanks for the answer, this pretty much solved it! You're a true hero! I just wonder I how I could use this along with matchMedia() hence I have to use a different initial state on mobile. The initial state on mobile would be on 0 on the x-axis and on the y-axis rotation. I'm pretty sure this code would never work, but for example: ScrollTrigger.matchMedia({ "(min-width: 1100px)": function() { ScrollTrigger.create({ trigger: '.container', scrub: 3, start: '5% top', end: '20% top', onUpdate: (self)=>{ mesh.rotation.y = 2.*3.14 * self.progress -0.22; mesh.position.x = 15 * self.progress +1; } }); }, "(max-width: 600px)": function() { ScrollTrigger.create({ trigger: '.container', scrub: 3, start: '5% top', end: '20% top', onUpdate: (self)=>{ mesh.rotation.y = 2.*3.14 * self.progress; mesh.position.x = 15 * self.progress; } }); }, });

Hello again dear GSAP community, Is there a way I could use the ScrollTrigger as a callback so it won't change the initial position of the object? The object starts off at the initial state when the page loads but as soon as the animation kicks in it jumps to 0 on the x-axis and 0 rotation on the y-axis. I can't use the ScrollTrigger inside of an animation because I have to use a custom smooth scroll and that breaks the scrub animation on mobile. ( I also tried to use scrollerProxy, but I wasn't able to integrate it with my custom smooth scroll ) ScrollTrigger.create({ trigger: '.container', scrub: 3, start: '5% top', end: '20% top', onUpdate: (self)=>{ mesh.rotation.y = 2.*3.14 * self.progress; mesh.position.x = 15 * self.progress; } }); The object is supposed to stay at 1 on the x-axis instead of 0 and be rotated as a default to -0.22 on the y-axis instead of 0. mesh.position.x = 1; mesh.rotation.set(0.127, -0.22, 0); Any help or hint is much appreciated!

Hey Cassie, thanks for the reply. You can also take a look at the staging link of the page I'm building. I'm using it's the same animation the only difference is that I'm using a model. https://5c98ad-2bd965dd7504daa4ac960eec46ab6863.webflow.io/ I'm also using smooth scrolling. That might interfere.

Hey Jack, thank you for sending me how to do a demo, I didn't know how to use different libraries and such. It's very basic now the main part is between the the double dashed lines. I'll look into the ScrollTrigger.config() as well. Thanks again https://codepen.io/danielapro/pen/RwpGvmW?editors=0010

Hey dear Greensock community! Please let me demonstrate my scroll trigger issue here: https://www.loom.com/share/ec4e84db15d846119f13d7e85fdb340b Unfortunately I can't provide any codepens. But you may have come across a similar issue. Everything works perfectly on desktop but the animation becomes very jittery and out of hand on mobile. I tested it on an actual phone as well, not only in the Xcode simulator. When I try to scrub the animation, the object doesn't move back to its initial state or it jumps back and forth. Any help or advice is appreciated this.tl = gsap.timeline({ scrollTrigger: { trigger: ".container", start: "top top", end: "+=900", scrub: 1.5, } }); this.tl.to(this.model.rotation, { y: -3}) .to(this.model.position, { x: 25, y: 4}, "<")