Steve Giorgi

I have timelines nested inside the master timeline but none of them are associated or connected to any other ScrollTriggers. I absolutely understand you have to avoid nesting a ScrollTrigger within a timeline or tween that is controlled by another ScrollTrigger. I have a ScrollTrigger connected to a timeline that is isolated and separate from the master timeline and any timelines associated with the master timeline. Yet, the snapping on this isolated timeline is causing the master timeline to also snap. I suspect it has something to do with the useEffect React hook. I'll check to see if I'm doing proper cleanup in the useEffect and if it's not an error I have overlooked. I have to put together a test case for another post, I'll tackle this at the same time. In the meantime, is there anyway to stop a non-scrubbed ScrollTrigger and resume it once scrolling has resumed or do I need to setup a second ScrollTrigger? I'm looking at pause(), resume() but it would require using a separate callback to detect when the user has resumed scrolling. I just want to trigger a text reveal, stop, and hide the text when the user resumes scrolling.

I will absolutely take the time to replicate this in a test environment if this not expected behavior. I didn't want to spend hours if this is extreme edge case and/or expected behavior: I have a master timeline and several other ScrollTriggers connected to one-off timelines (no timeline shares conflicting ScrollTriggers, I know this is a no-no). When I set snapping on one of those timelines that is not connected to the master, the snapping also controls the master and forces it to tween/ease between labels. I know for a fact the ScrollTriggers are not crossing over via timelines as they are triggering their respective timelines correctly and one is scrubbing and the others are not. However, the non-scrubbing ScollTrigger snapping parameter is controlling the master timeline/ScrollTrigger; is this expected? This behavior is between a parent and child component in React. If this is expected behavior do I have any other options? I'm trying to keep a ScrollTriggered event/element in view until the user's next interaction (such as their next mousewheel event); I would think this would be accomplished with labels/snapping. I believe I can create an additional timeline/tween for the out event but it seems like there must be a better way.

Yes, I believe you can use a custom hook to detect the scroll direction and/or trigger the timeline with useState from the main ScrollTrigger position; wasn't too sure about the best approach. Using call() to trigger the timelines was a bit messy anyway -- for whatever reason reverse() would trigger at a different time than play() (with position assigned) and at times it would conflict with my main timeline. I combined both of Carl's approaches and can now control multiple detached non-scubbed/scrubbed timelines in parallel by using a dummy container as the trigger. I have a single master scrubbed timeline controlling all of my child components, and I'm firing detached non-scrubbed timelines while they are synced up with the master without the use of call() or reverse(); so it's extremely clean. I'll post up a stripped down Codesandbox once I'm done with the project.

@Carl I ended up sending all my timelines up to a parent component and placed them into a master timeline. This works beautifully. I do have one odd scenario -- in my child timelines I was detecting the direction of the scroll so that I could use call() to fire detached timelines (that I do not want scrubbed) in forward and reverse as the user scrubs forwards and backwards through the main timeline. Since my master timeline is now in my parent component, I can no longer signal the detached timelines sitting in my child components with the direction of my scrubbed timeline. Can you think of any possible solutions? The goal is fire those timelines that are detached from my scrubbed master but also have them in sync with my scrubbed master. It's for doing things like bringing in text or UI that should not be caught mid-transition (UX).

@OSUblake I have not yet. I have been under the gun with several deadlines but I'm definitely going to get around to it. I am very thankful for the help you've provided already. I haven't forgotten!

Well, the answer to this is simple enough. You can create an ref in the parent component and push each timeline into it for use in a master timeline. If anyone runs into this please let me know and I'll boil the code down and post an example.

Rodrigo - Using this method, do you need to pass the timeline/tween up with a different function callback for each component? I know in your example you used the same function for each component "getChildTweens", but won't it be overwritten for each timeline so you'll be left with just the final timeline from your last child component? If not, how do you differentiate between each timline/tween that you pass up to the parent? In my case, I'm passing up timelines, and in your example you're passing up Tweens, so maybe that's the difference since those are triggered as they come through.

Awesome, I figured with the amount of React/Vue related questions I'm seeing in the forums that even without the issue being GSAP related there is a need to make GSAP mesh better/easier with these Frameworks. Thank you for providing the demo -- I'm utilizing styled components but I could setup classes on them. It would be less cumbersome than what I'm doing now. In many ways I've been regretting the switch to styled components.

What would be the best way to pass and use scroll direction from ScrollTrigger within React? In vanilia JS it is incredibly simple, we just look at onUpdate: self => updateScrollDirection(self.progress), but in React it's seemingly much more complex. I'm assigning this via a useState but when passing the state into useEffect it does all sorts of crazy stuff to the tween(s). I'm trying to trigger a timeline that is outside of my main scrubbed timeline, forwards and backwards. I did have it working but refactored my code because of other weirdness - if I simply place everything into one useEffect it works, however reverse() doesn't playback from the correct time (I've tried to set the position). This is just reference not really part of the question: const [scrollDirection, setScrollDirection] = useState(true) useEffect(() => { ScrollTrigger.create({ trigger: sectionRef.current, pin: true, scrub: true, animation: tlMaster.current, onUpdate: self => updateScrollDirection(self.progress), }) const updateScrollDirection = progress => { progress === 1 ? setScrollDirection(true) : setScrollDirection(false) } tlMaster.current.add(tlScene1.current) }, [tlMaster]) useEffect(() => { tlScene1.current .fromTo(containerRef.current, { height: 0 }, { height: "100%", duration: 0.6 }) .call(() => { scrollDirection ? tlScene1TextBlock.current.play() : tlScene1TextBlock.current.reverse() }) }, [scrollDirection])

Hi Blake, Edit: my below question may not apply --- I thought this was originally your example but it may have been part of Rick's original Codesandbox. I'm having a bit of trouble and was looking to see if my question(s) had been answered before posting. I see in the example that you've created your timeline inside of useEffect. I was refactoring all of my code in order to avoid this. Since you've assigned it to a ref first is it then OK to create the timeline inside of useEffect?

Hi Blake, Thanks for the help! Yes, it's even harder to figure out what best practices are especially in conjunction with a framework like React. I'm able to execute what I want/need to do but it just feels like I'm slopping/hacking it together. For instance, in one component I have over 20 refs so I've tried to switch to defining a ref and then pulling child elements from that but sometimes that ends up being even more convoluted. Maybe Redux is the answer. I will definitely take advantage of your offer, thank you! I will put together a Codesandbox this weekend that highlights some of the issues I've been running into.

I have a few general questions -- each are things I've been running into and I'm just not sure how to best approach it. I build my timelines within my individual components. I sometimes have nested timelines in these components. In just about every project I find myself needing to control all of those individual timelines from a master timeline. What's best practice here? Do I need to restructure how I'm thinking about my project and instead of building any of my timelines in the components, I should instead pass those individual tweens up or can I pass my individual timelines up? Do I need to forget about that altogether and pass every single ref up from my children/grandchildren and build all of my tweens in one central component? In each scenario I would be passing things up to layout.js or my page template depending on the complexity and needs of the project. If I forward refs for a component or an array of refs for the individual pieces of my component to my parent, it becomes far too complex (we have several options to keep the complexity down a bit... such as passing an array of refs or we can pass one ref and crawl through the nodes -- not sure what best practice is here either). One last one ----- is it crazy for me to be nesting timelines inside of timelines? For instance, I will create several timelines for one section/scene as there is a lot happening and it really helps with starting things up in tandem without having to set the position for all of my individual scene elements (a lot less to track); I then place these timelines in yet another overall timeline for that section. Ideally, that would then be placed in yet another master timeline. For the complexity of some of my scenes it feels very intuitive.

@CassieI'm not pinning and scrolling since each viewport/section is essentially already pinned. I'm simulating scrolling which is actually just scrubbing through a timeline so that I can make animations appear and run through their respective timeline(s). Each layer sits on top of another via z-index and transitioning between each can be any number of tweens/masks to reveal the underlying layers. It's much like this great example of GSAP: https://solutions.centogene.com/. @Carl Awesome. Thank you for taking the time to modify this starter. It's extremely helpful. I was thinking about adding everything to a single master timeline but it adds a bit of complexity since you're tasked with forwarding all refs to each child component and each timeline within the current components is fairly sophisticated. I think your second idea is awesome and that's exactly what the example site does except for dummy DIVs they pin and scrub through a WebGL layer. I would simply make my dummy DIVs relative to the duration I need each of my component timelines to run, correct? I'll definitely get a demo together if I request anymore assistance on this. You've already gone above and beyond Carl. I really appreciate it.

I would love to make a demo for this and will see if I can later today but it's difficult since I'm utilizing React. I was hoping there was a simple solution: I have several full height containers which are sections of a page. These are all fixed position so that I can "scroll" through each without actually having the appearance of scrolling while transitioning through each timeline. I have a "master" timeline in each component (section) which pins to the screen. Obviously, the timeline in my second section is going to start when my first timeline starts since the containers are both positioned at the top of the screen (fixed) and positioned behind one another with z-index. I understand that I need to calculate an offset and start the second timeline when I have scrolled through the first timeline. Problem is when I set a time such as 1500, it correctly goes through the first timeline and sticks the second to the screen for just a moment. Scrolling any further completely removes the component from view. If I scroll back up I see some of the scrubbed animation playing backwards (it is in fact scrubbing forward but removed from view). If I set a position start time such as "bottom bottom" everything works beautifully but obviously my second timeline starts at the same time as my first and by the time I've reached it, I'm half way through the timeline. I'll try to recreate on Codepen ---- but maybe I'm just missing something. I'm using these parameters: const EnergyTransitionTimeline = new TimelineMax({ scrollTrigger: { trigger: EnergyTransition.current, pin: true, scrub: 2, start: 1500, end: "+=" + window.innerHeight * 5, markers: true, onUpdate: getDirection, }, }) Update: pinReparent: true resolves the issue, but this looks extremely expensive and it makes the viewport jump slightly just before the animation begins. What would I need to setup differently and why would a start time change this behavior? I can also remove pinReparent and offset the start time of my second timeline and it then correctly pins and starts correctly --- this is a viable solution since I then simply have to calculate and offset each of my timelines but this seems like a really odd solution.