GSAP Beginner, animation not showing

itsmeagian · April 30, 2020

Hey everyone,

I am trying to recreate this animation from this video about GSAP and Barba.JS: https://www.youtube.com/watch?v=aMucZErEdZg

However, the lines do not show up and I get no errors in console, can anyone shed some light on the problem?

My HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.scss" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TimelineMax.min.js"></script>
  </head>

  <body data-barba="wrapper">
    <ul class="transition">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <main data-barba="container" data-barba-namespace="home">
      <h1>Hello World</h1>
      <a href="/index2.html">Test Link</a>
    </main>

    <script src="/testscript.js"></script>
  </body>
</html>

The CSS

ul.transition {
  display: flex;
  position: absolute;
  z-index: 10;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

ul.transition li {
  transform: scaleY(0);
  background: yellow;
  width: 20%;
}

Javascript:

let tl = new TimelineMax();
pageTransition();

function pageTransition() {
  tl.to(`ul.transition li`, 0.5, { scaleY: 1, transformOrigin: "bottom left", stagger: 0.2 });
  tl.to(`ul.transition li`, 0.5, { scaleY: 0, transformOrigin: "bottom left", stagger: 0.1, delay: 0.1 });
  console.log("page transition");
}

See the Pen KKdvbYL by itsmeagian (@itsmeagian) on CodePen

ZachSaucier · April 30, 2020

Hey itsmeagian and welcome to the GreenSock forums!

It looks like you didn't follow the tutorial which uses Barba.js. Was that intentional?

If you're not going to use Barba.js, you will need to handle the link clicking behavior yourself - preventing the default behavior of the link(s) and calling the animation yourself.

itsmeagian · April 30, 2020

3 hours ago, ZachSaucier said:

Hey itsmeagian and welcome to the GreenSock forums!

It looks like you didn't follow the tutorial which uses Barba.js. Was that intentional?

If you're not going to use Barba.js, you will need to handle the link clicking behavior yourself - preventing the default behavior of the link(s) and calling the animation yourself.

Thank you very much!

Seems like I was a bit too quick in drafting my question and in my original post, it was indeed intentional. I followed the guide throughout and my experience with GSAP is a bit limited and none existent with Barba.js so I tried to do everything in the video and yet it didn't work.

This is what I have in my script for barba, however I never got the page transition console log in my function pageTransition() so the function is never called.

import barba from "@barba/core";

barba.init({
  sync: true,

  transitions: [
    {
      async leave(data) {
        const done = this.async();

        pageTransition();
        await delay(1500);
        done();
      },
    },
  ],
});


function pageTransition() {
  let tl = new TimelineMax();
  tl.to(`ul.transition li`, 0.5, { scaleY: 1, transformOrigin: "bottom left", stagger: 0.2 });
  tl.to(`ul.transition li`, 0.5, { scaleY: 0, transformOrigin: "bottom left", stagger: 0.1, delay: 0.1 });
  console.log("page transition");
}

function delay(n) {
  n = n || 2000;
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

So at that point, I thought okay maybe I can just try to do the animation and avoid Barba.js since I can't make work but in my original post, the function is called and I get the console.log("page transition" but the animation with the yellow stripes doesn't show and I have no clue to why it doesn't. I am not sure if I missed something in my setup or the animation code itself! However, I appreciate your input and I hope it cleared up some confusing from my part!

itsmeagian · April 30, 2020

Alright update:

My main problem seems to be GSAP setup, I tried with a earlier project where I had succes with GSAP and the animation worked there after changing transformOrigin from "bottom left" to "left bottom". So now the animation works!

Now I just either have to setup Barba.JS correctly or do what ZachSaucier suggested. If anyone can advocate why Barba.JS is a better solution or/and why my script from the video doesn't work, I would appreciate it very much!

ZachSaucier · April 30, 2020

26 minutes ago, itsmeagian said:

I never got the page transition console log in my function pageTransition() so the function is never called.

Hard to say what the issue was without seeing a demo that reproduces the error. My guess is that you're trying to use modules in an environment that doesn't support it.

26 minutes ago, itsmeagian said:

the animation with the yellow stripes doesn't show and I have no clue to why it doesn't

That's because you have the tweens inside of the function. Here's what's happening:

You create the timeline. Since the timeline is not paused, it tries to play. Since there's nothing to play, it finished immediately.
You then call the function. The function adds new tweens to the timeline. But the timeline is already done so it doesn't play them.

What you should do instead is create the timeline with all of its tweens before the function call. Then inside of the function you use the .play() control method to play the timeline. Note that I also upgraded your code to GSAP 3 while I was at it.

See the Pen QWjqWBM?editors=0010 by GreenSock (@GreenSock) on CodePen

If you want that to fire on click instead, you should prevent the default behavior of the click event and call that function. This is part of what Barba.js would do for you. Barba also loads the next page's context and updates the page history so that you can load new content without actually going to the other page(s).

See the Pen WNQZNgO?editors=0010 by GreenSock (@GreenSock) on CodePen

I highly recommend that you give the GSAP Getting Started article a read as well as my article on tips to animate efficiently because it talks about using control methods.

Notifications

Messages

GSAP Beginner, animation not showing

Recommended Posts

itsmeagian

Link to comment

Share on other sites

ZachSaucier

Link to comment

Share on other sites

itsmeagian

Link to comment

Share on other sites

itsmeagian

Link to comment

Share on other sites

ZachSaucier

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members