Leaderboard

This is actually a great illustration of why DrawSVGPlugin is valuable. A lot of people think they can get the same effect by manually animating the strokeDashoffset which is technically true in many cases, but there are quite a few tricky things that the plugin solves for you and you just stumbled on one of them. Specifically, I noticed: You set the attribute with your function, but then you animated the CSS property. Be very careful because that ends up with there being two completely different values and some browsers prioritize CSS, and others may prioritize the attribute. In other words, how would you expect the browser to render this: <path stroke-dashoffset="320" style="stroke-dashoffset: 50px" /> More importantly, you used .getTotalLength() to get the path length which isn't always terribly accurate depending on the browser. In this case the real problem is that after you set that via the attribute, and then you tried animating it with GSAP (good), when GSAP tried to get the current value, the browser reported it slightly differently than what you set in the attribute via getComputedStyle(). Thus when you "rewind", the offset is slightly off, causing things to peek out. Here's a reworked version that uses DrawSVGPlugin. Notice there's less than half the code necessary: https://codepen.io/GreenSock/pen/133a8081ce0fcb6026f7e0b9386159ae?editors=0010 And it "just works". Here are a few things DrawSVGPlugin solves for you: If a non-scaling-stroke is applied, it will mess up your path's length Calling <path>.getTotalLength() in IE locks the repaint area of the stroke to whatever its current dimensions are on that frame/tick. Firefox has a bug that throws an error if the element isn't visible. Microsoft Edge has a bug that causes it not to redraw the path correctly if the stroke-linecap is anything other than "butt" (like "round") and it doesn't match the stroke-linejoin. Firefox doesn't always return an accurate getTotalLength(), causing things to be a bit short at times. Some browsers render artifacts if dash is 0. When the element has vector-effect="non-scaling-stroke" and the SVG is resized (like on a window resize), it actually changes the length of the stroke! DrawSVGPlugin can automatically adjust. A bug in Safari causes strokes with rounded ends to still show initially when they shouldn't. You can't getTotalLength() on other shapes besides a <path> (like a <rect>, <circle>, <line>, etc.) Again, that's part of what makes GSAP special - we try to figure out workarounds for all these things so your animations "just work". You're welcome to put together your own custom solution and it may work fine for your scenario, but hopefully all the time and headaches our bonus tools solve will make the membership pay for itself very quickly and ultimately make you more profitable as a developer. But there's no pressure to join, really. I hope that helps.

Hi @GeS, Zach is right, I have created some Barba.js learning resources that could help you. More specifically here is an example of Barba + Smooth ScrollBar + GSAP and GitHub repo. I would recommend learning Barba.js by watching this YouTube playlist first. Hope that helps.

I quite like that effect from the site you showed: https://www.ecwid.com/?fbclid=IwAR2ygAek1LtYvPiQbq2x8P9vOfmzGO4zKM8sQRNVySt29cSApJB2O71JtaY So I figured it was a good excuse to practice my ScrollTrigger and transform skills. Kind of finicky working out the css, there's a few different ways you coudl approach that. This seems to work pretty well. https://codepen.io/Visual-Q/pen/RwadBgG

It does seem problematic with using toggleClass. I could set it to reverse but toggleActions did not seem to prevent the class from being removed at end of trigger. Is this expected? I would have expected "play none none reverse" or "play none reverse none"should have prevented the class from being removed when it reached the trigger end? You could animate the filter value using css variables instead: https://codepen.io/Visual-Q/pen/poyBgoG

Jack you rock my brother! This worked like a charm! The reason I'm using jsdelivr is so that I can combine all the libs in one request. I just didn't know about using /dist instead of the module. All my scripts look like this now and it works great: <script src="//cdn.jsdelivr.net/combine/npm/jquery@3.5.1,npm/sammy@0.7.6,npm/animejs@3.2.0,npm/ion-sound@3.0.7,npm/pixi.js@5.3.3/dist/pixi.min.js,npm/pixi-filters@3.1.1/dist/pixi-filters.min.js,npm/gsap@3.5.1,npm/gsap@3.5.1/dist/PixiPlugin.min.js"></script> I tried using cdnjs.com to find the pixiPlugin there but was unable to find anything. Also, you may want to add the CDN link in the documentation here and explain the difference between module and non-module: https://greensock.com/docs/v3/Plugins/PixiPlugin It will make it easer for lost souls like myself Thanks a lot!

It turns out IE11 has issues with flexbox when flex-basis isn't set (it doesn't support flex-basis: auto). So our workaround for now is instead of setting widths, setting min-width and flex-basis instead. https://codepen.io/driezis/pen/zYqXYKy

Mhh... Ok this is a bit different from the original question. I thought this was about just controlling a timeline in different components, but this is a different territory. Yeah this situations can be a pain in the neck actually because, while is ideal to keep components as small/simple as possible, some times we run into this issues where we need a specific DOM element in a grand parent component with the purpose of creating an animation or doing something else. In this case I wouldn't use the context API at all for such purpose and try to tailor a solution for your specific scenario. If your component tree has three levels (as you mentioned in your first post): I'll assume that the entire timeline is being created and started in the Layout or Header component. What I would do is to use a method in the Layout component in order to access the DOM elements and add them to the timeline, and Forwarding Refs in Component1 to get the refs from Component2, because (as you already found out ) sharing things between sibling components can be a bit tricky. In the layout component it would look a bit like this: import { useRef } from "react"; import Header from "./components/Header"; import Component1 from "./components/Component1"; const Layout = () => { const getChildTweens (tween) => { // In here run some code to add the GSAP instances // in the main timeline }; return (<div> <Header getChildTweens={getChildTweens} /> <Component1 getChildTweens={getChildTweens} /> </div>); }; In the header component import { useRef, useEffect } from "react"; import gsap from "gsap"; const Header = ({ getChildTweens }) => { const headerTween = useRef(null); useEffect(() => { headerTween.current = gsap.to(/* Header Animation */); // You can add other parameters to include labels, etc. // Now you sent the header tween to the layout component getChildTweens(headerTween.current); }, []); return(/* JSX in here */); }; In Component 1: import { useRef, useEffect } from "react"; import Component2 from "./Component2"; import Component3 from "./Component3"; const Component1 = ({ getChildTweens }) => { const component3Tween = useRef(null); const component3Ref = useRef(null); useEffect(() => { component3Tween.current = gsap.to(/* Header Animation */); // You can add other parameters to include labels, etc. // Now you sent the header tween to the layout component getChildTweens(component3Tween.current); }, []); return(<div> <Component2 /> <Component3 ref={component3Ref} /> </div>); }; Finally in Component 3 import React, { forwardRef } from "react"; const Component3 = forwardRef( ({ ref }) => { return( // Here you use the ref passed from the parent component // where you need it <div ref={ref}></div> ); }); That is actually the 100% React Way of doing this and is not exactly super simple and easy to follow, but not all that complicated Another alternative would be to use redux (or a custom store object) to store references to each GSAP instance and access them in the layout component in order to create the main timeline in the layout component and run it there. To be completely honest I've never tried something like that, but it should work. Happy Tweening!!!

Hello and first off congrats on the the release of ScrollTrigger, it's definitely a game changer! Are there any plans for adding stagger in ScrollTrigger? Would be really useful for reveals on a grid, where you'd want to stagger the reveal of each element when entering the viewport.

I'd be interested in stagger for scroll trigger. Good suggestion Yannis.

Hey guys, I'm just checking ScrollTrigger and I love it! It is way better than Intersection Observer. I would definitely be interested in feature that Yannis came up with

Oops, you're right. Sorry I didn't wait for it to finish Busy day with GSAP 3 stuff. Here ya go. https://codepen.io/GreenSock/pen/OJJwEpq?editors=0010 Side note, you should put the duration in the vars parameter in GSAP 3 like I did in the demo above.

Yep, the browser is applying some funky custom kerning, but refuses to do so when something is wrapped in a <div> or even <span>. I can't think of anything we could do in SplitText to fix that. Have you tried adding this to your CSS?: font-kerning: none;