Cssplugin left property jumps when animating [SOLVED]

[Brandesign]

Hi, I'm probably doing something wrong with my inexperience in Tweenlite and Javascript, but it's something I can't figure out. I'm trying to have a menu in the middle of the site, and when clicking on a link, I want it to animate to the far left of the window. I'm using the left css property (in a negative value to let it disappear completely) to achieve this but if I do that the menu jumps to a certain position and then animates to the left. Looks pretty ugly. I've noticed that when I make my window smaller the jump is decreasing. It seems like the element first jumps to the x value 0 of the window and after that smoothly animates to a negative value. (-275px in this case) Is there a way to fix this? Thanks in advance! Youri

[Brandesign]

I've uploaded the page where I'm facing this problem.

 

http://www.brandesign.nl/silent-project/index.html

 

If you click 1 of the link it wil animate. Made the nav animation very slow so you can see what's happening.

 

Hope you can help me out!

 

Thanks,

 

Youri

[Carl]

the nav element has position:fixed.

if you use position:relative it will animate smoothly.

[Brandesign]

Hi Carl,

 

 

Thanks for your reply. Unfortunately your solution isn't gonna work because the distance between the window and the nav element is dynamic. (when resizing browser window) It's gonna have a arrow sticking out afterwards. People can rollover this arrow and the menu will appear from the left side of the site. So I need a to place it exactly at the left side - it's own width.
 

If I use relative positioning it has the parent as reference point, in which I can't exactly pinpoint how many negative pixels it should animate to since the browser window is resizable.

 

Thanks again,

 

Youri

[jamiejefferson]

You could try something like this to animate from the 'current' left to 0 then:

nav = $('nav');
TweenMax.fromTo(nav, 1, { left: nav.offset().left }, { left: 0 });

[Brandesign]

Thanks for your reply Jamie! I'll try that! 

[Brandesign]

Hi Jamie,

 

Thanks for your answer, works like a charm! Many thanks!

 

This topic can be closed! 

 

Youri

[jamiejefferson]

No worries, your site is looking pretty rad, I'd love it if you let us know when it's done!

[Brandesign]

Haha thanks! I'll post here when I'm finished!