daafiejd Posted November 7, 2019 Share Posted November 7, 2019 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 More sharing options...
Shaun Gorneau Posted November 7, 2019 Share Posted November 7, 2019 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 1 Link to comment Share on other sites More sharing options...
daafiejd Posted November 7, 2019 Author Share Posted November 7, 2019 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 More sharing options...
ZachSaucier Posted November 7, 2019 Share Posted November 7, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now