Jump to content
Search Community

SteppedEase with template like RoughEase

Tahir Ahmed test
Moderator Tag

Go to solution Solved by Jonathan,

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

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

Link to comment
Share on other sites

  • Solution

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! :)

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...