Jump to content
Search Community

requestAnimationFrame vs throttle

rgfx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,

 

Firstly, I read that GSAP uses raF for animation, hence you don't need to use raF while using it, even on scroll functions??  This seems strange to me, as controlling functions outside of tweens/timelines would be aggressive. 

 

For instance, let say am doing something like below.  I am being redundant, isn't this how it should be done? Let's say it was function with more complexity.  Before you show me some trick to change Bg color with yoyo and a function inside bgColor. Even though I would be curious.  :)

See the Pen 8387e01af9d92e4d8b742a87c851b8a6 by rgfx (@rgfx) on CodePen

 

const random = (min, max) => Math.floor(Math.random() * (max - min) + min);

const randomColor = () => {
  const r = random(0, 255);
  const g = random(0, 255);
  const b = random(0, 255);
  return `rgb(${r}, ${g}, ${b})`;
};

function changeBgColor() {
  TweenMax.to(".first", 0.2, {
    backgroundColor: randomColor,
    ease: Linear.easeNone,
    onComplete: () => {
      window.requestAnimationFrame(changeBgColor);
    }
  });
}

window.requestAnimationFrame(changeBgColor);

 

Secondly, Found this pen on 

See the Pen pgOKKw by dcorb (@dcorb) on CodePen

when scrolling. Just wanted to make I did my analysis correctly, it appears that raF is much more performant. 

 

Let me know, thanks. 

 

 

 

raFvsThrottled.jpg

Link to comment
Share on other sites

I just wrote something about this. A general purpose throttle function can be useful for a lot of things, like making a bunch of ajax requests. However, the problem with a lot throttle functions is that they don't fire the callback at the end of the throttling phase, which can result in the last call being skipped. That can be really bad for like a resize. 

 

In general, using requestAnimationFrame to throttle repeating events like resize, scroll, wheel, keydown, mousemouve, touchmove, and pointermove is a good approach. I don't think a lot of people realize how fast some of those events can fire. For example, if I do a 10 finger swipe in Edge, it will fire about 15 kajillion pointerevents. It does that for a reason. To provide better accuracy when using a pen, but you definitely don't to respond to all those events.

 

 

 

 

 

  • Like 6
Link to comment
Share on other sites

48 minutes ago, rgfx said:

Before you show me some trick to change Bg color with yoyo and a function inside bgColor. Even though I would be curious.  :)

See the Pen 8387e01af9d92e4d8b742a87c851b8a6 by rgfx (@rgfx) on CodePen

 

This will work with GSAP due to way it parses color values that are numbers. 

 

TweenLite.to(element, 1, {
  backgroundColor: Math.random() * 0xffffff
});

 

 

Take a color like #bada55. It's rgb value is 186, 218, 85. You should be able to copy and paste that into your console to test it out.

color = 0xbada55;

r = ((color >> 16) & 0xff); // 186
g = ((color >> 8) & 0xff); // 218
b = (color & 0xff); // 85

rgba = `rgba(${r}, ${g}, ${b}, 1)`;

 

 

 

  • Like 5
Link to comment
Share on other sites

@OSUblake That bitwise solution is really cool man,

 

Really wanted to lay down the foundations before I get crazy with the scroll animations. Thanks for putting me at ease. raF it is. 

 

About resize functions. I really don't like srcset and pictureFill for responsive images. Srcset has scaling down issues, and picture fill is like  2000 lines of code. So I decided to make my

See the Pen zPbJra?editors=1010 by rgfx (@rgfx) on CodePen

, my solution still needs a placeholder, but am almost there. Its not like srcset or pfill has good lazy loading either. I was messing around with various resize functions I found this one

 

let timeout = false;

window.addEventListener("resize", function() {
  clearTimeout(timeout);
  timeout = setTimeout(yourFunction, 250);
});

 

I like the idea calling a function at the end of the resize seems better than constantly repainting. I imagine the majority of time a resize is in mobile going from portrait to landscape.  What do you think?

 

Saw your pen today 

See the Pen VMyeqZ?editors=1010 by osublake (@osublake) on CodePen

 amazing. Did you make the illustrations?

 

 

 

 

Link to comment
Share on other sites

Looks good. I was using rAF as "in general" statement, so that's fine for resizing. Resizing really doesn't need to be called 60 times a second, like with mouse or scroll events, so it's ok to have a longer delay.

 

And I didn't know my demo was up on Codepen. I didn't make those images. I think they're from this site. They change them every year.

https://ozorafestival.eu/

 

 

 

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