Jump to content
Search Community

vue gsap and animating text (fade up and out)

r3plica test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

I'm not a vue user, but in the example you gave, I'm putting console logs in the methods and they aren't doing anything. The GSAP isn't even running. There may be a vue dev on the forum but this doesn't seem to be a GSAP issue.

Link to comment
Share on other sites

For each text you'll want to make a timeline like so:

 

const textTl = gsap.timeline()

const textIn = gsap.from(textEl, {
	y: 50,
  autoAlpha: 0
})

const textOut = gsap.to(textEl, {
	y: -50,
  autoAlpha: 0,
  	delay: 4 //pause for 4 seconds
})

textTl.add(textIn).add(textOut)

And then have some setup to manage when they fire. There's many ways to do that though. Someone else on the forum might have an easier solution but this gives plenty of control.

update: I did some more searching and I think there's a way to achieve the effect you want without constructing timelines, and instead using stagger. But the examples I'm finding are from the TweenMax days 😕

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...