Leaderboard

Hi, It's not really clear to me which part of the animation you have trouble with: the line morph, highlighting the path, moving the highlight segment etc... Regardless, it's a pretty neat effect. With GSAP's available tools it's all possible. Here is a demo with enough code to get you started: https://codepen.io/snorkltv/pen/WNBVmwB?editors=0010 The reference site uses a masked path but I'm not sure how much of that site you intend to copy. I copied the exact stroke d attributes from the site's source code for this demo.

Hi and welcome to the forums, Great to hear you are enjoying your time with GSAP! There could be a few reasons why this is happening and it is very difficult to troubleshoot without a minimal demo. One common mistake is relying on from() tweens which by design will use different ending values depending on when they are created. This video from my free beginner's course GSAP 3 Express explains the issues in detail When dealing with more complex "enter" and "leave" animations you can very easily run into issues with overwriting With "enter" and "leave" animations it is typically best to call functions that create those animations on demand instead of having pre-made timelines that you try to control as the current state of your enter animation is most likely going to be very different than the start state of your leave animation if the user is trying to trigger them repeatedly in quick succession Hopefully some of this helps, but it would be very helpful to see a minimal demo that clearly illustrates the issue with as little code as possible Thanks!

Here is an example that mixes normal scroll with the Observer plugin. It has an observer section, but when it then is at the end it disable the observer and starts scrolling normally again. https://codepen.io/GreenSock/pen/oNQPLqJ

Hi there! So I’m not sure but this looks like than you try to move some parent. That could be reason why the content has issues. I have small demo for you. This demo without gsap. But this could be helpful maybe. https://codepen.io/Hideakimaru/pen/JjqeJoY Ok follow this simple steps and I hope you will find the solution: 1. The main idea you should to have parent of your slider and it should have overflow. |parent| 2. The content should have something like way parent for blocks witch will be move with for example transform: translateX(-contentWidth px) Something like this: |—-|way parent|—-| - in main parent. 3. Then you can add content to your way parent also you could make the content on full width with flex-shrink: 0 on children or with max-width. This should looks like: |—|[ 1 ]-[ 2 ]-[ 3 ]|—| But because you will be use overflow hidden on the main parent this should be something like this. |[ 1 ]| - hidden content not in viewport [ 2 ] [ 3 ]. 4. In general you should to move the “Way Parent” not main and not children content. By X or Y. 5. The content as video should be as children too. With the same parameters as all children’s. 6. You could move the “Way parent” of slider with anything what you want. This could be gsap, js, css, e.t.c. 7. Also this could be not only something like this. You can add overflow : scroll on the parent for example. And move with scrollTo() to pointers by the scroll-snap. Hope this could help to find the solutions. Thanks, Hideakimaru

Hi, Most likely the issue is that you're using async functions in a synchronous way inside the useEffect hook. Have a look at this article to learn how to do that correctly: https://dev.to/jasmin/how-to-use-async-function-in-useeffect-5efc Hopefully this helps. Happy Tweening!

I added another ScrollTrigger instance for pinning the side-scroll section. Note: I also edited the end value of your horizontal scroll to give a natural feeling of scroll distance. I also needed to add pinReparent: true, to get the double pin working properly. https://codepen.io/ryan_labar/pen/PorYYqp?editors=0110

It looks like the path data is the same in both your clippath and in your animation code, so it's not animating anything. An easier option for this would likely be using a tool like the MorphSVGPlugin: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin

Nope, use our useGSAP hook instead, is simpler and easier: https://gsap.com/resources/React Something similar to the code snippet in my previous post on this thread. As far as I know there shouldn't be any SEO issues with useGSAP. Happy Tweening!

Hi, I think we already went through something similar to this in this thread: And this demo: https://codepen.io/GreenSock/pen/JjqqOdL As mentioned in that thread this is about creating a single Timeline with ScrollTrigger to control everything. I forked the demo from that thread and made some changes to it: https://codepen.io/GreenSock/pen/zYQggoW Hopefully this helps. Happy Tweening!

Hi everyone. I've build a figma plugin, that rebuilds pixel-perfect HTML5 from a figma frames and automatically animates them as a storyboard. You can tune it then, choose animation type and export as a complete ZIP-bundle for ad networks. Take a look and share your thoughts please 👨‍🚀

Hi, Is great to hear that is working as expected, the only thing caught my attention in your code is this: useGSAP( () => { gsap.to(animationRef.current, { x: -600, scrollTrigger: { trigger: animationRef.current, scrub: true, start: "top 100%", end: "bottom 0%", // markers: true, }, }); }, { scope: container } ); useGSAP( () => { const animation = gsap.to(animationRef.current, { xPercent: -40.5, repeat: -1, duration: 10, ease: "linear", scrollTrigger: { trigger: container.current, start: "top 100%", end: "bottom 0%", onUpdate: (self) => { animation.reversed(self.direction === 1 ? false : true); }, }, }); }, { scope: container } ); You're creating two different animations with the same target animationRef.current and basically the same ScrollTrigger configuration, at least when it comes to the trigger, start and end. Also on both animations you're animating the same element on the X axis, granted that those are different properties but that looks odd. You should review that and see if you can had all that logic in just one instance of the useGSAP hook and control everything with just a single ScrollTrigger. Happy Tweening!

Hi @Nazar Marusyk and welcome to the GSAP Forums! First, based on the screenshot of your code this could be caused by a cleanup problem. When working with React we recommend using our useGSAP hook for better cleanup and in order to avoid some issues that stems from React's strict mode (since version 18 of React). You can learn more about it here: https://gsap.com/resources/React Second, since you're pulling data from your service, my guess would be that the height of the DOM elements inside the components changes once the data is loaded and properly rendered in the screen. For those cases is better to call ScrollTrigger.refresh() in order to tell ScrollTrigger to update the start and end positions of it's instances. Another option is to create the ScrollTrigger instances after the data from the server is loaded and reflected in the DOM. For that you can also use our useGSAP hook with a dependency array that contains the data. In combination with a useEffect hook with an empty dependencies array that makes the API call, should be enough. Something like this: const [data, setData] = useState(null); useEffect(() => { // Fetch the data here setData(response); // response would be the data from the server }, []); useGSAP(() => { // Run your code only if there's data from the server if (data) { // Create your ScrollTrigger and GSAP instances // After creating the GSAP and ScrollTrigger instances, call the refresh method ScrollTrigger.refresh(); } }, { dependencies: [data], }); Finally if you keep having issues please create a minimal demo that clearly illustrates the problems you're having, you can fork one of our starter templates from our stackblitz colletion: https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters Hopefully this helps Happy Tweening!

Thanks Rodrigo, that is all I needed. This is my code. The reason I did not do it simplfy by onMouseEnter is, that when I scrolled out of hovering it still kept the custom cursor visible. However now, when I scroll out of hovering the element it sets the state to false. "use client"; import { CONTACT_URL } from "@/config"; import { useGSAP } from "@gsap/react"; import clsx from "clsx"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import Link from "next/link"; import { useRef, useState } from "react"; import CustomHoverCursor from "./custom-hover-cursor"; export default function Marquee() { const [hover, setHover] = useState(false); const container = useRef(null); const animationRef = useRef(null); useGSAP( () => { gsap.to(animationRef.current, { x: -600, scrollTrigger: { trigger: animationRef.current, scrub: true, start: "top 100%", end: "bottom 0%", // markers: true, }, }); }, { scope: container } ); useGSAP( () => { const animation = gsap.to(animationRef.current, { xPercent: -40.5, repeat: -1, duration: 10, ease: "linear", scrollTrigger: { trigger: container.current, start: "top 100%", end: "bottom 0%", onUpdate: (self) => { animation.reversed(self.direction === 1 ? false : true); }, }, }); }, { scope: container } ); useGSAP(() => { ScrollTrigger.observe({ target: container.current, onHover: () => setHover(true), onHoverEnd: () => setHover(false), }); }, []); return ( <section ref={container} className="mb-12 mt-40 flex w-full items-center justify-center" > <CustomHoverCursor active={hover} /> <Link href={CONTACT_URL} className={clsx("relative w-full overflow-hidden", { "text-accend": hover, "text-foreground": !hover, })} > <div className="flex w-fit items-center justify-center gap-6 lg:gap-12" ref={animationRef} style={ { // animationDirection: direction === "right" ? "normal" : "reverse", // animationIterationCount: "infinite", // animationDuration: "15s", // animationTimingFunction: "linear", // animationName: "marqueeAnimation", } } > {Array.from({ length: 5 }).map((_, index) => ( <div className="flex items-center gap-6 whitespace-nowrap text-[calc(40px*1.5)] font-semibold tracking-tighter duration-300 lg:gap-12 lg:text-[calc(40px*3)]" key={index} > <div className="text-[calc(24px*2.5)] lg:text-[calc(24px*3)]"> ✦ </div> Get in touch </div> ))} </div> </Link> </section> ); }

No problem, we'd love to help as much as possible, but is a matter of not having enough time to provide that for all our users. We love challenges as much as the next person, but it would be impossible to have enough time to go through all the issues of all our users and come up with amazing demos and solutions for their issues and needs. That being said if you run into any issues in this or any other project, please don't hesitate to ask in the forums, we're always here to help as much as we can. Happy Tweening!

Hi, I'm not 100% sure I follow what you're trying to achieve here, but maybe something like this: https://codepen.io/GreenSock/pen/BaowPwo Hopefully this helps. Happy Tweening!

To me it is doing that! Just to explain what ScrollTrigger does it gets your animation (which is 0.5 seconds long) and stretches it over the scroll distance, so in your case 0.5 seconds get stretched over 5000px, as soon as the start makers (green) touch it starts and as soon as the end markers touch it finishes. In below pen I've add an extra tween (of 0.5 seconds) to the end of your timeline now ScrollTrigger will stretch a 1 second timeline over the same 5000px, so when you've scrolled 2500px the image will be full and for the rest 2500px it the animation will do nothing. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/NWVQjjz

I would start by disabling everything except HTML and CSS and make sure your layout it looking like you expect before adding an animation. As you can see below you pen with no GSAP and nothing is visible. Hope it helps and happy tweening! https://jsfiddle.net/v4gdknsq/

Hi, What exactly you mean with glitch? Unfortunately a sketch doesn't really help, maybe these demos can help a bit: https://codepen.io/GreenSock/pen/VwNNNJw https://codepen.io/GreenSock/pen/JjqRErG Happy Tweening!

Just use display flex as in the last demo I shared: https://codepen.io/GreenSock/pen/RwvNamq Duration has nothing to in this case, when using ScrollTrigger to scrub a Tween/Timeline is about the amount of pixels the user scrolls: Happy Tweening!