search

vin-ni / PixelWave

Fully customizable pixel wave animation for seamless page transitions.
127 stars 16 forks source link

Use request animation Frame instead of gsap #3

Open vin-ni opened 6 years ago

cristidrg commented 6 years ago

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

vin-ni commented 6 years ago

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: https://github.com/vin-ni/PixelWave/blob/b89da6e34a7f7268e99f21f3a06e3241e6b30c17/dev/js/PixelWave.js#L93-L96

What do you think?

cristidrg commented 6 years ago

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 commented 6 years ago

Cool!