daafiejd

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!

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

@Sahil Oh jeez, it's that simple... Thank you so much. This will also help me in further tweening!

Hi there, I'm very new to GSAP and JS in general, but I really love all the cool stuff that's capable off. Now I've created a tween and some functionality with it. It's all working, but not like I would want it to. For example: how do I define a starting situation from where the animation should take place. I know about the .from method, but when you look at my overlay, it would be in the way the whole time until you click the burger. When I code something hard in my in-line style or CSS like this: .overlay { right: 100%; } It doesn't work either. So I guess my question would be: how do I define a starting situation for a div that should slide on screen when a button is toggled on and slide off when the button is toggled off. My CSS could be off, my JS logic could be off... Tell me please, it would be greatly appreciated! Kind regards