BrianCross

That’s the useEffect cleanup function that runs when the component unmounts, so it’s removing the ScrollTrigger instance when that happens. Are you able to distill the problem down into a CodePen? It’s not clear what the problem is from the gif.

Also in your tween you can put the duration and stagger right in the vars object.

I would just import the plugin into the hook like you're doing. It doesn't hurt anything to import a plugin multiple times. I would also rename the hook to useOpacityManager so React knows it's a hook. I would use refs instead of class names as well: import { useEffect, useRef } from "react"; import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function useOpacityManager() { const trigger = useRef(); const content = useRef(); useEffect(() => { gsap.to( content.current, 5, { scrollTrigger: { trigger: trigger.current, start: "top center", end: "bottom center", scrub: true, markers: true, }, yoyo: true, repeat: 1, opacity: 1, y: 0, }, 0 ); return () => { ScrollTrigger.kill(); }; }, []); return [trigger, content]; } and then in the component: const [triggerRef, contentRef] = useOpacityManager(); <TriggerComponent ref={triggerRef} /> <ContentComponent ref={contentRef} /> Hopefully that makes sense.

Hey @PointC, thanks very much! I could have sworn I tried that but maybe not. ? I have initialised tween targets that way before. Good to hear that's best practice. Thanks again Craig.

Hi everyone, I'm having an issue with animating an SVG clip path. In this pen, if you click anywhere in the document, the clip path will scaleY from 0 to 1, from top to bottom, revealing the image. Adding transform-origin: "bottom"; to the CSS should reverse the direction of the transform. Instead it looks like it's scaling up off the top edge of the screen. If I manually change scaleY in the browser dev tools it does correctly scale up from the bottom and reveals the image. I'm not sure what I'm doing wrong with the tween to cause this behaviour, so any help is appreciated. Thanks! Brian

No worries! One way of doing it is, instead of setting the scrollTrigger property of a tween, is to call ScrollTrigger.create() and use callback functions with it to run multiple tweens or timelines.

This. Build stuff, make mistakes, figure out your mistakes and learn from them.

Hey there, yeah it's definitely possible. The CodePen is already scaling a div using a scroll trigger with scrub enabled. You'd need to change the tween target and the specific properties that are being animated of course but it's almost the same thing as the demo.

You could create a master timeline with the scrub-enabled scroll trigger applied to it. Then you could nest other timelines within it so they play one after the other as you scroll. That would probably work.

Let’s see if this works. I grabbed a screen recording of it. I tried disabling autoKill but I was still able to break it. It’s probably Safari’s fault. If anything is going to have problems it seems to always happen in that browser. FullSizeRender.mov

I just modified your pen and posted it. Have a look and see if that's what you mean.

Oh ok I think I get you. Like this? https://codepen.io/BrianCross/pen/wvgdXMo

Hey there. I'm not 100% sure what you're asking. To put the spritesheet in the top left corner just get rid of: top: 50%; left: 50%; transform: translate(-50%, -50%); Then you want to trigger it somehow? Currently it's tied to the scroll position using ScrollTrigger. You're wanting to trigger the animation differently?

I just quickly peeked at your code on my phone and one thing I see is you’re not actually cloning the DOM node. You’re just setting clone to point to the existing node. Use const clone = cloneRef.current.cloneNode(true); to clone the node and its child text node.

Ok... the embedded CodePen seems to work fine. On the CodePen site it’s exhibiting the behaviour. It’s flaky on a site I’m building. Is there anything in this code that I’m doing incorrectly? Edit: it seems to be intermittent. Refreshing the page causes it to happen sometimes and sometimes it works fine. Strange.

Hi folks! I hope everyone is doing well. I’ve got a problem with this animation that only seems to be a issue on mobile. It works perfectly on desktop. I’ve tested it on iOS Safari, but I don’t have an Android device to try so I’m not sure if the issue exists on that platform. The problem is when you scroll to the bottom and then back up a bit, a scroll to top animation is triggered. On desktop it scrolls up smoothly but on mobile it’s very broken. Any advice on this one? Thanks in advance! Brian

Thanks very much Craig and Zach. I kinda figured they weren’t meant to be used since they’ve got the underscore. I missed the targets method in the docs so thanks Craig! Makes perfect sense!

Hey folks, I was playing around with some SVG text animation and was wondering if someone could take a look at my implementation to see if I'm approaching it correctly. I'm specifically wondering about my onComplete callback function within a staggered animation. I'm using this._target[0] to reference the current element to apply a tween after that element's stagger animation is done. I just want to make sure that's correct and that I'm not going about it the wrong way. I inspected this within the callback and that's the only reference I could find to the DOM element in question. I had googled how to do this and found a couple methods. I'm still a GSAP newb so feedback would be appreciated! Thanks very much and I gotta say, I think I'm a GSAP lifer now! Brian

Yeah SplitText can do that no problem. It can split on each line, word or character. https://greensock.com/splittext/

I was also going to suggest a clip path. I use them to reveal drop down menus and it works great. https://codepen.io/TuxFan77/pen/YzpNmzr