Jump to content
GreenSock

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

TweenMax with marginLeft from auto to percentage.

Recommended Posts

Hi,

 

I'm looking at animating an Absolutely positioned (in the center) to specific percentage on the left-margin. I can get it to work as long as the marginLeft isn't set before hand other than in the CSS, but when the element has that left-margin style inline and then I tween to say 4%, it jumps all the way to the left and then moves the 4%. 

 

I have a codepen setup, if you comment out the marginLeft and marginRight and only have that set in the CSS it works correctly. Am I thinking about margins (and absolutely positioned elements) incorrectly?

 

 

Thanks,
Dave

See the Pen rmKzG by kaplan (@kaplan) on CodePen

Link to post
Share on other sites

Not exactly sure what you mean. But I found this greenstock pen useful in understanding how to work with position:absolulte 

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

 

Completely a shot in in the dark, but calc() in css has helped me a lot . 

See the Pen puhsf by ed1nh0 (@ed1nh0) on CodePen

 

Also there is always placing divs inside parent divs. 

 

Hope that helped, prob not. 

Link to post
Share on other sites

Hi kaplan :)

 

try this :

var $box = $('.my-box');

TweenMax.set($box, { xPercent:-50 , left:'50%'});
TweenMax.to($box, 0.5, { width: '34%'});

$box.on("click", function() {
  TweenMax.to($box, 0.5, { xPercent:0 ,  left:'4%'});
});

See the Pen mGkvD by MAW (@MAW) on CodePen

  • Like 2
Link to post
Share on other sites

Wow! Thanks Diaco.AW. 

 

xPercent!? I need to look that up. I also think I'm using the TweenMax css settings wrong. I think of 'left' as a CSS property and would wrap it up, but it doesn't seem like that's necessary with TweenMax?

TweenMax.to(slideToMoveLeft, 0.50, { 
  css:{ 
    top: '12%',
    width: '35%',
    left: '5%',
    right: '95%',
  }, 
});

And thanks for sharing rgfx, that's a nice example!

 

 

EDIT: I looked up the xPercent and found this post. http://codepen.io/GreenSock/blog/responsive-animations-made-easy-with-gsap-1-13-1

Link to post
Share on other sites

First, I recommend Diaco's solution. It is the way to go.

 

Second, tweening to margin:auto is not something that GSAP (or any other library that i'm aware of) supports.

When you are doing tweens you need both the start and end values to be numeric.

 

If you tween from marginLeft:0 to marginLeft:auto, the problem is the browsers don't directly let you know the value of auto in pixels or percent. 

  • Like 1
Link to post
Share on other sites

Thanks Carl! I think I realized that after trying it several dozen times. ;-) 

 

 

Second, tweening to margin:auto is not something that GSAP (or any other library that i'm aware of) supports.

When you are doing tweens you need both the start and end values to be numeric.

 

If you tween from marginLeft:0 to marginLeft:auto, the problem is the browsers don't directly let you know the value of auto in pixels or percent. 

 

 

It's really nice to have the confirmation that 'auto' is not a path worth following.

Link to post
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.

×