having an animation come in from the right of the screen on an absolutely positioned element

[picitelli]

I've been playing around with TweenMax, using Scroll Magic JS plugin, and have yet to find a working example of an animation, where the element that will be animated, has initial CSS that  is absolutely positioned to the right and bottom, come in from the right of the screen. CSS wise, I only see animations that use x (left) and y (top) coordinates. Is it possible to get an animation to come in from the right side of the screen? If so, can someone please point me to an example.

 

 

[Jonathan]

Hello picitelli, and Welcome to the GreenSock Forums!

 

In order to animate from the right you can do it a couple of ways:

 

Here is my codepen example:

See the Pen yifxh by jonathan (@jonathan) on CodePen

• left CSS property:

  First get the parents width of the element your animating. And then add that value with some extra pixels so it positions the element to the right of your elements parent, using the left CSS property.

• right CSS property:

  You get the width of the element, and then apply the minus symbol (-) to make that value a negative integer. Then you can position your element to the right of your elements parent, using the right CSS property.

In my example tweens, I don't have to tell GSAP to use pixels since the default is pixels. Keep in mind that the first way using the left CSS property.. that in your tween you could change left to x (translateX) so this way when the element gets animated it can translate on a sub-pixel level.. so instead of just moving 100px .. it would be able to move like 100.9999px. The sub-pixel changes will allow for smoother interpolation of your element.

 

Does that help?

[picitelli]

Yes, it does help. Thank you for your quick response!