Nitro Interactive

Hello, We have a project built in Gatsby.js which is nearing completion and we're interested in hiring a freelancer to have a second look at a few issues that persist. We have a page made up of sections and each section consists of many ScrollTriggers. We have the individual animations looking quite good. We're attempting to also integrated the ScrollToPlugin in order to snap the user between sections, which also works, but when animating the 'window' between section it is extremely choppy. We've loaded the UMD distribution files, utilized several React hooks (useEffect, useLayoutEffect, useCallback). We are trying to overwrite all tweens, kill all other tweens. You name it, we've tried it --- the kicker is that it does work, almost beautifully, but as is, we cannot launch the site. We also have a side navigation which makes use of the AnchorLink module. We need to have this converted to ScrollToPlugin so that we can add an offset (currently the anchors break the animations and cause overlapping --- which is obvious, they are currently positioned where the other ScrollTriggers are positioned to pin). Lastly, we're having issues with elements becoming visible that should not be, when resizing, refreshing. We're invalidating the animations and killing all of the ScrollTriggers within our useEffects. This one is not so simple to describe without seeing it. We utilize Bitbucket so we could definitely give you access to the repository to have a look before you commit to anything. If you'd like to jump on a phone call or chat via Slack --- or --- whatever works for you, let me know. Even if you do not have the time to devote to the project and you think you know how to resolve these issues --- definitely message me because we can also just do a consultation. We're quite capable, but we've tried everything we could think of. We've also tried to post in the forum and have gotten lots of great help but the issues persists. For us to really resolve the issues we need to provide a Codesandbox, and we have when possible, but it's just not feasible to build a distilled down version of this; there are far too many moving parts. Timeframe: No timeframe, we can begin with a consultation. I would like to speak with you as soon as possible though! If we find that the scope is more than we can handle or you do have time to just jump in, you can estimate how much time you think will be required. Compensation: Name your price; hourly or fixed

I think we just need to know (I promise not to continue without a test case setup!!!!) how we should be setting our initial element properties: - CSS - gsap.set() - both It may be that .set() is being run through only once because they are nested inside of a useEffect() with an empty dependency. I'll try another way to create a test case.

It seems like elements that have a property such as position or autoAlpha initially set with set() are not being reset when the page state changes. Should we be setting the initial position and/or other CSS attributes with set(), CSS or both? Properties initially setup on stage with set() or fromTo() becomes discombobulated. We're not use useLayoutEffect() --- we stick to useEffect and useCallback(). I really do think just from the appearance that the initial state is not being reset for the element on the screen/stage.

I do love Vue ---- will definitely be using Nuxt for future projects. React is extremely powerful and versatile, no denying that, but it's a wreck. I won't get into it, I'm sure you know based on your response. I'm trying to replicate in a Codesandbox but I think the issue may be related to Gatsby. I was just wondering if there was anything I may be missing; such as invalidating my ScrollTriggers. It behaves correctly with vanilla React; so maybe will migrate the project.

I'm having a difficult time of creating a Sandbox for this one and maybe it's just as simple as invalidating my animations (trying this but maybe something similar that I'm missing). In general, when running through a page of ScrollTriggers/tweens for the first time, they work fairly well. If we try to reverse the direction, move too quickly through them, resize or refresh, everything becomes chaos. I'm killing off all of the tweens within my useEffects. I'm also invalidating all of the ScrollTriggers ---- it seems like anything I'm setting on the stage initially (with .set) is not resetting or it's moving position in the timeline. Are there any other things I can do to reset all of the tweens and re-run the set states? I don't think it has to do with SSR because this is occurring in development before the pages are compiled into SSR pages. I've built a demo in Codesanbox but it's nearly impossible to replicate all of the details of the project and so far I haven't been able to replicate. However, it's also not Gatsby and that could be the issue. I'm even thinking about migrating the entire project to vanilla React --- any ideas please?

@Shaun Gorneau I liked your approach here however there is a delay when the objects are wrapped; it might have to do with the screen width. Could you apply this same logic with a modifier?

I apologize in advance if I am missing something obvious. I checked to see if this plugin was combined/included with another but I'm not seeing that information on the ScrollProps docs --- is it right in front of my face? Order by 'Name', ThrowPropPlugin.js --- I checked my membership level twice thinking maybe it didn't come with my membership level.

Well, the issue you had originally helped the other gentleman with was a hot loading issue, his ScrollTriggers were working ONLY when hot loaded --- mine was different. I was looking for a React custom scrollbar which would work well with ScrollTrigger. We wanted to very selectively use overflow: hidden during our tweens and couldn't with the native scrollbar (just didn't look production ready). I ended up creating my own custom React scrollbar that utilizes hooks and the context API. I created it in a sandbox. Once I finish setting it all up I'll create a thread with that Codesandbox. It might help others that are looking to incorporate a custom scrollbar with GSAP/ScrollTrigger.

Well ---- I saw this thread: While you didn't post in that one I figured this user opened a new thread at some point and you assisted them because they have several Codesandboxes with this setup where they cannot get the ScrollTrigger to fire without hot loading. I can see they were using Refs correctly and useEffect simply was not latching on; some ordering of how things were loading/firing. Then you have a form where you corrected that using useImperativeHandle via forwarded Refs in a main component which happens to be exactly what I need. I tested it and it seemingly works great without any side effects, but I was just concerned I would get through a ten hour refactor only to find it didn't work quite how I expected since I had never even heard of the React hook. This ended up not being the answer to our prayers --- smooth scrolling uses a transform for the scrolling so hiding overflow doesn't do anything. We need overflow hidden to jack the scrolling while we have a tween going so that the user doesn't jump into the next one too quickly. I guess we can setup some logic that kills off the tween but overflow hidden works beautifully. We just need to do something about the scrollbar popping in/out; that was the purpose of using a custom scrollbar.

@OSUblake I've really looked at your example here: https://codesandbox.io/s/s84ki I've set this up in my project, but I have a tremendous amount of code to refactor. My project is setup the same exact way as the above example except that I have 20+ components with 20-30 ScrollTriggers each. I just tested this and it works great but I have to setup forwardRefs and imerpative handling throughout many many timelines. I know you cannot say for sure as every project is different but was this the only method you found to use ScrollerProxy with this smooth-scoller setup between parent/child components?

Yes, that's the thread I saw just recently. I also looked at this potentially solution that Blake helped on that users smooth-scroller: https://codesandbox.io/s/s84ki It looks like this might be the best route but in many cases we have many different scrollTriggers within many different timelines across many different timelines and I'm really not certain if we need to setup ScrollerProxy just once in our main component or for all of our ScrollTriggers. Edit: we just got Blake's example working in our project, but none of the ScrollTriggers across the project are functional so I guess that answers my question. We need to connect every single ScrollTrigger via scrollerProxy, or at least it needs to be within each child component.

Perfect, this is really good advice. I began setting up these defaults in my main layout.js file --- so I believe that would be scoped but this will ensure it's properly loaded everywhere it needs to be.

Context: We are working with fairly complex ScrollTriggered timelines that tend to overlap if a user scrolls too quickly. We know we can add logic to check if a tween or timeline is still tweening so that we can kill it off gracefully but this tends to get extremely convoluted. Long story short --- our answer to these issues is to set the overflow to hidden when a triggered tweens begins to jack the users' scroll functionality and set it back to auto/initial once the tween has completed so that the user regains controls and is able to make their next move. This makes the stories we're trying to unfold extremely consistent and beautiful; users experience the same exact story unfolding no matter how they are using their input device. I get the sense on these forums that scroll jacking is considered poor practice --- but I beg to differ, used properly it's a tremendously powerful tool. If abused, it will definitely lead to a poor experience, but when you have a series of short sequences that makes the entire experience, you definitely want the user to have the chance to see these things as they were meant to be seen; a state could also be set so that users are only forced to view sequences in their entirety their first walkthrough. Question: Are there any custom scrollbars that work well with ScrollTrigger? We have yet to find one and in order for our solution to work we need to use a custom scrollbar (we can't have the scrollbar popping in/out on each tween). We're utilizing React for the majority of our projects. I saw that Zach posted a custom scrollbar created in GSAP which may work. I think the only thing it was missing was Draggable; but that would be easy enough to add.

I am in fact setting global defaults with a leading 'gsap.defaults()'. I was thinking these defaults were scoped to each component. I did not realize I could also set defaults specific to each timeline. Perfect.

I saw in the documentation that it does not matter how many times you import and register GSAP plugins; I'm doing it for all of my components where I use it. It gets loaded up to 12 times on one page (12 child components in the page, each using GSAP). Does it matter how many times you set GSAP defaults within each child component? Settings defaults in one seems to impact the other components. Setting a default duration changed the duration of all tweens (it made them slower) across all components throughout a page. Each tween has a duration set, so why would the default override the duration set within the tweens? It's a default, shouldn't it work the other way around?

Thanks for the demo -- this is actually exactly how I started (not seeing the demo), but with having the containers fixed. In my mind, this was the best method but there was some challenges with having each section also have scrollable parts with many of it's own ScrollTriggers. I have some paths forward -- thank you again for your time! I'm keen on fixing the method I have in place since it does ***almost*** work. Something is obviously causing it to skip and seeing ScrollTo fire a over and over leads me to believe that's where the problem lies; a problem like this that is almost temperamental is extremely difficult to track down.

@OSUblake would you mind giving me a really brief run down on how I would use ScrollTrigger's pinning between containers? I've used it for labels. I thought I had the issue resolved, but it is extremely buggy. It worked well in Firefox for a bit, then stopped --- it did the same in Chrome when disabling different things. It was a huge mistake to go with a SSR framework w/GSAP, which is a shame because the site is animation intensive and we're too late in the game to switch to just React or Next.js. Edit: Sorry, I sent this just as you were sending your reply. I thought removing Canvas had resolved the issue. I disabled/enabled it several times and tested each time; it was the deciding factor, but once I went back and rebuilt the site and tested again --- the issue returned. I then removed everything again and tested with UMD and all of a sudden it worked again. It's just extremely buggy.

What ---- sorry for the multi post, but I just tracked down the issue after 10+ hours. It's so unlikely that I don't get it yet, but I had a Canvas with a THREE.js starfield and when I comment out that canvas, ScrollToPlugin behaves correctly! Does that make any sense at all? The THREE.js scene is using useFrame. It's only affecting Chrome as well --- in Firefox it works perfectly. If I use UMD; it works in Chrome. Wow.

@OSUblakeI switched to useLayoutEffect, ensured I was killing all tweens. I had this already set but was also killing off ANY tweens attached to window. I switched to UMD as well and still get the same behavior unfortunately. I thought this was a hint, but maybe I'm wrong --- shouldn't this fire only once since we already know the destination; it shouldn't be updating as it's animating through the tween right? I'm seeing this: If you're out of ideas, I'm definitely out of ideas. I can switch to ScrollTrigger snapping; I think it will work.

No real reason for using ScrollToPlugin over the ScrollTrigger snapping feature. I saw a demo created by Zach that accomplished what we needed (snapping to full height containers while allowing ScrollTriggers/tweens in between), and went with it. I can visualize how snapping could work; if I'm unable to resolve the issue, I'll definitely pursue that.

@OSUblake I really appreciate you taking the time to look at the demo/video and offer up some guidance. Thank you. I'm looking at these possible resolutions now ---- console logging the pageYOffset w/ScrollTo appears to show a big clue. I'm seeing it fire every refresh cycle even though useEffect has an empty input value and should only be firing once. I'll report back with my findings.

In this demo it works perfectly as well. If you scroll between sections 1 and 2 while continuing to rapidly scroll your mousewheel, the tween ScrollToPlugin handles, completes without the viewport jumping (this is the desired behavior): https://codesandbox.io/s/bold-margulis-yo9o5 This is the exact same setup used in our React Gatsby project which I cannot fully replicate on Codesandbox. In our development build, if you keep scrolling while ScrollTo is animating between panels, it jumps because it allows you to move the scrollbar/viewport. If you overscroll before ScrollToPlugin begins it's tween action, it also jumps before continuing to tween, any other movement will continue to allow the viewport to jump until the tween has finished. In the above demo, it doesn't allow you to move away; it "jacks" the scrollbar. It seems as ScrollToPlugin was designed to disallow scrolling while in progress, but for whatever reason that is being bypassed in our build. It's definitely not a ScrollTo bug, but it is something that conflicts with the ScrollTo behavior. We've literally stripped the project down completely so that it matches the above demo. We even removed normalization and absolutely all styles unless Gatsby applies some of their own --- such as overflow settings (overscroll-behavior, etc.). Do you guys offer "premium" paid support where you'd be willing to review a staging site? Edit: I made the tween longer in the demo so you could see exactly what I was talking about --- it "jacks" the scrolling through the duration of the tween.

Hi, Hopefully this ends up being a very simple question that does not require a Sandbox example (we're utilizing react). We're a big fan of ScrollTrigger and ScrollToPlugin and we're combining the two. We would like to do full-screen transitions much like fullPage.js. It looks like we can achieve this very easily with ScrollToPlugin. This is what we're referencing: https://codepen.io/GreenSock/pen/abdNxEJ When we setup the exact same demo in React (with the exception of wrapping it with useEffect()), we do get the desired animation firing and ScrollTo moves from panel to panel ------ but, if we continue to use the mousewheel during the animation, or scroll too much initially, the viewport bounces up/down erratically -- our scrolling is conflicting/fighting with the scrollToPlugin animation. This doesn't happen in the demo. Ideally, each panel would act as the viewport was fixed while the animation is occurring; this is exactly how the demo behaves. We set it up identical to the demo, with autoKill, same easing, etc. We're also adding an empty input dependency within our useEffect so that it's not firing on every tick. Could this be due to GSAP and/or ScrollToPlugin version? We're looking at that possibility now. The demo is absolutely identical except for the fact that it's in React and the ScrollTrigger is being created within useEffect. Kind Regards

Hi Mikel, Thank you very much for taking the time to build a demo. This is a completely different take than what I had thought of and definitely gives me more to learn from. You're adding an event listener to each tween and I think that will work. I can attach these tweens to a timeline and have it looping when the user isn't interacting with it? It doesn't have to start back up but I wanted to have it looping through until the user interacts with it for the first time.

Hi, I began using GSAP a few days ago. It's great and I am learning new things by the minute. Having a lot of fun. I'm stuck on something and I am probably overthinking it and making it far more difficult than it needs to be. I have three timelines, and it can probably be consolidated down to one -- not sure yet. I want the animation to play through, which it does now, but I want to be able to jump to each arm/selector of the animation as the user clicks on them. If you wait for the initial timeline to loop through, you can then fire off the animation by clicking on each label for the respective selection/arm. I understand that I can stop the initial timeline from playing and jump to my next selection/arm, but I want to be able to allow the first animation to finish a cycle (one cycle is the arm filling in and retracting) before jumping to the next. Here is a demo: https://codepen.io/steve-giorgi/pen/QWybmRj I was hoping I could just pass the user's selection through and skip to that selection, but I can see that when I create my loop, the entire timeline is queued up and begins to play from start to finish . I created three timelines because I was going to have one always playing through the selections. One for the user's selection "In" that stops at a specific point and the third to play that selection "Out" when the user makes a new selection or the animation continues on it's own. Again, having the animation continuing on after a selection is made is not all that important; I am pretty sure I could use a callback onComplete after the user makes their selection to achieve this piece. I have experimented with tweenFromTo() and related functions along with labels to try and jump through the animation. I have also added if statements for isActive() so I can stop a currently playing timeline and start a new one, or potentially the same one, if I can jump to the correct position. I have left this code intact at the bottom. Edit: I think my problem here is that I am looping through and creating the timeline in one shot -- so that I can pass my IDs through. I cannot stop the loop from iterating through all six passes because it's already queued up. I believe as much as I do not want to do it that I should create tweens for each arm/selection"; I could then just label them 1-6. I could then scrub through the animations by passing my ID through to the function I wrap my timeline in. I was trying to consolidate my code but I think it ended up making it far more complex in this case. No?