Jump to content
GreenSock

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

gsap motion driving me MAD! Any tips?

Recommended Posts

I hope this is a fairly simply question

I'm moving an item like this

gsap.fromTo("#graphMaskHandle", 60, {x:-155}, {x:0});

 

It seems to start moving more quickly then slow down as it goes on.

Is there some kind of easing on as default for gsap? If so, how do I turn it off and get linear motion? If not, any ideas what's going on?

(I'm forbidden from sharing my code on CodePen, unfortunately)

 

I'm using it to reveal a graph over a 60 second period, so the graph needs to be revealed to match up with "seconds" on the x axis.

 

I'm a newbie to green sock; I'm finding it brilliantly useful, but, on top of my poor maths, I'm having a bad day with this.

Any help would be appreciated.

Share this post


Link to post
Share on other sites
9 minutes ago, Paddy said:

Is there some kind of easing on as default for gsap? 

 

Yep. It uses power1.out, which works well as a default for most animations.

https://greensock.com/docs/v3/Eases

 

10 minutes ago, Paddy said:

If so, how do I turn it off and get linear motion?

 

You can turn it off globally.

gsap.defaults({
  ease: "none"
});

 

Or on a per animation basis.

gsap.fromTo("#graphMaskHandle", 60, {x:-155}, {x:0, ease: "none" });

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Yup. GSAP animations have a default ease of "power1" https://greensock.com/docs/v3/Eases

 

You can change easing on a per-tween basis like

 

gsap.fromTo("something", {x:10}, {y:200, ease:"none"})

 

or globally https://greensock.com/docs/v3/GSAP/gsap.defaults()

 

gsap.defaults({ease:"none"});

or on a timeline

gsap.timeline({defaults:{ease:"none"}));

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Superb! Thanks - I'd just found out some of that, but I hadn't found the default option - that'll be really useful.

  • Like 2

Share this post


Link to post
Share on other sites

looks like i'm 30 seconds slower than @OSUblake today but i'd like an extra point for the timeline example. 🤣

  • Thanks 1
  • Haha 4

Share this post


Link to post
Share on other sites

Definitely an extra point for the timeline, Carl. Thanks.

  • Like 1
  • Thanks 1

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

  • Recently Browsing   0 members

    No registered users viewing this page.

×