Reverse fake scroll

[tobe21]

Hi, Im doing an animation where i do a fake inverted scroll, so the element came from the top to the bottom instead.

 

The issue start when i try to make animation inside of this containers, for some reason the trigger inside of the container doesnt work properly.

 

Here is a codepen (is a fast code pen so i did some of the height fixed in the animation, in my project this is calculated from the element):

 

The second trigger (the container one) is not in the correct position like is behind the actual position of the element.

 

Thanks in advance :D.

 

 

See the Pen KKroYqO by betovicio (@betovicio) on CodePen

[Cassie]

Hi there!

 

Sorry but that's not what containerAnimation is made for, it's purely for horizontal scrolling sections set up in a specific way. (as per the videos and docs)

From a glance it looks like you'll likely be best off making one big scrubbed timeline, but maybe you can clarify exactly what is it that you're trying to achieve, maybe we can advise?

[tobe21]

29 minutes ago, Cassie said:

Hi there!

 

Sorry but that's not what containerAnimation is made for, it's purely for horizontal scrolling sections set up in a specific way. (as per the videos and docs)

From a glance it looks like you'll likely be best off making one big scrubbed timeline, but maybe you can clarify exactly what is it that you're trying to achieve, maybe we can advise?

The project is in react at the moment, the reason to make this tiles independent is because they are coponent, Yes I saw that the animation container is made for horizontal scroll, but i try it for vatical and kind of work.

 

So in your opinion is better to make a big scrubbed timeline than try to make independent tl animations?

[tobe21]

43 minutes ago, Cassie said:

Hi there!

 

Sorry but that's not what containerAnimation is made for, it's purely for horizontal scrolling sections set up in a specific way. (as per the videos and docs)

From a glance it looks like you'll likely be best off making one big scrubbed timeline, but maybe you can clarify exactly what is it that you're trying to achieve, maybe we can advise?

I forgot to say, in this website this tiles scroll from top to bottom, they are inverted, not like the regular scroll, inside of this tiles i need to execute other animations when they reach the vp, but i cant make the other animations work because the triggers dont work, they just dont follow the elements, its like the triggers are in a different position.

[Rodrigo]

Hi,

 

In order to clarify, you want the elements to come from above when you scroll down and from below when you scroll up? If that's the case, as far as I know, that is not possible in a native way. Document flow is from top to bottom, not the other way around (again as far as I know, maybe is possible and I'm just not aware of that).

 

For that you'd have to setup your CSS in order to accommodate that particular scenario and create your animations so they happen in that way, like move an entire container with a timeline from the top and include other animations as you scroll down/up. Then you can add ScrollTrigger to the mix in order to create that.

 

Something like this:

See the Pen rNQvpqe by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[tobe21]

14 hours ago, Rodrigo said:

Hi,

 

In order to clarify, you want the elements to come from above when you scroll down and from below when you scroll up? If that's the case, as far as I know, that is not possible in a native way. Document flow is from top to bottom, not the other way around (again as far as I know, maybe is possible and I'm just not aware of that).

 

For that you'd have to setup your CSS in order to accommodate that particular scenario and create your animations so they happen in that way, like move an entire container with a timeline from the top and include other animations as you scroll down/up. Then you can add ScrollTrigger to the mix in order to create that.

 

Something like this:

 

 

 

Hopefully this helps.

Happy Tweening!

 

21 hours ago, Cassie said:

Hi there!

 

Sorry but that's not what containerAnimation is made for, it's purely for horizontal scrolling sections set up in a specific way. (as per the videos and docs)

From a glance it looks like you'll likely be best off making one big scrubbed timeline, but maybe you can clarify exactly what is it that you're trying to achieve, maybe we can advise?

Thank you for your answers, I will do in js the scroll work inverted and then make the page scroll from bottom to top, so i can use triggers (for more synchronized animation because the customer sometimes change the content).

 

At least now i know is not a easy way to do it

 

Thanks again for your time.