Leaderboard

I'm not really sure what you mean (a very clear minimal demo in CodePen that shows that scenario would go a LOOOONG way toward getting you a solid answer), but what about using the svgOrigin feature? That lets you explicitly set an origin relative to the overall SVG. https://codepen.io/GreenSock/pen/waKrNj https://gsap.com/resources/svg

That's incorrect - the spec states that SVG elements by default use the top left as the transform-origin which is a bit confusing because normal HTML elements use their center as the default transform-origin. None of that is GSAP-dictated. So that certainly explains the issue you're talking about - just set the transformOrigin: "50% 50%" explicitly via GSAP and you should be golden. That resolves everything for you, right? I really can't speak to what's going on with your testing server; my guess is that the element isn't present in the DOM, thus there is no width/height which would kinda make it act as if the origin is in the center since there's no width/height.

I thought it was fixed, but I see it happen now again. I think the browser doesn't like rendering (or animating rem units) I've tested it with random px units and I don't see the issue. You're rem unit of 100 is also larger then the element can display, so for around half of the animation the border radius doesn't animate. Nope the first tween already animate to those values, so setting it again will just mean for 0.5 the animation does nothing while it animates from 1 to 1 and ("1.5rem"). I'll mark the topic to see if anyone else has some insight on rem units.

Hi @simgy welcome to the forum and thanks for being a club member! Instead of animating the video directly I would animate the wrapper element. I have the feeling this is easier on the browser, but I'm not sure. Below en example with GSDevTools without ScrollTrigger so that we first can focus on the animation. I'm not sure what you wanted to do with your second tween, because scale: 1, is the browsers default and 1.5rem was already set in CSS, so you're .from() tween animates to those values, so your second tween was animating nothing and just taking up space on the timeline https://codepen.io/mvaneijgen/pen/WNWvKBV Then the ScrollTrigger part. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Is this what you're looking for? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/yLrNqdY

Yeah, quickTo() doesn't have conveniences like unit conversion, and you're trying to do a percentage-based thing here but you can sorta hack that like this: https://codepen.io/GreenSock/pen/RwOPxdb Internally, a gsap.quickTo() is just a convenient way to access a tween's .resetTo() functionality. So I forced the percent unit into the paused tween. The key is that gsap.quickTo() and tween.resetTo() are ways to feed a raw number directly into the slot inside the already-created tween that's animating that value. Again, it's highly optimized, hence skipping the conveniences like unit conversion, property aliases, etc. Does that give you what you were looking for?

That's pretty weird indeed, @jdhadwin. It's pretty much impossible for us to troubleshoot without being able to reproduce that on our end - can you please provide a minimal demo like a CodePen or Stackblitz that illustrates the problem clearly? No need to include your actual code - just the most simple form to show the problem. Just one tiny hunch that probably won't do anything, but try setting smoothOrigin: false on your tween. Once we see a minimal demo, I'm sure we'll be able to offer better advice.

Here's an approach you could take that's pretty performant: https://codepen.io/GreenSock/pen/dyLozYj

Is this what you were trying to do?: https://codepen.io/GreenSock/pen/bGJdRxJ?editors=0010 Your previous demo didn't work properly because you were calculating the snapping progress values incorrectly. You were using the bounds of the entire page rather than the ScrollTrigger's own limited area (between the start and end).

Hey! I was just looking for this, but didn't find anything related to it on the docs, just a heads up so you guys can update it! It works just as expected, thanks very much btw

Hi, Your demo currently is not working, but I did noticed something that caught my attention: function CardComponent() { const IconWrapper = forwardRef(({ children, activeProject }, ref) => {}); const TechnologyBody = forwardRef(({ activeProject }, ref) => {}); } Any particular reason to create other components in the callback of another component? This looks real odd to me TBH, because your CardComponent has quite some props, so if any of those props is updated all the component will be re-rendered and those functions will be created again and again, seems odd and a potential source of issues. Personally I wouldn't do it like this and follow this pattern: https://react.dev/reference/react/forwardRef#exposing-an-imperative-handle-instead-of-a-dom-node Finally forwarding refs is a way to overcome a shortcoming in React that are emitters/listeners, something any self respecting framework should have, like Vue: https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events Svelte: https://svelte.dev/repl/ba7f569af4a44553b201a9efd8dc6ec2?version=4.2.12 So certainly forwardRef adds a layer of complexity to all this, but indeed your idea is the best way I can think of in terms of calling a child method from a parent and then using he onComplete to update some state. Another option would be to use a React Context provider and run all the logic there as well. Finally yet another alternative could be a custom hook, but at the end just use the one that works better in your particular case. Happy Tweening!

I'm no React expert (maybe @Rodrigo will have some suggestions), but I noticed two minor things: You're putting a stagger on a tween that's only has one target, so it's pointless: delay: 0.7 + index * 0.1, stagger: 0.1, // pointless. There's only one target You could simplify that whole thing: // BEFORE (long) iconsRef.current.forEach((icon, index) => { const isInProject = projectTechnologies[activeProject]?.includes(index); gsap.fromTo( icon, { opacity: 0, scale: 0.8, }, { opacity: 1, scale: isInProject ? 1.05 : 0.8, delay: 0.7 + index * 0.1, stagger: 0.1, } ); }); // AFTER (short) gsap.fromTo(iconsRef.current, { opacity: 0, scale: 0.8, }, { opacity: 1, scale: i => projectTechnologies[activeProject]?.includes(i) ? 1.05 : 0.8, delay: 0.7, stagger: 0.1 }); I don't understand why you're animating to the CURRENT scale/filter values in this tween (what's the point?). Plus you could simplify it all into a very simple tween: // BEFORE iconsRef.current.forEach((icon, index) => { const currentScale = gsap.getProperty(icon, 'scale'); const currentFilter = gsap.getProperty(icon, 'filter'); gsap.to(icon, { scale: currentScale, filter: currentFilter, opacity: 0, delay: 0, onComplete: () => { if (index === iconsRef.current.length - 1) { handleFadeIn(); } }, }); }); // AFTER gsap.to(iconsRef.current, { opacity: 0, onComplete: handleFadeIn });

Hi, Based on a quick look here: https://pixijs.io/sound/examples/ https://pixijs.io/sound/docs/Sound.html#volume You could do something like this: const sound = PIXI.sound.Sound.from('resources/boing.mp3'); sound.volume = 0; sound.play(); gsap.to(sound, { volume: 1 }); I'm not sure if the PIXI Plugin would work with sounds, since it was created to be used with PIXI display objects, but you could try and see how it goes, if it doesn't work you can try the code I proposed above. Hopefully this helps. Happy Tweening!