Jump to content
GreenSock

gareth

Speed of responsive animation

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

I have a simple animation which moves a 25% wide menu from off screen to 0:

var menuMove = new TimelineMax();
menuMove.to(menu, menuSpeed, {
    left: "0",
    ease: Power4.easeInOut
})

On my 27inch screen the animation is fast, on mobile it is very slow. Is there a way to tie speed to screen size?

See the Pen RaEQaO by eighthday (@eighthday) on CodePen

Link to comment
Share on other sites

Speed is just distance over time. So set the duration to how ever many pixels/second you want it to move.

 

See the Pen aNPqPQ?editors=0010 by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

perfect thanks!

Link to comment
Share on other sites

Hello gareth,

 

Also just to add my two cents to Blakes example..

 

You should really only be animating x instead of left and y instead of top. Or in your case like Blake advised inside his codepen to use xPercent and yPercent for responsive animations.

 

Other GSAP examples of xPercent and yPercent in action:

 

See the Pen axzmb by GreenSock (@GreenSock) on CodePen

 

See the Pen rAetx by GreenSock (@GreenSock) on CodePen

 

http://greensock.com/gsap-1-13-1

 

The reason being is that the performance of animating position offsets left and top will cause the browser to constantly have to recalculate layout and then repaint. Which can cause jank (lost frames).

 

See this:

 

http://csstriggers.com/

 

Position offsets like top and left only animate on a pixel level, so there will be visible pixel snapping. Versus animating CSS transforms like x and y which animate on a sub-pixel level for a more smooth buttery translation.

 

So as a rule of thumb, you should use position offsets like top, right, bottom, and left in your style-sheet to setup the initial position of your elements. And then animate in your tweens using x (translateX) 

 

Check out this article by GreenSock's Jack on why x and y are better to animate instead of position offsets like top and left.

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

:)

  • Like 3
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.
×