Great change but workload increased

[Ctrl+Shift+f5 1 Likes (Newbie)]

Hi, 

I've been using GSAP 2 for around 2 months for now. 
By using the knowledge I have I've created some basic animations using it.

Now that the GSAP3 has arrived every thing looks a tini-tiny bit difficult.(but can be achieved)

I know its new and i also know this is the only place i can get support.

 

My problem is as follows,

I have used Tweenmax and scroll magic to create a basic effect. 
Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`.
As we have to Specify the animation at first in the Tweenmax and call them later using setTween.

How can I achieve it in GSAP3

 

One more important thing as you can see the page scroll is smooth on the page.
A friend of mine has given me the script to implement in the page that will make the page scroll smooth.

Now i have lost contact with him. I wonder If someone could re code the script for me. I would be more than thankful

Here is the codepen link for my example: 

 

Thanks in advance

See the Pen MWWBmWa by Wahed98666 (@Wahed98666) on CodePen

[OSUblake 18,497 Likes (Superhero)]

3 minutes ago, Ctrl+Shift+f5 said:

Now that Tweenmax has been merged in GSAP core I cannot use the `.setTween(t1)`.

 

Why not? ScrollMagic doesn't know the difference.

[OSUblake 18,497 Likes (Superhero)]

And I wrote that SmoothScroll page script, but it is not designed to work with ScrollMagic, and I don't have the time to troubleshoot smooth scrolling issues anymore.

[OSUblake 18,497 Likes (Superhero)]

It works fine with v3

 

See the Pen f18644c16bac9ddbb2efc61eccaee8d9 by osublake (@osublake) on CodePen

[Ctrl+Shift+f5 1 Likes (Newbie)]

37 minutes ago, OSUblake said:

 

Why not? ScrollMagic doesn't know the difference.

Have you gone through my code pen. Why is it not working there?

 

[OSUblake 18,497 Likes (Superhero)]

Isn't it working in the demo I posted? That's using v3.

[Ctrl+Shift+f5 1 Likes (Newbie)]

It says scroll magic is not defined

`jquery.min.js:2 Uncaught ReferenceError: ScrollMagic is not defined`

 

Ive linked the js files as follows

 

    <script src="assets/js/jquery.min.js"></script>

    <script src="assets/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>

    <script scr="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

    <script scr="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

    <script scr="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

[Ctrl+Shift+f5 1 Likes (Newbie)]

45 minutes ago, OSUblake said:

And I wrote that SmoothScroll page script, but it is not designed to work with ScrollMagic, and I don't have the time to troubleshoot smooth scrolling issues anymore.

Can you suggest me what should I do for the smooth scrolling of the page. Do i need to recode everything now  :_{

[OSUblake 18,497 Likes (Superhero)]

1 hour ago, OSUblake said:

Isn't it working in the demo I posted? That's using v3.

 

Maybe not. ScrollMagic needs to change the onOverwrite property.

 

 

Open an issue with them. ScrollMagic isn't a gsap product.

https://github.com/janpaepke/ScrollMagic

 

[Ctrl+Shift+f5 1 Likes (Newbie)]

It worked after I replaced the code from your pen. I don't know what the issue was. But its resolved right now.