SteppedEase with template like RoughEase

[Tahir Ahmed 93 Likes (Contributor)]

Probably a weird feature request but would it be possible if SteppedEase could utilise similar functions such as template in RoughEase?

 

The scenario is that I want to use SteppedEase but want the stepping to start to happen gradually and by the end of the animation, reach the highest point i.e. kind of like what Expo.easeOut equation produces.

 

The closest I could get was to use RoughEase but it creates a rough animation, as it is supposed to.

 

SteppedEase is orderly but very linear and RoughEase is very random and well, rough.

 

P.S. I am aware of the randomise flag in RoughEase.

See the Pen by tahirahmed (@tahirahmed) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello Tahir Ahmed,

 

What about animating the progress() or time() of your stepped tween, so you can apply any other easing you want:

var myTween = TweenMax.fromTo('div', 4, {
        position: 'absolute',
        top: '10%',
        left: '50%',
        yPercent: -100,
        xPercent: -50,
        width: 100,
        height: 100,
        backgroundColor: '#cc0',
        paused:true // don't forget to add a paused state to your first tween
}, {
        top: '100%',
        ease: SteppedEase.config(20)
});

// Tween the progress() and apply a different easing
TweenMax.to(myTween, 4, {
    ease: RoughEase.ease.config({
        template: Expo.easeOut,
        strength: 0.2,
        points: 20,
        taper: 'none',
        randomize: false,
        clamp: true
    }),
    progress: 1 // animate the progress of your 'myTween' instance
});

Since GSAP can animate any numerical JavaScript property or object. It can also tween the progress() and time() of other tweens, when you store those other tweens in a variable. And then just place that variable in your tween target, since it accepts DOM selectors, array, and objects

• target : Object
  Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

Reference:

progress(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

time(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/time/

to(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/

fromTo(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/fromTo/

 

See if that helps!

[Tahir Ahmed 93 Likes (Contributor)]

Ah! that is a good technique @Jonathan

 

I was aware of animating .progress() or .time() properties of a tween / timeline within another tween and have actually used this technique many times before but I completely forgot about using that in this scenario.

 

Thanks a bunch.

[Jonathan 5,176 Likes (Superhero)]

No worries Tahir Ahmed, glad to help.. Happy Tweening