Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Hossein Rahimi

Best practice of using GSAP when scrolling

Recommended Posts

Hello members.
In my recent project, I want to animate something when the user is scrolling.
What is the best practice of using GSAP here?
I'm using ReactJS for my project.

This is an example of my code and I think it can be much better. Cause I feel slow and delayed animations.

 

useEffect(() => {
    const gsap = require("gsap").gsap;
    var _reqID;

    function loop() {
        var doc = aboutParent;
        var fh = footer.scrollHeight;
        var percent = (doc.scrollTop / (doc.scrollHeight - doc.clientHeight - fh)) * 100;

        var update = (percent / 100) * differ + start;
        if (Math.round(update) <= end && Math.round(update) >= start) {
          gsap.to(scrollerSVG, {
            duration: 0.5,
            x: 445,
            y: update,
          });
        }

      // run the loop
      _reqID = requestAnimationFrame(loop);
    }

    _reqID = requestAnimationFrame(loop);

    return function cancel() {
      cancelAnimationFrame(_reqID);
    };
}, []);

 

It's not all of the code. But I think its enough for you to understand my opinion.
I would be thankful if you help me with this.

Share this post


Link to post
Share on other sites

Hi @Hossein Rahimi,

 

I'm not entirely sure what you have happening in your animation, but I believe the slow/delayed feel you're getting may be because of your tween's duration is causing the tweens to stack up (you're telling it to do a new 0.5s tween to a new value on every tick).

 

Instead of this, you may want to consider using gsap's quicksetter method for this: https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

 

The other way would be to define your animation first, and use scroll position to update the tl.progress()

 

I also prefer to use gsap's ticker (https://greensock.com/docs/v3/GSAP/gsap.ticker) over requestAnimationFrame(), but that's a personal preference thing (performance will be very similar)

 

 

 

 

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites

Hi, there are some concepts you should look into:

First one is repaint/reflow of the document. You are trying to read scrollHeight etc. like variables, but this is super slow - so only do this when needed (move logic like this into a resize function)

Second one is "gsap.set" vs "gsap.to" and overwriting tweens. There is a lot in the docs about that.

Good luck :-)

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×