Jump to content
Search Community

SteppedEase to step immediately.

kez1304 test
Moderator Tag

Go to solution Solved by GreenSock,

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 guys,


Just a quick query...


Using the easing tool at: http://greensock.com/ease-visualizer


If you switch to SteppedEase, with it on the graph (as it's clearer), is there any way to force it to take its first 'step' immediately?


With config(2) set, it goes along the following axis:




Is there a simple way to switch it so that it goes:




I realise that's a slightly shorter transition, and I have worked out that I can use delays in the timeline to achieve the result I'm looking for, I'm just wondering if such an inherent ability exists within GSAP as standard?



Thanks a bunch!

Link to comment
Share on other sites

  • Solution

Here's a sneaky way:

var tween = TweenLite.to(...{paused:true, ease:SteppedEase.config(5)}); //a loose paused tween
timeline.fromTo(tween, tween.duration() * 4/5, {time:tween.duration() / 5}, {time:tween.duration(), ease:Linear.easeNone});

The concept is to just have a loose tween that's paused, and then do a fromTo() to actually tween that tween's time. Think of it like animating the playhead from part-way in, all the way to the end. You could wrap this functionality in a function of course to make it a bit easier to read.


Does that help? 

  • Like 3
Link to comment
Share on other sites

Hi Jack,


Thanks a lot for your solution. It works great!


One question though...


Where can I find more info about the time variable?

{time:tween.duration() / 5}

All the documentation on the site is great, but I can't seem to find all the supported variables available anywhere in them.


I can find constructors, methods, arguments, return types, etc... But just about every Tween object takes a var object as an argument, but when I follow the var link, I just get a tiny bit of information describing what it is. No where can I find a list of what's actually available...




Is where I always end up.


Can you point me in the right direction?



Thanks once again!

Link to comment
Share on other sites

The bad news: the docs contain no list of properties that you're "allowed" to animate.

The good news: there's no such list because you can animate ANY numeric property of ANY object.




That's what a lot of people love most about GSAP. It's made to be SUPER flexible. You can even animate method-based getter/setter properties which is exactly what we're doing here. All tweens/timelines have a "time()" method that serves as a getter/setter, meaning that if you don't pass in a parameter, it acts as a getter. If you do pass in a parameter, it acts as a setter, just like most jQuery methods:

tween.time(); //gets the current time (playhead position)
tween.time(2); //sets the time to 2 seconds (moves the playhead there)

And you can actually animate that value! This functionality isn't limited to GSAP objects either - you can make your own objects with getter/setter methods and GSAP can animate those!


Once you grasp the concept, it can be very powerful.


So for example this is just tweening the "time" value of the target tween from 0 to 20 over the course of 1 second, easing it out:

TweenLite.fromTo(tween, 1, {time:0}, {time:20, ease:Power2.easeOut});

Which effectively animates its playhead, making it go really fast.


Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

Very interesting.


Is there a way to read out the steps asigned in SteppedEase.config(), so that the timeline can calculate dynamically?


GreenSocks solution solved something I was looking for!

"non-linear-stepped Easing", where the animated value is still transitioned with equal steps (x: 10, x: 20, x: 30...),

but the timing of these equal steps are not linear. 


That creates a totally different perception of acceleration in stop motion. Amazing!

I made a CodePen to illustrate what I mean; words words words :8


See the Pen gmbeMZ by katerlouis (@katerlouis) on CodePen



Using GSAP to make GSAP happening. We're in the matrix :o



PS: I wonder why something like `immediateStart` hasn't been implemented in SteppedEase.config() yet?

Link to comment
Share on other sites

I don't quite understand what you mean by "immediateStart". Can you explain? Do you mean to make the first jump happen instantly at the start of the tween? What would happen when you reverse()? Would it jump down at the very start again to the original value? You can certainly create whatever ease you want by using CustomEase in the Ease Visualizer :) 



  • Like 1
Link to comment
Share on other sites

That's what I mean by "immediateStart", GreenSock.

The thread opener explained it pretty good (x,y,x,y,x) whereas immediateStart would be (y,x,y,x)


With y,x,y,x reversing / yoyoing / looping would never show the starting frame again, that's right.


But I've already had 2 cases where I needed an immediateStart on a SteppedEase right at the beginning of an interaction. 

Only thing I could come up with is pausing the animation upon call, put the playhead at the exact position of the first "y"-step and then go on.


The customEase builder is great, but building your own SteppedEase there is a huge pain; correct me if I'm wrong.

Plus: In my case I was still figuring out how many steps work best; also not so convenient with custom ease builder.



Of course there are always workarounds– but GSAP wouldn't even exist when you guys would have been satisfied with workarounds ;)

So I'm just proposing again it would be a sweet thing to have in upcoming releases.





Kater Louis from Kreativzirkel!



PS: What is it with ease names? The concept feels pretty inconsequent– I almost always have to look up the names in the ease visualizer.

"Was it ease: Stepped.config() or was it ease: SteppedEase.config()? It's ease: Power2.easeOut– but then again it's ease: RoughEase.ease.config()"

Woooh so many combinations where to put "ease" and where not :D

Link to comment
Share on other sites

Ha, yes, we're not generally satisfied with workarounds :) GSAP exists to make your life easier as an animator. 


The main objection I have is that if we added this feature, I think it should still return to its original position at the VERY beginning if you reverse(). Otherwise, it's not a true reverse. Imagine putting this tween in a timeline that has a whole bunch of stuff happening and then you seek(0) - wouldn't you expect things to start over again (return to their original state)? If not, it'd be odd for most people. 


I dropped it into an updated TweenMax that you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js (uncompressed). You can just pass true as the 2nd parameter, like SteppedEase.config(15, true). 


Does that work well for you? 




As for the ease names, yeah, I see what you mean. Naming things is always tricky. "Stepped" by itself isn't really descriptive enough (in my opinion). Same with Rough. The other ones are legacy stuff from the age-old Robert Penner eases (except the "Power" ones which are just renamed versions of some of the Penner ones to make them more intuitive, but an argument could definitely be made that they need "Ease" in the name too. But once they're out there, we can't just suddenly change the names, or we'll break legacy code and have a lot of very angry developers on our hands :) 

  • Like 2
Link to comment
Share on other sites

I will look into the beta later;

But I'd rather think about how to solve the "paradoxon" faced with an immediateStart on reversed animations.



I see that reverse() just "drags the playhead backwards".


But when I specifically declare this Stepped animation to start immediately, wouldn't I want it to start immediately on a reverse, too?

With y,x,y,x reversed it would start with a pause again: x,y,x,y and misses on the last frame. 


How about a super special case that breaks the general reverse rules this time?

Instead of simply dragging the playhead backwards, the easing would need to change to a y,x,y,x?

Like the tween wouldnt be a reversed "A > B" but a new Tween with "B > A" with a newly calculated SteppedEase(x, true).


In my head this works great for the point A to point B translation; 



Now the wisdom and experience of the elders is asked to seek an answer to if this would work as a general concept.

Link to comment
Share on other sites

Oh, I definitely don't think it would be wise to add this sort of behavior where an ease totally changes its behavior based on playhead direction. It could lead to a lot of confusion and conflicts. Keep in mind that timelines can be nested, so what you mean by "forward" and "backward" can get pretty fuzzy. For example, what if you reverse() a tween that's inside a reversed timeline? It technically looks like it's playing forward. So what would the "correct" behavior be in your example? Would the ease change its behavior to the "backwards" way (after all, it is technically in a reversed tween)? Or does it need to walk up the entire chain to figure out its global direction? If so, that could have a pretty uncomfortable performance implication (walking up the chain on every single render of every tween). 


And then what happens if you change direction part-way through a tween? Like what if it's 50% finished and then you reverse()? The object would suddenly jump to a new position (because the ease would plot differently in that direction). Most people would see that as highly unintuitive and undesirable. 


Not that it's a terrible idea or anything - I've just been doing this long enough to spot changes that could become nightmarish down the road with a bunch of unintended (or unforeseen) implications. 

  • Like 2
Link to comment
Share on other sites

That's why I called out for the Elders experience.



Okay, how about this ugly workaround:

// how can I get the parameter of the config() so I don't have to hardcode the steps?
.to(el, 2, { x: 200, ease: SteppedEase.config(5) }
Link to comment
Share on other sites

Are you asking how to query the SteppedEase instance for how many steps it has? There isn't an "official" way to do that. I didn't really see the need for it and I don't think anybody has asked for it in all the years of it being out there :) It should be pretty easy to just store that in a variable on your end, or even attach it as a property to your SteppedEase object. 

  • Like 1
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...