Jump to content
Search Community

Animation do not trigger on first render

Kovsky test
Moderator Tag

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

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

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

  • 2 weeks later...

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