Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
inkorporation

Multiple tweens for the same object in ScrollTrigger

Go to solution Solved by GreenSock,

Recommended Posts

Hello,
I'm stuck for a few days on a very simple animation.
I have tried several times to understand the process to have a fluid animation.
https://codepen.io/projet-360/pen/xxrwaxL
Here is another codepen that summarizes the expected behavior, only on this one, the return to the top of the page is jerky.
Then I tried to put it in a toArray.

Would you have an idea to have on one hand "toArray" and an animation that takes the next key avoiding the problems of properties.  

Thanks in advance for your answers.

ps:sorry for my jerky explanation :') I am not English
 

 

See the Pen PojPBLx by projet-360 (@projet-360) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @inkorporation

 

I read your question a few times and I'm sorry but I don't understand what you're asking. Can you please try to explain? What exactly isn't "fluid"? I didn't see any jerky animation. But I did see very pixelated letters on some devices because you're scaling up so much. 

 

Also, do NOT enable scroll-behavior: smooth in your CSS because it interferes with ScrollTrigger functionality. 

 

I would also recommend setting overwrite: true because if you scroll quickly back and forth, you may be creating conflicting tweens since you're doing them dynamically inside the onEnter. 

 

expoScale() won't work if you don't load the EasePack, just so you know. That's one of the few eases that aren't in the core. 

 

Lastly, I don't see why you're doing y: "0%" - you never animate y to any other value, right? And if your goal is to use percentage-based "y" values, it's typically best to use yPercent instead of y so that you can layer them properly. 

 

I suspect you might be better off creating ONE timeline that contains all the [staggered] animations and just hook that one timeline up to one ScrollTrigger with scrub: true (or a number). 

  • Like 2
Link to comment
Share on other sites

Wow! Thanks for this answer Jack!
I don't have much experience with GSAP. I've done a few courses but I'm missing a lot of resources and what you're telling me is already great for me. Also this is my first time posting a question on a forum. And your responsiveness is awesome.

Quote

I read your question a few times...


What I'm trying to do is to navigate on the z axis through the scale. The "o" allows me to aim at the middle of the screen in debugging. Then I can make my graphic plans. So I'm looking for the most robust and intelligent way to find a working code on this part. 
So my goal is to make a zoom effect. 
 

Quote

Also, do NOT enable scroll-behavior: smooth ...
I would also recommend setting overwrite: true because ...
expoScale() won't work if you don't load the EasePack...
Lastly, I don't see why you're doing y: "0%" ...

 

I will put at the end a codepen with the correction of all that you had brought me.

Quote

I suspect you might be better off creating ONE...

That's what I would like! But I'm not strong enough in Javascript to understand how to do it simply. I looked at a lot of posts on this subject, but I can't figure it out.

First :https://codepen.io/projet-360/pen/PojPBLx
On the codepen of the first message my animation has no jerks, it is perfect, when you up and down it's smooth. I would like to add an animation that launches the scale of 0 for all the following keys. Like this: https://codepen.io/projet-360/pen/xxrwaxL
00.png.fe86f6c60d237bbef8afda7e8685e8a1.png

in my diagram when I fast forward the content of the page. The timelines cut each other off. How can I create a single one?
By having the smoothness of the first one. 

Thank you for your answer, I feel I will be able to solve my problem with you!
I would be lucky to have you validate my work in compliance with GSAP rules.
And this project is close to my heart so you would make me happy.

Link to comment
Share on other sites

Hey INKORPORATION,

 

It may well be that I don't understand your intentions properly.

This would be my interpretation.

 

See the Pen 0de2740e35f205301f110ae226aa8386 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 5
Link to comment
Share on other sites

Hello Mikel,
Thanks for your help.
What I am looking for is not exactly that. It is more complex.

I use div to have a container at the size of the screen.

 

What I'm trying to do is to navigate on the z axis through the scale. The "o" allows me to aim at the middle of the screen in debugging. Then I can make my graphic plans. 

First :

See the Pen PojPBLx by projet-360 (@projet-360) on CodePen

 

00.png.fe86f6c60d237bbef8afda7e8685e8a1.png

in my diagram when I fast forward the content of the page. The timelines cut each other off. How can I create a single one?

Like this:

See the Pen xxrwaxL by projet-360 (@projet-360) on CodePen


On the codepen of the first message my animation has no jerks, it is perfect, when you up and down it's smooth. I would like to add an animation that launches the scale of 0 for all the following keys.

 

Link to comment
Share on other sites

Here's a quick demo of how I might approach it, but I might be misunderstanding your goal: 

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

 

The concept is to use a single timeline that you scrub. Skip all the pinning hassles by making everything position: fixed and just stretch out the <body> height for scrolling. 

  • Like 3
Link to comment
Share on other sites

Hello Jack !
The idea is there!
Thanks a lot for your help !
I worked on this idea. the first div must be presented with a scale of 1. I was able to find a compromise to have this rendering ^^. 

See the Pen rNweWLY by projet-360 (@projet-360) on CodePen


On my codepen , 
start: "top-=1000%",
scale: 250, 
ease: "expoScale(1, 15400000000000)", 
allow me to calibrate the spaces. But it's not very meaningful.
Now that you can see the final result, do you see a better way to do it?

 

Thanks again for your help, you were really able to lead me to get this done with scrolltrigger.
I have already done it with scrollmagic.
I am looking for the best code for performance. Below you have a video that shows a practical implementation

 

 

Link to comment
Share on other sites

  • Solution

If your only problem with my previous demo was that it needed to start with the first section at scale: 1, here's a fork: 

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

 

If your alternate way of doing it is working for you, great. I don't really have time to analyze all of what you're doing and then provide additional alternatives, but hopefully we've covered enough here to give you some solid options. And yes, in all my tests ScrollTrigger performs better than ScrollMagic (plus it has a lot more features). 

 

Enjoy!

  • Like 4
Link to comment
Share on other sites

Yes, you really did it! Thank you very much Jack.

it's really huge for me !!

how can I thank you ?

Link to comment
Share on other sites

1 hour ago, inkorporation said:

how can I thank you ?

Happy to help. You don't need to do anything - we try to bend over backward for our customers including those who haven't paid us anything. We trust that if we serve well, the market will respond and we'll be fine. Virtually all of our support comes from Club GreenSock. If/When you're ready, you are welcome to join but please don't feel any pressure. 

 

Enjoy the tools!

  • Like 1
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.
×