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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×