r3plica

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.

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!

Does anyone else know how to help with this? I have added the element to the leave .fromTo, but as mentioned, it still crashes

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?

Thanks @mvaneijgen, that video was awesome and thanks @Carl for providing the demo. I actually watched the video and found the link in that before seeing you had posted here but it works perfectly

https://codesandbox.io/s/mm49z4?file=/src/App.vue This is as close as I have got by using your suggestion, but it's still not right.

Ok, I am getting a bit closer. I have this now: https://codesandbox.io/s/spring-smoke-b1kmgp All I need now, is to start moving the text up before the next one comes into view. Any help with that?

The rotating text in the header:

Hi, thanks for that. I have created this example: https://codesandbox.io/s/vigorous-pascal-s258v3 As you can see, it doesn't stop in the middle. In my application, it does stagger, so not sure why it doesn't in this example. Like I mentioned, I am trying to replicate this: https://www.gotolstoy.com/

I think it's because of codepen; I don't use vue like that, I use vue with composition api and it does an animation, but not what I was expecting. I will see if I can get composition api working

I have added a simple codepen; it doesn't seem to do anything, but it should be enough for you to see what I am trying to achieve

I have seen some of the topics here, so this should be relatively simple, but I am new and can't figure it out. I would like to create an animation of text like this: https://www.gotolstoy.com/ I have tried to create a component, the html looks like this: ``` <transition-group class="animation-container" name="staggered-fade" :css="false" appear v-bind="$attrs" @before-enter="beforeEnter" @enter="enter" > <h2 class="h1 mb-0" :class="heading.colour" v-for="(heading, i) in headings" :data-index="i" :key="i" > {{ heading.title }} </h2> </transition-group> ``` The code behind looks like this: ``` import { defineComponent, ref } from "@vue/composition-api"; import gsap from "gsap"; export default defineComponent({ name: "Business", setup() { const duration = ref(0.4); const headings = ref([ { title: "discover", colour: "text--pale-blue" }, { title: "experience", colour: "text--bright-blue" }, { title: "shop", colour: "text--blue" }, ]); const beforeEnter = (element) => { element.style.opacity = 0; element.style.transform = "translateY(50px)"; }; const enter = (element, done) => { console.log(element.dataset.index); console.log(element.dataset.skip ?? 0); console.log(duration.value); console.log( (element.dataset.index - (element.dataset.skip ?? 0)) * duration.value ); console.log("---------------------"); gsap.fromTo( element, { opacity: 0, y: 0, duration: duration.value, delay: (element.dataset.index - (element.dataset.skip ?? 0)) * duration.value, onComplete: done, }, { opacity: 1, y: 100, duration: duration.value * 2, delay: (element.dataset.index - (element.dataset.skip ?? 0)) * duration.value, onComplete: done, repeat: -1, } ); }; return { headings, beforeEnter, enter }; }, }); ``` The animation I am getting is not doing what I had hoped. Can someone point me in the right direction? Your help would be greatly appreciated.