Jump to content


toggle position

Recommended Posts

my example in codepen

shows, which functionality I wanted to achieve:


there are two horizontal menus. If I click the left button (regardless of whether it is the warm or cold button), the clicked left button moves the left menu to the right and the right menu to the left.
This works.


the other need is, if I click the button on the right side (regardless of whether it is the warm or cold button), it should stay where it is.
This works not fine, cause there are some animation before at last the right menu stays at the right side.
I want to fix this in a clean way.


My preferred idea is: in the play button to ask whether the warm-menu is in position x then play timeline x and if not then play the timeline y.


Could you help me with this query to get the current position or css attribute.
it is because of my lack of javascript that I am asking you and it is my interest to work with this amazing gsap.
Thanks a lot in advance



See the Pen zxVPjg by codepenmicha (@codepenmicha) on CodePen

Link to comment
Share on other sites

Hi miketipp  :)


There's a few methods for that , but pls try this :

var tl = new TimelineMax();
tl.to(".cold_menu", 0.3, {left:190})
.to(".warm_menu", 0.3, {left:750},0);


  if($(e.target).attr('class')=='warm'){ tl.play() }
  else if($(e.target).attr('class')=='cold'){ tl.reverse() }

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

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.