Why progress is not working?

[TeddyBrown]

Hi everyone!

I'm testing smooth scrolling with a scroll driven animation and I don't understand why the progression of the animation is not working. 

Could everyone please help me ?

Thanks in advance!

Teddy

See the Pen XWJNjqw by teddybrown (@teddybrown) on CodePen

[GreenSock]

I didn't have time to try to parse through all your logic and figure out what you're trying to do, but I suspect the problem has to do with the fact that you're calling .to() on each timeline on  [almost] every tick...which appends another tween to that timeline, so you're basically making a super long timeline with a bunch of appended tweens of the same element. I wonder if maybe you don't understand how timelines work. Are you just trying to have one animation for each element, and affect its progress()? If so, just create one tween for each, don't constantly add more and more animations. And set the tween's progress() accordingly. 

 

If you're still having trouble, please give us more details about exactly what you expect to happen. And if you could simplify your codepen even more, just to make it crystal clear what you're trying to do and minimize the chances of contaminated logic or confusion, that'd be awesome

 

Happy tweening!

[TeddyBrown]

Hi Jack and thank you for your answer!

Actually what I want to do is just replicating what Scrollmagic do without using it, so yes, as you said, animate each element while scrolling. 

Now after adding one tween for each timeline it works as expected but I still miss something.

What I would like to have is something really smooth (this is a perfect example: Pleanaire).

I've seen somewhere here in forum, that I could use a proxy tween to make the progress smooth, do you(all) think it's a good solution?

And since you mentioned it, could you(all) give me some advices about the logic and the structure of the code (I know i'm really bad at it)?

 

Thank you very much guys! 

Teddy

[ZachSaucier]

3 hours ago, TeddyBrown said:

I've seen somewhere here in forum, that I could use a proxy tween to make the progress smooth, do you(all) think it's a good solution?

Yep, that's a good solution. This thread shows one approach of how to structure it:

 

[mikel]

Hey,

 

Just another concept:

 

See the Pen XgpJzY by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[mikel]

Hey @TeddyBrown,

 

You could also use the intersectionOberver for your intention:

 

See the Pen ZZrpmj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[TeddyBrown]

Thank you guys for your answers!

@mikel Yeah, I've read about Intersection Observer API but I thought it was redundant since I was already detecting scrolling. 

@ZachSaucier The example of OSUblake is great, but it's not so easy to understand how to apply the logic on animate elements.

 

Anyway, I will try some approaches and then come back if something is not clear!

 

Thanks, 

Teddy