TweenMax with marginLeft from auto to percentage.

[kaplan]

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

[rgfx]

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. 

[Diaco]

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

[kaplan]

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

[Carl]

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. 

[kaplan]

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.