ScrollTrigger Reverse Scrolling Effect

[msa]

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

[mvaneijgen]

Hi @msa welcome to the forum!

 

You need to make it from scratch. This uses just the normal scroll behaviour of the browser which scrolls from top to bottom, but ScrollTriggers are created for each section that just pins it in place. 

 

Personally I always like to start with a animation (even for simple things like this), because then when you eventually get the question we want the slides to come from the top (or the left, maybe even a bit diagonal) you can just change the animation and you're golden. 

 

Keep in mind that the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Personally I would start with a timeline, change your CSS so that all the sections are right on top of each other and then animate each section .from() yPercent: -100 and than you just need one ScrollTrigger to get the desired effect

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out the video below!

 

Hope it helps and happy tweening! 

 

 

[mvaneijgen]

Eh, I had some time to spare...Check it out. I've placed comments in the code to better explain things. I've created two animations one that uses a stagger (commented out) and one that uses a custom animation for each section, checkout how simple this is. ScrollTrigger is commented out, but you can easily turn it on, but it is good to keep in mind that ScrollTrigger is just doing the animation you've created tied to the scrollbar. 

 

Hope it helps and happy tweening! 

 

See the Pen JjxmjrE by mvaneijgen (@mvaneijgen) on CodePen

[msa]

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  

[msa]

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

[msa]

@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 🙏

[mvaneijgen]

Have you read the following from the learning center?

 

https://gsap.com/resources/fouc

[msa]

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! 

[mvaneijgen]

48 minutes ago, msa said:

it's overwhelming with all this information about the library 😅

Ha I get that, I'd just watched all the videos on the YouTube channel (twice) when starting out. But the flash of unstyled content is just CSS rendering before Javascript gets a change, so that  post gives you a smart way of handling that. 

 

Geen probleem en veel geluk!

[msa]

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! 

[msa]

[mvaneijgen]

The logic would be the same as the fouc docs explain. Make your site as you want with CSS and then when the JS has loaded .set() your elements how you want them to be for GSAP or you can add a class with JS. That all if for you to decide and you have to find what best suites your project.