Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nicolasbully

RoughEase for JS?

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

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×