Jump to content
GreenSock

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

Animations break on window resizing (React)

Recommended Posts

Hi there, I am running into an odd issue with my React site and using GSAP. 

 

Website: https://gpstaging.netlify.app

 

For all the scroll based triggers, if I resize the window they will either disappear https://take.ms/6VGoD or not fire their animation when scrolling down the page.

 

It looks like they disappear because an inline style of opacity: 0 and visibility: none is getting applied to them. But I have no idea why and even when I removed all the other components that had GSAP animation applied, the styles keep showing up.

 

Here is a simplified demonstration of the items disappearing once the window get's resized a few times. 

https://codesandbox.io/s/festive-feistel-puiib?file=/src/App.js

 

For the full production code version, please see the below Github link.

https://github.com/GedalyaKrycer/gedalyakrycer.github.io/blob/gsapBackup/gk-portfolio/src/components/Bio/index.js

 

I suspect I am not using the useRef correctly and maybe there is issues with having multiple components that have GSAP on it. But I am not sure how to troubleshoot it. 

 

Much appreciation for any insight. :)

Gedalya 

Link to comment
Share on other sites

Hey gedalya and welcome to the GreenSock forums.

 

There are a couple of main issues here:

  • Your saveStyles() should be inside of your useEffect. It should also use the refs and save the styles of all of the elements whose styles you want to reset on refresh. Alternatively I think using .fromTo()s instead would work.
  • A ScrollTrigger on a tween inside of a timeline doesn't make much sense and is one of the most common ScrollTrigger mistakes. You probably want it to be a standalone tween instead.

I'd set it up along the lines of this: https://codesandbox.io/s/festive-butterfly-d4koh?file=/src/App.js

  • Like 2
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

First of all, your portfolio looks really good, nice work!!! 👍👍

 

In the codesandbox sample you forgot to add the class className="g__body-lg" to the <p> tag.

 

It seems that the issue resides in the fact that the DOM element is not rendered when the saveStyles method runs. If you move that to the useEffect() hook it seems to work as expected. Also you already have a reference to the actual DOM node, so there is no need to pass the selector string to GSAP, you can avoid that extra processing (which is not much though):

useEffect(() => {
  // Save Initial Styles
  ScrollTrigger.saveStyles(leadTxtRef.current);

  const tl = gsap.timeline();

  ScrollTrigger.matchMedia({
    "(min-width: 768px)": function () {
      // Kill animations
      return function () {
        tl.kill();
      };
    },

    "(max-width: 767px)": function () {// Kill animations
      return function () {
        tl.kill();
      };
    }
  });
}, []);

Give that a try and let us know if it works.

 

Happy Tweening!!!

 

PS: Well, what Zach said :D:D:D 

  • Like 3
Link to comment
Share on other sites

Hi @ZachSaucier and @Rodrigo thank you so much for your responses and insight!! 

 

I tried moving the saveStyles into the useEffect and that worked for the body text, but the bio headline text is still disappearing when resizing the window. I did add an overall scroll triggered effect to the body text container, so it fades in, so could it be that is screwing with the title now? 

https://github.com/GedalyaKrycer/gedalyakrycer.github.io/blob/gsapBackup/gk-portfolio/src/components/Bio/index.js#L72-L76

 

 

On my local dev environment I am getting a bunch of visual errors until I scroll down and then back up the page. (5-6seconds starts how I intended it to work, with the body text scrubbing in staggered, once the page is midway scrolled up.) https://drive.google.com/file/d/1p0rFmDu1R4xhP9-C-LjqmxoJOYQUANGv/view

 

However, once I host the built version of the site, most of the glitches go away, except for the Bio title disappearing. 

https://gpstaging.netlify.app/

 

Very odd indeed. 🤔

Link to comment
Share on other sites

Please make a minimal CodeSandbox that shows the issue if you'd like help debugging.

  • Like 1
Link to comment
Share on other sites

Have you tried setting the initial values with CSS (opacity, visibility and transform) and then use regular .to() instances instead of .from()? Also Zach suggested using .fromTo() instances as well, did you tried that?

 

The problem could be that at some point when the new animations are created when you pass the specific break point, the value for opacity is 0 so GSAP creates a new instance that goes from 0 to 0, so nothing happens visually. Also since you mention that it takes some time for the animations to work, the issue could be that each time the matchMedia() method runs you're adding new instances to the timeline, so it gets longer and longer. The point is that the DOM nodes that are being targeted at the start of the timeline are no longer in the DOM, but are kept in memory as references, so this leads to two problems:

  1. The timeline gets longer and longer
  2. Memory leaks

A solution could be to clear the timeline before adding the new instances:

useEffect(() => {
  // Save Initial Styles
  ScrollTrigger.saveStyles([
    bioTitleRef.current,
    leadTxtRef.current,
    pTxt1Ref.current,
    pTxt2Ref.current,
    pTxt3Ref.current,
    pTxt4Ref.current,
  ]);
  const tl = gsap.timeline();

  ScrollTrigger.matchMedia({
    "(min-width: 768px)": function () {
      tl.clear();
      // Add your animations here
      // Kill animations
    },

    "(max-width: 767px)": function () {
      tl.clear();
      // Add your animations here
      // Kill animations
    }
  });
}, []);

In the codesandbox you added in the first post, this seems to work, you'll have to test in your local and production setup to check.

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

@Rodrigo @ZachSaucier I think I got it sorted. :) Using a combo of all your advice (formTo, removing Timelines from some places and adding the tl.clear(), etc) I think did the trick. 

 

Push to my live site and as far as I can tell all the content stays on the screen no matter the width size and the animations fire more consistently. 

https://gedalyakrycer.com/ 

 

Thank you for all your help. 

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