[Help converting TimelineLite to gsap.timeline()]

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?

[Help converting TimelineLite to gsap.timeline()]

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.

[Help converting TimelineLite to gsap.timeline()]

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?

 

[Help converting TimelineLite to gsap.timeline()]

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;