Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alexandra Spalato

Reveal animation in react / gatsby

Recommended Posts

Hello, I have taken inspiration on this  to create an animation react hook.

I joined the file here

I have deployed the demo here https://starter-gsap.netlify.app/

and as you can see all the content disappear...until I resize the window

here is a short video showing it https://share.getcloudapp.com/JruLWQzN

So it seems that is only fires on resize...how to fix this ?

 

 

useGsapReveal.js

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hey Alexandra. It seems to be working for me in your deployed site. Do you get the same consistent behavior across different browsers and devices that you have? Are you making sure that you're using the latest version of GSAP and ScrollTrigger (3.3.3)?

Link to comment
Share on other sites

Yes I'm on mac and it fails in every browser, until I resize the window

I asked a friend, and it's the same for her

on which browser / computer are you ?

I was on 3.3.1, and just updated to 3.3.3, but it continue failing the same way

Link to comment
Share on other sites

Hi,

 

This could be related to some out-of-sync GSAP instances with the initial state of your elements. When I first load the page (Win10 - Chrome Latest) I can see the content then it disappears. After that, as you mentioned, the animations work if I either refresh the page or change the browser tab (which is odd). Same thing happens when viewing a single post.

 

My guess is that the GSAP instance responsible for showing the articles is firing before the initial set-up is completed and somehow something in the resize event handler is re-triggering this GSAP instance.

 

Unfortunately debugging a live site is far too complicated. If you could provide an isolated case using Codesansbox to take a look at it, it'll help us a lot.

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Hello,

I have setup a react codesandbox, and the same problem happens

https://codesandbox.io/s/91ct7

to see really the problem go to the full screen url https://91ct7.csb.app/ as sometimes it works in the sandbox until you reload the browser

 

It doesn't happen in basic html 

See the Pen QWyGNZj by alexadark (@alexadark) on CodePen

 

it also happens on other animations onEnter, for ex here https://cadell.netlify.app/more

I did a batch animation on the 3 boxes in the middle , taking example here 

See the Pen zYrxpmb by GreenSock (@GreenSock) on CodePen

like that 

useEffect(() => {
    if (typeof window !== `undefined`) {
      gsap.registerPlugin(ScrollTrigger)
      gsap.core.globals("ScrollTrigger", ScrollTrigger)
    }
    gsap.defaults({ ease: "power3" })
    gsap.set(".confWrap", { y: 50 })

    ScrollTrigger.batch(".confWrap", {
      onEnter: batch =>
        gsap.to(batch, {
          opacity: 1,
          y: 0,
          stagger: { each: 0.15 },
          overwrite: true,
        }),
      onEnterBack: batch =>
        gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
      onLeaveBack: batch =>
        gsap.set(batch, { opacity: 0, y: 100, overwrite: true }),
    })
  }, [])

 

  • Thanks 1
Link to comment
Share on other sites

You can get the same effect if you use delay the creation of the ScrollTrigger in the CodePen. It seems like ScrollTrigger is doing its onEnter check on page load but not when new ST elements are created after page load:

See the Pen JjGbNYW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Adding a .refresh() after it is created seems to fix it:

See the Pen XWXNRdK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Though that seems non-optimal to me. We'll see what we can do.

  • Like 1
Link to comment
Share on other sites

Great, thank you!

the refresh fix it totally ?

am I allowed to publish these type of hooks with gsap on npm ?

it will be usefull to reuse accross projects and of course to share.

I imagine I will need the business licence, to use it in our premium gatsbyb themes 

Link to comment
Share on other sites

2 minutes ago, Alexandra Spalato said:

the refresh fix it totally ?

You tell me :) It seems to. We may end up changing how ST works to make sure that sort of thing happens automatically so you don't have to manually call .refresh() after. We'll see.

 

3 minutes ago, Alexandra Spalato said:

am I allowed to publish these type of hooks with gsap on npm ?

Sure. We do ask that you mention GSAP's licensing somewhere if you do that.

 

4 minutes ago, Alexandra Spalato said:

I imagine I will need the business licence, to use it in our premium gatsbyb themes

Yes, a commercial license would be necessary for that :) 

Link to comment
Share on other sites

So I also need the licence to publish hooks with no club plugins ?

I was waiting to publish the themes to buy it

 

Link to comment
Share on other sites

If you are selling a product like a theme to multiple people then a commercial license that comes with Business Green is necessary. The appropriate level of Business Green is dependent on how many developers use GreenSock tools.

 

If you're just publishing GSAP code that doesn't make use of any Club GreenSock features via npm or something you don't need a commercial license but we do ask that you mention GSAP's licensing since it's not MIT licensed like many npm modules. Does that make sense?

Link to comment
Share on other sites

Sorry about the confusion there. Yes, there was a bug that would happen when you create a ScrollTrigger AFTER about 0.5 seconds beyond the initial load and that ScrollTrigger didn't have any animation associated with it. I have implemented a fix in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Better? 

  • Like 1
Link to comment
Share on other sites

Great, so in the next release, no need to refresh right ?

btw, the problem is only on react projects, so the codepen has no problem, it happens only on the codesandbox one which is in react.

it's good as I have learned about refresh() on the path :-)

Link to comment
Share on other sites

4 minutes ago, Alexandra Spalato said:

Great, so in the next release, no need to refresh right ?

 

Correctamundo, althought it's not "bad" to refresh(). It just requires some extra processing.

 

5 minutes ago, Alexandra Spalato said:

btw, the problem is only on react projects, so the codepen has no problem, it happens only on the codesandbox one which is in react.

 

I suspect that's only because of the delay that React causes on the initial load (but I'm not a React guy, so I'm not positive). 

 

Enjoy the tools!

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.
×