Jump to content
Search Community

TimeLine not working as expected

daafiejd test
Moderator Tag

Recommended Posts

Hi there!

 

I've been hassling with this issue for a few days now and I can't come to an understanding of why this won't work.

 

So as you see there is a menu that slides out on click of a button and slides back in when it's clicked again.

Now I'd like to give the right pane of the menu a different background color which appears just after the menu slides out.

When the menu slides back in, the right pane should reset and when the menu is slided out again, appear when the slide-out animation is complete.

You get the idea I hope.

 

I've tried putting the two tweens in a timeline together, but then the sliding animation of the menu won't work anymore.

 

Am I just totally missing a point or am I making things difficult for myself?
 

I would love to hear your ideas!

 

 

~ David

See the Pen qBBYXyp by daafiejd (@daafiejd) on CodePen

Link to comment
Share on other sites

Hi @daafiejd

 

If I understand correctly, you're looking for some sequencing to play forward and backward based on the state (class) of the the hamburger button. Rather than separate tweens on each pane, I think a single timeline handling the sequencing is what you're after. Have a look here.

 

See the Pen OJJZQEN?editors=1011 by sgorneau (@sgorneau) on CodePen

  • Like 1
Link to comment
Share on other sites

46 minutes ago, Shaun Gorneau said:

Hi @daafiejd

 

If I understand correctly, you're looking for some sequencing to play forward and backward based on the state (class) of the the hamburger button. Rather than separate tweens on each pane, I think a single timeline handling the sequencing is what you're after. Have a look here.

 

 

 

Hey @Shaun Gorneau,

 

Thanks for your timely reply!

This is very much the direction I wish to go for.

As you understand it's for a menu. And to totally finish it off and make it more user-friendly I think it would be a good change to not let the right pane disappear first and then let it slide in. Rather one would like the menu to slide in directly on closing it, and then the right pane would "reset" itself. So that when you open the menu again, it can appear again, instead of the right pane just being there already.

 

You see where I'm going for?

 

Thank you so much for your help!

Link to comment
Share on other sites

Following Shaun's advice of using one timeline, you could add a label, use tweenTo, and add a pause and seek to make it work like you're wanting:

See the Pen ZEEoRwo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Alternatively you could use some tweens to do the same thing :) The advantage of a timeline is that it's easy to let people click mid-animation and things not animate weirdly.

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.
×
×
  • Create New...