Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jesper.landberg

Class for triggering GSAP animations on scroll

Recommended Posts

Hi I made this little class, I have had npm/webpack issues with ScrollMagic, and felt it was a bit overkill for my needs, so I made this little class now. Would be nice with some feedback, how it could be improved and so on. Maybe more general JS related than GSAP related, but since I'm only using GSAP and trying to make the class around GSAP it would be nice with ur feedback.

See the Pen GBWqRz?editors=0010 by ReGGae (@ReGGae) on CodePen

Share this post


Link to post
Share on other sites

I haven't tested it fully, but on first look it seems easy enough to use for doing simple reveals when stuff gets into the viewport (90% of what people use ScrollMagic for).  Thanks for sharing!

 

Share this post


Link to post
Share on other sites

Looks good!

 

You can do this instead of using bind if you're using Babel or TypeScript. I think it's cleaner, and it should technically run faster.

 

class ScrollAnimations {

  constructor() {
    
    // 'this' will work without the use of bind
    this.el.addEventListener('scroll', this.onScroll, false)
    this.rAF = requestAnimationFrame(this.run)
  }
  
  onScroll = () => {
    ...
  }  
  
  run = () => {
    ...
  }
}

 

 

And here's a simple of example of how you can use the scroll position with a timeline.

 

See the Pen a633d0c9e6e2b951496d7f1eb4fd8fb6 by osublake (@osublake) on CodePen

 

 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

Great example as always @OSUblake .

 

I was wondering about one aspect of it, let me know if I'm understanding it correctly.

 

if (!requestId){...} is throttling the animation of the tl's playhead to only execute when the browser is ready to paint a new frame so the scroll event listener doesn't fire the function too frequently?

  • Like 1

Share this post


Link to post
Share on other sites
11 hours ago, Visual-Q said:

if (!requestId){...} is throttling the animation of the tl's playhead to only execute when the browser is ready to paint a new frame so the scroll event listener doesn't fire the function too frequently?

 

Correct. The browser calls requestAnimationFrame right before it's about to paint, so responding to the event before that is almost always pointless as it could get called again. I know Chrome tries to optimize events so that they fire right before the animation frame gets called, but that's Chrome. And then you have Safari and Edge which actually call requestAnimationFrame at the wrong time, but that probably won't be an issue as long as you're not manually updating element styles.

 

Edge says it's fixed, but it hasn't shipped.

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15469349/

https://bugs.webkit.org/show_bug.cgi?id=177484

 

 

  • Like 5

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.

×