All Activity

Hello again, There is something else that I wanted to understand. I managed to resolve the problem but I do not understand how it resolved it. I wanted to animate a div, in order to do so I have first created a ref element in the parent component and I have attached it to this div (Which stands in the children component). I have animated the div with a timeline and useGSAP (that are also in the parent component) and I have said that onComplete I want to revert the animation. But I have noticed two weird things: - first, when the component is mounted for the first time in strict mode, I saw that the ref returned undifined instead of the div element before showing the div element once mounted a second time. - secondly, when I have added to revert the animation, the animation did not play at all. I manage to resolve this issue by passing the ref and the useGSAP directly to the children component, but I do not understand how it resolved the problem so if anyone know what happened please let me know. How the code was before: Parent component: const animatedRef = useRef(null); const timelineAnimationRef = useRef( gsap.timeline({ repeat: 6, repeatDelay: 0, onComplete: () => { console.log("animation finished"); if (animatedRef.current && timelineAnimationRef.current) { // timelineAnimationRef.current.revert(); } }, }) ); useGSAP( () => { if (animatedRef.current) { console.log(animatedRef.current.id); } if (animatedRef.current && animatedRef.current.id == 2) { timelineAnimationRef.current .to(animatedRef.current, { rotate: "-5deg", duration: 0.06 }) .to(animatedRef.current, { rotate: "5deg", duration: 0.06, }); } }, { dependencies: [displayToNumber, content] } ); return ( <div id="story" className="container w-4/6 flex flex-col items-center"> {content.map( (contentObject, index) => displayToNumber >= index && ( <StoryFragment animatedRef={animatedRef} /> ) )} </div> ) Children component: return ( <div ref={animatedRef} id={content.id} className={`w-full h-min relative overflow-hidden`} > </div> ) Now everything has been sent to the root of the children component

Hi, hope everyone is doing great. I would like to be able to achieve an effect that is done with scrollmagic but with scrolltrigger. It layers 2 images on top of each other and the second image is hidden. But when you scroll the second image and section is revealed on top of the first section. You can understand the effect more from this gif - I hope its not too much of a trouble and I can get a starting point here as I am not very good with code. Thank you so much. Have a great day!

Hello again, It's been very helpful. After I replaced useEffect with useGSAP, I realized it's also not working on local properly, it was a visual illusion. I cleaned the code and solved the issue. Thanks for your help 🙏

Hi, Those demo should provide a great starting point https://codepen.io/cassie-codes/pen/abyZYym Hopefully this helps Happy Tweening!

In the given example, the jump appears small; however, in my project, with larger font sizes and different fonts, this issue becomes more pronounced. After the animation completes and the new text appears, the text jumps as if it is reverting to its original position.

I created a custom scrollbar with this setup: - lenis for smooth scroll - a few lines of css to hide default scrollbar - GSAP scrollTrigger to sync the thumb position with the scroll position - GSAP Draggable to enable scroll by dragging the thumb It works great, but if I resize the window (so that the height changes) it does not work anymore. My idea was to kill the scrollTween and the reinitiate it on window resize, but it doesn't seem to work. Sometimes it does on first resize but then if you keep resizing it starts messing up. Only thing that works is that the thumb height is properly resized IMPORTANT: To see the problem I'm trying to point, open the codepen and try resizing the window a couple times, then try to scroll up and down the whole page

Hello, I've started my React journey recently. For my final university college project, I want to create a "Your own adventure webcomic". I want to animate the every panels and in order to do so I had to use GSAP or "useGSAP" (I am proud of this one). I have watched those two videos to understand how it works: https://www.youtube.com/watch?v=DwU72sp_gGI https://youtu.be/l0aI8Ecumy8 But I am not sure if I have fully understood how it works. useGSAP automatically revert the animation at the end, so does it mean that I am not supposed to see things like this once the animation finished? Or is it only when the component is dismounted? I also wanted to ask if I use it properly. So here is an example of how I have used it in my code: const [isMounted, setIsMounted] = useState(false) const shakingRef = useRef(gsap.timeline({ repeat: 2, repeatDelay: 0 })); useEffect(() => { setIsMounted(true); }, []); useGSAP( () => { if (isMounted == true) { if (healthRef.current > elvan.health) { shakingRef.current .to(elvanRef.current, { xPercent: -5, yPercent: -5, duration: 0.1 }) .to(elvanRef.current, { xPercent: -0, yPercent: -0, duration: 0 }) .to(elvanRef.current, { xPercent: 5, yPercent: 5, duration: 0.1 }) .to(elvanRef.current, { xPercent: -0, yPercent: -0, duration: 0 }); } } }, { dependencies: [elvan.health], scope: elvanRef.current, } ); Thank you in advance for your answer (And sorry if I have made some mistakes, English is not my mother tongue).

i wanna make slider on trigger like https://yolele.com/ but i dont know how to achieve the similar animation

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/QWRyNOZ Hopefully this helps Happy Tweening!

Thanks for sharing those examples, I can see how some of those might be helpful in dealing with the math/rotation of the SVG. I played around with using motionPath for the autoRotate feature and it's getting closer https://codepen.io/dpickering/pen/LYoGpbO If you move your cursor up or down you'll see that each tire track svg isn't following each other by staying on the polyline.

Thank you, Jack! This definitely works better. But I still encounter a bug. For example, I didn't change your code at all, but I changed the text from: <div>Tell us<span class="text-gradient"> more</span> about your business</div> to: <div>Where is your<span class="text-gradient"> business</span> based?</div> And damn, now it splits the text into two lines, but it doesn't do it correctly. I am attaching my codepen where you can see this: https://codepen.io/ProjectDCL/pen/xxNZZXm Also if you add other text: <div><span class="text-gradient">Additional</span> information</div> With this approach, the text inside the span is wrapped in two divs. This isn't exactly a problem from a styling point of view, but this behavior doesn't exist when adding other text. And truly, when I switch between my slides in project sometimes (in 10-15% I still see how some words stick together). I just don't understand why this happens. I use SplitText on many projects and have never seen such a problem. You are doing amazing things, maybe I am doing something wrong. Will you have opportunity to check again please?

Mhh.... maybe you have both packages installed but installing the premium one with this command line should replace the previous installation: npm install gsap@npm:@gsap/CLUB-LEVEL What you could try is remove GSAP and delete the package-lock.json file and then install GSAP with the bonus plugins. The other thing that I missed in the first post is that you're working with NextJS, so you need to import from the dist folder in order to use the UMD modules: import gsap from "gsap"; import { MorphSVGPlugin } from "gsap/dist/MorphSVGPlugin"; if (typeof window !== "undefined") { gsap.registerPlugin(MorphSVGPlugin, useGSAP); } Hopefully this helps. Happy Tweening!

Hi, The container of the element you are rotating needs a perspective applied to it, otherwise the rotation will be applied in 2D; https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://3dtransforms.desandro.com/perspective Something like this in your CSS: .home__contact__bean__container { position: absolute; width: 100%; height: 100%; right: 0; top: 0; perspective: 250px; overflow: hidden; } Play with the value and see what works better for your taste. That value looks good IMHO. Hopefully this helps. Happy Tweening!

Hi @philcharitou and welcome to the GSAP Forums! Just a syntax issue! In keyframes land the easing for each keyframe is easeEach not ease: // Wrong gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], ease: "none", }, repeat: -1, duration: 3, }); // Right gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], easeEach: "none", }, repeat: -1, duration: 3, }); https://gsap.com/resources/keyframes/#percentage-keyframes---v39 Here is a fork of your demo: https://codepen.io/GreenSock/pen/YzbwwYz Hopefully this helps. Happy Tweening!

I am trying to rotate Image in the example i shared but its too vague, how i can make it more good? like interms of 3d Example: https://stackblitz.com/edit/stackblitz-starters-pmqxre?file=app/page.tsx

Sorry. All good now. Thanks!

Sorry about the delay and the confusion, @Grene Thanks for pointing this out - there was indeed a bug that could affect orientation changes (they wouldn't fire a ScrollTrigger.refresh() properly. That should be fixed in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js In the meantime, there's an easy workaround: let mm = gsap.matchMedia(); mm.add("(orientation: portrait)", () => { ScrollTrigger.refresh(); return () => ScrollTrigger.refresh(); }); Technically, you could do this instead, but I don't think it's as well-supported across browsers: window.addEventListener("orientationchange", () => ScrollTrigger.refresh()); Does that resolve things for you?

I'm rather new to GSAP, so apologies if this is a simple question, but I couldn't seem to find the answer anywhere. As you see in the codepen, I'm trying to animate this boat to appear to "float" in a static position using keyframes. However, between each keyframe there is a distinct pause for a quick moment before the next one begins. I've tried every easing function listed in the docs, I think sine.inOut works best sorta but none of them are smooth. Is this something simple I'm missing? Or perhaps the type of animation I'm trying to achieve is more complex than 5 keyframes. Thank you!

From the docs: There is a helper function that can help in that situation. You also need to make sure the elements are in the document flow so that calculations can be done correctly, but you had display: none on the parent. So you could toggle that for the split. https://codepen.io/GreenSock/pen/RwmrWPy?editors=1010 Better?

Thanks. Tried that again - no effect. Saw that in the Forum and tried it earlier. Any other ideas? I appreciate your help.

This thread may be helpful: Good luck!

Just to let you know @ElevateBrands - we have a Smooth Scrolling plugin that replaces locomotive (and solves a lot of pain points), https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Just mentioning as if you're hitting issues and considering paying for a freelancer, it may an option to pay for ScrollSmoother to make the process smoother (excuse the pun).

Ahh, makes total sense! Thank you folks for the excellent input, I'll share a more specific/targeted example if anything else comes up. Appreciate it!

Hi, You can borrow some of the logic in this demo: https://codepen.io/GreenSock/pen/jOQXYzV Hopefully this helps. Happy Tweening!

Hi @Wardo and welcome to the GSAP Forums! If you have the regular GSAP version installed before upgrading to the bonus tier, you could delete your package-lock.json file locally and push to your repo in order to trigger a deploy and see if that helps. Finally thanks for being a GSAP Club member and supporting GSAP! 💚 Hopefully this helps. Happy Tweening!