Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
picitelli

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

Recommended Posts

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.

 

 

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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

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