r3plica Posted July 21, 2022 Share Posted July 21, 2022 Hey all, I am trying to animate an element with a height. So far I managed this: https://codesandbox.io/s/awesome-nash-v2tfn3 But as you can see, when I press the button for a second time I would like the animation to collapse slowly and fade out. I tried to do this: https://codesandbox.io/s/silly-zhukovsky-6bngdu But when I add before-leave and leave it just errors when I try to collapse the element. Does anyone know what I am doing wrong? 1 Link to comment Share on other sites More sharing options...
SteveS Posted July 21, 2022 Share Posted July 21, 2022 You forgot to add element to your leave .fromTo. Even if you fix that it still bombs out. I'm not a vue expert so I'm not sure how to help with that. I will say that it look like when it expands the button is supposed to change to "collapse" and it doesn't. You probably have some state management issues. Link to comment Share on other sites More sharing options...
r3plica Posted July 27, 2022 Author Share Posted July 27, 2022 Does anyone else know how to help with this? I have added the element to the leave .fromTo, but as mentioned, it still crashes Link to comment Share on other sites More sharing options...
iDad5 Posted July 27, 2022 Share Posted July 27, 2022 I'm no vue expert either, actually I'm more of the total opposite. And your little example crashes so hard, that I even have to wait a minute before I can close my browser-tab, so it hard to even have a closer look. One thing I've seen though ist that the first error of a seemingly infinite loop of errors concerns CSS-Plugin, wich shouldn't be needed with the current GSAP Versions - although that seems unlikely to be 'the' explanation for your troubles, checking your setup could be a good idea. Another wild (but slightly educated) guess would be, that somehow your still fire expand even when it is already open. That could cause that kind of infinite loop under certain conditions. Last not least it seems unnecessary at least to use fromTo() in both cases. You are keeping the state somewhere else anyhow, so to() alone should do fine and reduce complexity: If needs be you could always use set() on document DOMContentLoaded to make sure it starts closed (or opened): Maybe that brings a little light into vue-hell :-) 2 Link to comment Share on other sites More sharing options...
Cassie Posted July 27, 2022 Share Posted July 27, 2022 Hey - just stepping back a little - it's always good to take the framework out of the equation and just focus on the functionality first. Usually when you're handling animations on events it's a good idea to just toggle the direction of an animation with control methods. You can also animate between height 'auto' and 0 which may help here. let tween = gsap.fromTo(element,{ opacity: 0, height: 0, }, { opacity: 1, height: 'auto', duration: currentDuration, paused:true, reversed:true }); // toggle open or closed function toggle() { tween.reversed() ? tween.play() : tween.reverse(); } Does this help a little? Link to comment Share on other sites More sharing options...
r3plica Posted August 3, 2022 Author Share Posted August 3, 2022 So, you can do that without any issues: https://codesandbox.io/s/nostalgic-spence-ikk2nb?file=/src/App.vue But this is not going to work in my application. The reason I am trying to implement the transition is because I am using it for a menu. So the individual elements are not on the dom. When they appear, then I want the animation to start, then when they disappear I want to the animation to reverse (before they are removed from the dom). That is the purpose of the transition block. Are there no vue people here that can help? I appreciate everyone's replies though! Link to comment Share on other sites More sharing options...
r3plica Posted August 3, 2022 Author Share Posted August 3, 2022 So I fixed it, I found someone mentioning a bug (not related) using vue. Their code example was a sidebar: https://codesandbox.io/s/gsap-v3-jump-bug-in-vue-3272l?fontsize=14&file=/src/components/Sidebar.vue:498-961 When the bug was fixed, it fixed his issue. So I took his code and just changed it for height instead: https://codesandbox.io/s/wandering-field-69kli4?file=/src/App.vue I had to remove any CSS i had before and to a fromTo when enter is triggered, but at least it's not crashing. Thanks for your help guys, I think this is the solution. 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 3, 2022 Share Posted August 3, 2022 Ah that's good to know. Thanks for popping back with the solution 1 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