Responsive animation problem

[L.Lawliet 1 Likes (Newbie)]

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?

[Diaco 1,997 Likes (Superhero)]

Hi L.Lawliet 

 

pls check this blog post : http://greensock.com/gsap-1-13-1

 

and make  Codepen Demo  available if you have any problem .

[L.Lawliet 1 Likes (Newbie)]

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.

[Diaco 1,997 Likes (Superhero)]

try this : 

tl.staggerTo(".box", 1, {left:"90%", top:"50%",xPercent:-100}, 0.2)

[L.Lawliet 1 Likes (Newbie)]

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

[Carl 11,164 Likes (Superhero)]

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:

http://codepen.io/GreenSock/pen/eNJLOz?editors=001

 

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