Use request animation Frame instead of gsap

[vin-ni]

No description provided.

[cristidrg]

Hi, I'm interested in contributing to this issue. Do you have any insights on this task before jumping on it?

[vin-ni]

Cool!
I built it on gsap, as the project it's used in already uses gsap. But since there is no easing on the animation (just linear progression), it really isn't necessary.

I played around with different easings but decided to use linear for now.

I did some others tests now, and maybe it could still be interesting to use some of gsaps fancy easings. SlowMo for example gives a nice effect.

Maybe the best way would be to keep both. To use plain animationFrame as default, and switch to gsap Easing if an easing is passed via the options.

Basically we need to rewrite this:

PixelWave/dev/js/PixelWave.js

Lines 93 to 96 in b89da6e

	this.animation = TweenLite.to(this.calculatedSettings, this.animationSettings.speedIn, {currentDistance:`+=${coloumnsString}`,
	onUpdate:this.updateHandlerRunIn, onUpdateParams:[self, true],
	onComplete:this.completeHandlerStart, onCompleteParams:[self, callbackMiddle, callbackEnd],
	ease: Power0.easeNone});

What do you think?

[cristidrg]

As you suggested, I believe using rAF as default is right way; I'm not sure if keeping gsap would be that great since it would add additional chunks of code and increase the size of the snippet.

Regarding the easing, there must be a way of implementing them via rAF; however we can look on that after the rewrite.

I'll look into rewriting the animation with rAF and provide fps/perf comparisons between the old and the new.

[vin-ni]

Cool!