[Animate height on enter and leave using vue composition api]

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.

[Animate height on enter and leave using vue composition api]

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!

[Animate height on enter and leave using vue composition api]

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

[Animate height on enter and leave using vue composition api]

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?

[vue gsap and animating text (fade up and out)]

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

[vue gsap and animating text (fade up and out)]

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.

 

[vue gsap and animating text (fade up and out)]

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?

 

[vue gsap and animating text (fade up and out)]

The rotating text in the header:

 

[vue gsap and animating text (fade up and out)]

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/

[vue gsap and animating text (fade up and out)]

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

 

[vue gsap and animating text (fade up and out)]

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

[vue gsap and animating text (fade up and out)]

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.

 

See the Pen by s (@s) on CodePen