RoughEase for JS?

[nicolasbully 0 Likes (Newbie)]

Hi everyone!

 

Let me start by saying GSAP is awesome.

I was wondering if anyone had ported the RoughEase library from AS to JS, or something similar to that? I'm working on a project where I need to randomly affect elements over time (smoothly), and I think RoughEase would be amazing for the job. More specifically, I'm trying to replicate some old film effects – grain, shifting picture, flickering bulb, etc.

My current solution is to start a tween for a random duration/value, then delay the next tween by a random amount, and have that process loop, effectively creating a sort of randomness to the flicker. I suppose it works, but it doesn't look great yet and doesn't feel as elegant as the RoughEease soltuion. Thanks in advance!

[GreenSock 8,117 Likes (Superhero)]

Wow, you've got good timing. I was just working on this last night and today. 

 

I have attached an updated version of EasePack that includes RoughEase. Please note that in order to make it more user-friendly, the way you pass in customization parameters is different than it was in AS3 (the AS flavors are getting updated with the new API style too): instead of accepting 6+ regular function parameters and trying to remember which one was for which property, you now pass in a single generic object {} with any properties that you want to customize. For example:

 

var rough = new RoughEase({strength:3, points:50, clamp:true});
TweenLite.from(element, 2, {opacity:0, ease:rough});

And it uses the standard config() method now from v12, just like SteppedEase or SlowMo or Back or Elastic:

 

TweenLite.to(element, 2, {x:500, ease:RoughEase.ease.config({strength:3, points:50}) });

I've included updated docs in the zip attached. I'd love to hear what you think.

RoughEase.zip

[nicolasbully 0 Likes (Newbie)]

THAT. IS. AWESOME. I'll spend some time with this and let you know!

 

I was using Perlin noise in the interim to generate the randomness on TweenLite.tick, but I'm not entirely convinced it's the most efficient/best-looking method:

See the Pen rvuDo by hellonicolas (@hellonicolas) on CodePen

 

Thanks so much!