Help converting TimelineLite to gsap.timeline()

[EduDev]

Hello,

I'm new to gsap and loving what it can do. I was following a tutorial for page transitions and I have run into errors with TimelineLite. I understand in version 3 it's recommended to use gsap.timeline instead. Are you able to help me update the following code?

import Highway from "@dogstudio/highway";

import { TimelineLite } from "gsap";

class Fade extends Highway.Transition {

in({ from, to, done }) {

const tl = new TimelineLite();

tl.fromTo(to, 0, 5, { left: "-100%", top: "50%" }, { left: "0%" }).fromTo(

to,

0.5,

{ height: "2vh" },

{

height: "90vh",

top: "10%",

onComplete: function () {

done();

},

}

);

}

out({ from, done }) {

done();

}

}

export default Fade;

 

[Dipscom]

Hello TomFawcett64,

 

Welcome to the forums!

 

See here how the current GSAP syntax is meant to be, also note that it is recommended to use "x", "y" instead of "left", "top".

 

  const tl = gsap.timeline();

  tl.fromTo(
    to_target,
    {
      left: "-100%",
      top: "50%"
    }, {
      duration: 5,
      left: "0%"
    }
  )
  .fromTo(
    to_target,
    0.5,
    {
      height: "2vh"
    }, {
      duration: 0.5,
      height: "90vh",
      top: "10%",
      onComplete: function () {
        done();
      }
    }
  );

 

 

[ZachSaucier]

Some additional notes to what Dipscom said:

1. It looks like he forgot to remove the 0.5 from the position parameter of the second tween. 0.5 is also the default so you could leave it out. 
2. The onComplete could just be onComplete: done. Perhaps the onComplete would be better placed inside of the timeline vars as well.
3. The OP is missing some properties in their fromTo vars. Perhaps it's better just to use .to()s instead?
4. This is likely an opportunity to use GSAP's keyframes functionality if the OP wanted to.

[Dipscom]

Ops... Not enough checking before posting.

[EduDev]

7 hours ago, Dipscom said:

 

Hello, Thanks for the replies. My code seems to have gotten rid of many errors. I believe there is a problem with my imports as it is now is saying:

Module not found: Can't resolve 'gsap'

Could you help me update the imports?

 

[Dipscom]

Hey there!

 

I hope you can appreciate it is quite hard to help troubleshoot blind. Can you give us some context? Can you create a minimal demo that replicates what you are doing? Otherwise it is a guessing game from our part, which is not really a great use of our resources as there are some many hours in a day for us to help everyone that comes by.

 

There is guidance in the docs on how to use bundlers and GSAP - https://greensock.com/docs/v3/Installation.

[EduDev]

Hello,

here is the link to all the code:

https://github.com/TomFawcett/EduMemory

The only two files that should be involved in the animation is transition1 in the src/components and index.js.

I am trying to get the animation to happen to all the pages (except for "Home") when I click the buttons in the home page and is redirected to the other pages.

[ZachSaucier]

Hey Tom. Unfortunately cloning your repo, getting the environment set up, figuring out what's going wrong, and fixing it for you is a little out of scope for what we're able to provide for free in these forums. However if you're able to create a minimal demo using something like CodePen or CodeSandbox we'd be much more likely to be able to provide help  

[Dipscom]

Looking at your `package.json` I don't see GSAP being listed as a dependency - That's probably the root cause of your "Can't resolve gsap" error.

 

What is this tutorial that you are following? Does it use GSAP as the animation engine or is it a totally unrelated tutorial that you are trying to implement adding GSAP to it?

[EduDev]

I did add gsap using npm install gsap. The tutorial I am using is related to gsap and he uses it in the tutorial. This is the link incase you want to see the video: 

My goal is for when I click a button that redirects me to another page, there is an animation for that. I understand you can not do anything for me or have the time to walk me threw it step by step. Could you possibly help me with an article or video that you know could help get this done for me?

[Dipscom]

I can't comment on what you did or not. I can only say that, on the repo you have linked, looking at the package.json file, I see no reference to GSAP as a dependency.

 

Whenever you try to run this project if you have an import statement that refers to GSAP in the node_modules as in:

 

import { gsap } from 'gsap';

it will fail, throwing errors given that there going to be no GSAP found.

 

I have zero experience with React and will not be able to help you with that, however, I am happy to assist you as best as I can.  I'll watch this tutorial you have linked later on so you and I can be on the same page.

 

But, do update your package.json to inlcude GSAP as a devependency or you will not get rid of your errors.