Jump to content
GreenSock

r3plica

vue gsap and animating text (fade up and out)

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 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

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

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

 

Link to comment
Share on other sites

Try codesandbox.io. I find it works better for JS frameworks.

Link to comment
Share on other sites

@r3plica What part of the gotolstoy site are you attempting to replicate?

 

Link to comment
Share on other sites

The rotating text in the header:

 

image.thumb.png.186e610b580640270e4aa44a7c622ff6.png

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

  • Solution

Looks like the following animation by our @Carl this is a great tutorial to get you of the ground 

 

 

  • Like 2
Link to comment
Share on other sites

thanks for the nice recommendations!

here's the demo from that video in case anyone just wants to grab some code:

 

See the Pen ExVEOPa?editors=0110 by snorkltv (@snorkltv) on CodePen

 

I can't help with the vue stuff.

  • Like 1
Link to comment
Share on other sites

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 :D but it works perfectly :)

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.
×