Can't make animation properly with ScrollTrigger

[AsKadir]

Hey!

First of all, thanks for this great plugin!!!

 

But I have some trouble,

when you enter a block,

left side should be pinned and it's working good,

but after entering every content block I want to remove "-=100" of yPercent of all spans,

but all I'm getting only restart animation, not adding "-=100".

 

If you uncomment in css .numbers overflow:hidden; you will understand what I want.

What am I doing wrong?

See the Pen MWaBVEB by ChicagoJostik (@ChicagoJostik) on CodePen

[ZachSaucier]

Hey Aslan. The issue is that your target selects all of the spans so naturally it's going to animate all of them every time. In order to have it only animate one, your target should only be the target that you want to animate. There are a number of ways to do that. Perhaps the best with your current setup is to pass in the index to the .each() function and then use that index to select from a list of spans that you have. For example:

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

[AsKadir]

9 minutes ago, ZachSaucier said:

The issue is that your target selects all of the spans so naturally it's going to animate all of them every time

Hey, Zach! It's exactly what I want, I want all spans move up -100% every time the scroller enters every content.

If you uncomment overflow hidden in my example as I wrote, you will understand what I want.
So it will be like pistol magazine with bullets. If you enter a first content the bullet with number 00. will be out and bullet with number 01. will come and etc.

 

Basically my problem that yPercent: "-=100" not working properly, it's not removing minus 100% from state that it was.

It's working the same like if I wrote yPercent: -100.
Did I make sense?

[ZachSaucier]

5 minutes ago, AslanGoi said:

It's exactly what I want, I want all spans move up -100% every time the scroller enters every content.

If you uncomment overflow hidden in my example as I wrote, you will understand what I want.

I see.

 

5 minutes ago, AslanGoi said:

my problem that yPercent: "-=100" not working properly, it's not removing minus 100% from state that it was.

It's working the same like if I wrote yPercent: -100.

It is working properly, just not how you expect it to work. The issue is that each tween gets setup at the start. So the -=100 is relative to the starting value of 0. So that makes it look like the tween is repeating, when in fact it's different tweens that all have the same value.

 

A simple solution is to use a .fromTo instead:

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

[AsKadir]

@ZachSaucier Thanks a lot!!!

[AsKadir]

@ZachSaucier Zach, sorry for disturbing you!

But if you refresh your codepen and look,

the spans are set -200% by default.

I can't understand why it's happening.

So it starts from 02., but if you enter everything working correct.
Sorry for my explanation, just look again.

[ZachSaucier]

You just need to change the values to what they should be  

I think you want yPercent: -((index - 1) * 100) and yPercent: -(index * 100), instead?

[AsKadir]

2 minutes ago, ZachSaucier said:

You just need to change the values to what they should be  

I think you want yPercent: -((index - 1) * 100) and yPercent: -(index * 100), instead?

I tried and it's not working like I expected.

[ZachSaucier]

What's not working? 

[AsKadir]

5 minutes ago, ZachSaucier said:

What's not working? 

The spans are set translate(0%, -100%) before animation has been animated.

I can't understand why.

And animation is not as expected, but this is not a problem I think.

 

The main problem that the spans are set -100% before animation. Maybe there is possibility to use "-=100%" somehow?)

See the Pen rNxNxjo by ChicagoJostik (@ChicagoJostik) on CodePen

 

[ZachSaucier]

What number do you want it to be before any section is reached?

[AsKadir]

Just now, ZachSaucier said:

What number do you want it to be before any section is reached?

00. and when I enter first block 01. and etc.

[ZachSaucier]

The reason why it's happening is because .from()s and .fromTo()s set the fromVars immediately by default. Normally you can set immediateRender: false to fix that. However, ScrollTrigger currently forces the first render, though we can't seem to remember why we do that.

 

For now we've added the ability to skip that render if immediateRender is set to false. So if you use the beta version of the ScrollTrigger plugin it'll work so long as you have immediateRender: false (you might need to hard refresh for the version to update).

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