[ScrollTrigger Reverse Scrolling Effect]

[ScrollTrigger Reverse Scrolling Effect]

Greetings @mvaneijgen, I've implemented the autoAlpha trick and it's working. But this way, my Slides become transparent (because of opacity), which does not give me the flow I hoped for. Is there a way to handle this issue without affecting the opacity of my Slides?

All help is appreciated 🙏

 

Hartelijk dank! 

[ScrollTrigger Reverse Scrolling Effect]

1 hour ago, mvaneijgen said:

Have you read the following from the learning center?

 

https://gsap.com/resources/fouc

I will read it and the remaining docs for common issues, and will let you know what I managed to do. Even though I should have done it sooner, it's overwhelming with all this information about the library 😅

Hartelijk dank! 

[ScrollTrigger Reverse Scrolling Effect]

@mvaneijgen Hey, I'm experiencing a bug where the last slide briefly appears for 1-2 seconds before the animation starts and the first slide becomes scrollable. This behavior wasn't intended and creates a jarring visual effect. Any hints what could be a possible issue?

 

Here is my Codepen, and if you refresh the website for 2-3 times, you would see that it shows Yellow section for a split second. And In my real case where I'm showing images as slides, it increases from split second to 1-2 seconds. 

 

See the Pen NWJxWQa by msa-black (@msa-black) on CodePen

 

Any hint would be helpful 🙏

[ScrollTrigger Reverse Scrolling Effect]

I forgot to update about this, it's working great! Thank you so much for your help and fast response

[ScrollTrigger Reverse Scrolling Effect]

Thank you @mvaneijgen for your kind advice and quick response. I will try what you told me, and I will update you in the meantime  

[ScrollTrigger Reverse Scrolling Effect]

Greetings everyone,

 

I have recently started to work as a Shopify Developer and I have a task to tackle. The developer before me used ScrollTrigger to animate the Home page. It would display one div (slide) that would cover the full size, and when scrolling, the next div coming from the bottom would overlap the existing one, continuing the scroll this animation would repeat until there were no more slides left. Now the client requested that I have this same animation but in reverse, when scrolling, slides would appear from the top and overlap the existing one. Is this possible with this current JS code, or do I need to make this from scratch?

 

I've managed to find a Post here that has CodePen that shows what is my current animation.

See the Pen XWOxrgO by msa-black (@msa-black) on CodePen