Jump to content
Search Community

GSAP w/Gatsby - Tweens Overlapping

Nitro Interactive test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

13 minutes ago, Nitro Interactive said:

--- any ideas please?

 

Use Vue. 😉

 

I keep asking for some code samples because it's really hard to advise on ScrollTrigger as it involves so many factors, HTML, CSS, layout, and of course React is just full of all sorts of quirks and gotchas. Any way you can reduce the problem to a simple sandbox? We don't need to see an entire project. The simpler the better.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Nothing really sticks out. Is it page changes that are causing the problems?

 

And are you using useLayoutEffect? That can mess some stuff up with SSR.

useLayoutEffect and SSR. How to get warning free usage of… | by Alex Reardon | Medium

useLayoutEffect and server rendering · GitHub

 

The only other thing I can think of is that it's just a hot reloading issue.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Both. Try to do most with CSS. Use set for transforms and other properties that you may need to calculate.

 

2 hours ago, Nitro Interactive said:

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.

 

useLayoutEffect is good for ScrollTriggers and setting other stuff that might cause FOUC. That article I linked to has a nice hook to get around SSR complaining.

 

2 hours ago, Nitro Interactive said:

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.

 

If you're reusing the same page component, then you will probably have to add something to trigger it reset your effect.

 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...