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?