Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kovsky

Animation do not trigger on first render

Recommended Posts

Hi,

I am currently trying to animate text with scroll trigger + gsap scroll smoother on a Gabtsy(React) website.

My problem, is that on the first render, the animation doesn't work properly, it just goes from 0 to 1 opacity without transition, but if i just had a simple console.log in my code, i got a second render, and then everything is fine. 
Here an extract of code and a link to my github repo. I am sorry it's hard for me to build a minimal code demo for this proiblem.

Thank you all, have a great day.

 

https://drive.google.com/file/d/1FG_d6FBdlIiNnWln9YPY__sCExuO1m51/view

 

 
  useEffect(() => {
    const splitIntroPresentation = new SplitText(refIntroPresentation.current, {
      type: `lines`,
    });
 
    new SplitText(refIntroPresentation.current, {
      type: `lines`,
    });

    gsap.from(splitIntroPresentation.lines, {
      scrollTrigger: {
        trigger: "#wrapper-svg",
        start: ' center center',
        markers: true,
      },
      duration: 2,
      y: 200,
      ease: "power4.out",
      delay: 0,
      skewY: 10,
      stagger: {
        amount: 0.4,
      },
    });
 
    console.log('test')
 
 
  }, [])


Complete file here

https://github.com/ptrkvsky/drawme-web/blob/main/src/features/home/components/SectionPresentation/index.tsx

Link to comment
Share on other sites

I don't know anything about React, but it seems there has been an issue (especially with from tweens) with React 18 and strict mode. Maybe this thread can help.

 

  • Like 1
Link to comment
Share on other sites

Yes indeed - anytime I see a .from() tween in a React useEffect(), I immediately think about the React 18 weird behavior where it calls it TWICE (in strict mode which is the default). Totally unrelated to GSAP.  See the explanation here: 

 

Link to comment
Share on other sites

Thank you for the assistance, but i am on version 17.0.2 not 18

Link to comment
Share on other sites

I don't see anything in your code that would control opacity. And unfortunately we can't really troubleshoot without a minimal demo that clearly shows the issue. It sure sounds like something with your local build tool(s). If you still need some assistance, please provide a minimal demo - you can use CodeSandbox if that's easier. Here's a starter template with Gatsby: 

https://codesandbox.io/s/gsap-gatsby-starter-8nf8r

Link to comment
Share on other sites

Thank you Jack, 

I just tried to import ScrollSmoother in your template, but it is not available, how can i use ScrollSmoother in  this template ?
Thank you

Link to comment
Share on other sites

Hey there! 


Sorry about that confusion, the GSAP package in that template is just the public plugins.

For members only plugins you'll need to use our GSAP-trial package instead. Check back if you have any issues

https://www.npmjs.com/package/gsap-trial

  • Like 1
Link to comment
Share on other sites

I'm not at all familiar with Gatsby or React, but don't you have to put your code inside of a useEffect()? Otherwise, won't it execute every time that component renders? That would certainly explain the multiple triggers, and if you're doing .from() animations it would look like they don't work when you execute them multiple times. The first .from() would jump the values to the end and start animating back to the CURRENT one...and the next .from() that's called right away would again render immediately and start animating back to the CURRENT value which at that point is identical to the end value (thus no movement). It's a logic issue unrelated to GSAP. 

 

Your demo had a bunch of errors and warnings in the console too. 

Link to comment
Share on other sites

This should help get you going.
 

Link to comment
Share on other sites

Thank you Jack, useEffect was indeed missing in the DEMO and everything is working as expected, but my code still doesn't work in my project ^^


Thank you sir Cassie 

 

  • Haha 1
Link to comment
Share on other sites

Hahaha, you've had two out of 6. Minimal demo request and a React article link.

This is never a nice bit of news to deliver - But I'm not sure how we can help if it's working in the demo but not in your project. This is where the game of 'spot the differences' starts. You're going to have to step through your project code and your demo code and work out what the difference between them is.

This community may be able to help more with the React side of things?

Link to comment
Share on other sites

Yes thank you i'll start the game :) and thank you for the discord. I'll keep you updated

Link to comment
Share on other sites

  • 2 weeks later...

Unless you can provide an example for us to look at we can't really advise I'm afraid. It's impossible to debug from a video alone.

Sorry

Link to comment
Share on other sites

Sorry, we just don't have the resources to look through live sites or github repos. Minimal demos are far more helpful

Link to comment
Share on other sites

As I said in that tweet you linked to! 
 

Link to comment
Share on other sites

Hi Cassie,

I've finally found that i can import a project into CodeSandBox 🥳

I've made a little bit of cleanup, in my index page and kept only 2 sections (to be able to scroll).
The animation that doesnt work propertly is defined in SectionPresentation.tsxcomponent (https://codesandbox.io/s/intelligent-gates-pqu5jc?file=/src/features/home/components/SectionPresentation/index.tsx)

I hope this is minimal enough so i can make your whole damn day. 🤗
Let me know if there is anything else i can do.

Thanks a lot.

Link to comment
Share on other sites

I'm pretty sure i didn't add  this console.log, and it appears in console as expected, is it yours ? 

 

image.thumb.png.38835093fb67b2d7207adab10e809a38.png

 

 

and i assume this is the marker you are talking about

 

image.png.d4f8d73a892a3d09270925aa33c9759c.png

Link to comment
Share on other sites

I managed to load it! But I'm not sure what the issue is I'm afraid.


It looks like a scrollSmoother/scrollTrigger thing but theres just far too many files in here for me to easily run through it

 

Maybe someone else will be able to figure it out, but you're far more likely to get help if you strip it way way way back. Currently I'm having to sit and wait for the build in between changes which is taking quite a while.

https://codesandbox.io/s/cocky-sid-36rt93?file=/src/features/home/components/SectionPresentation/index.tsx

image.png

Link to comment
Share on other sites

That's a little step in the right direction though maybe -  I'd suggest stripping it right down to the bare bones then adding scrollSmoother and then we can try and see what's going on without all the rest of the periphery stuff.

Link to comment
Share on other sites

Ok i'll do more cleanings into those files, thank you for watching 

  • Like 1
Link to comment
Share on other sites

Ok i did some cleaning into those files and let me clarify the organisation.

  1.  ./gatsby-browser.js or ./gatsby-ssr.js setup a provider for Redux
  2. ./pages/index.tsx  display my layout and 2 components
     image.png.1425249b6bca34eeba1ae98dd2016f3f.png
  3. ./components/Layout.tsx setup the css and js style container + add Scroll Smoother
     image.png.cc53e6e6dcb0815035b8380bc68fc7e4.png
  4. ./components/GsapScroll.tsx  is just a wrapper for ScrollSmootherimage.png.c12de80722c22ad7d3f87792decd842d.png
  5. Finally ./features/home/components/SectionPresentation.tsx where the animation is setup  image.thumb.png.2a1a9799802d0920d3d0f9086bfd0a01.png

Thats all the files used in this demo. I hope it's clearer.

https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx

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