Jump to content


Responsive animation problem

Moderator Tag
Go to solution Solved by Carl,

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 was wondering is there any chance, to do animation and to be responsive on window re size, change, anything really?

I tried % based animation but 50% of wide and small screen doesn't land object in the same place?

Link to comment
Share on other sites

See the Pen aOdKOR by Kyokotsu (@Kyokotsu) on CodePen



I want the boxes come 10% from the right on any given size. But box fly right trough window width. And i want them to start at that position.

Link to comment
Share on other sites

try this : 

tl.staggerTo(".box", 1, {left:"90%", top:"50%",xPercent:-100}, 0.2)
  • Like 2
Link to comment
Share on other sites

What does x percent do, cuz it still doesn't work when i have wider screen?

Link to comment
Share on other sites

  • Solution

xPercent is the same as doing translateX(-100%), it translates along the x-axis based on a percentage of the element's width.

this forces the right edge of each element to align with the 90% position of the container.


This demo shows animating from 10% left to 90% left based on Diaco's code:



try removing xPercent portion to see how it affects the positioning.

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