Jump to content
GreenSock

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

Cssplugin left property jumps when animating [SOLVED]

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

the nav element has position:fixed.

if you use position:relative it will animate smoothly.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 });
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi Jamie,

 

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

 

This topic can be closed!  :-P

 

Youri

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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