Blog

All through the upcoming demos that are beginner-friendly, the markup and idea will stay roughly the identical; there will probably be a gallery of photos the place solely the primary one will probably be seen initially. As we scroll, the gallery will grow to be sticky, and at that time, all its photos will seem in numerous methods.

Please be aware that this tutorial assumes a fundamental understanding of GSAP. Moreover, as we gained’t go into nice element in every demo, the easiest way to grasp how all these work is through attempt to error. Fork them, change the settings, learn the documentation, and examine the generated code to see what’s occurring below the hood.

For all of the demos, I’ve set the top worth to +=500% which can make the animation longer. This fashion, the gallery will probably be sticky for 500% further scrolling after its preliminary begin. For example, if the beginning place is 1,000px, the top place will probably be round 6,000px. To see this in motion, print the beginning and finish scroll positions of your ScrollTrigger occasion. Choose a smaller worth in case you choose a faster sticky impact.

1. Proper-to-left horizontal animation

On this first case, now we have some full-screen slides. As we scroll, we’ll transfer all slides concurrently to the left by giving them a adverse translation X worth.

2. Left-to-right horizontal animation

However what if we need to reverse the earlier animation and obtain a right-to-left motion?

In such a case, we’ll assign the dir=”rtl” attribute to the slides container and a constructive translation X worth to all slides.

3. Proper-to-left horizontal animation (nesting)

On this barely extra advanced instance, we’ll construct on the primary demo and use ScrollTrigger’s containerAnimation approach to create nested ScrollTriggers. That mentioned, through the horizontal motion of our slides, we’ll watch when their captions come into sight after which animate their content material.

4. Proper-to-left horizontal animation (various)

Shifting on, now let’s alter the slide width to be at most 50vw, relying on the display screen measurement. This time, as a substitute of shifting the slides, we’ll transfer their wrapper. 

The quantity of motion now we have to scroll will outcome from subtracting the slides’ container width (together with the non-visible content material) from the window width. 

Final however not least, to make the impact responsive, we’ll use function-based values (see additionally this web page) and apply invalidateOnRefresh: true through the ScrollTrigger configuration settings.

5. High-to-bottom horizontal animation (stacked sections)

On this situation, we stack the slides and conceal their captions. As we scroll, every slide will seem on prime of the earlier one whereas its caption will fade. Because the slides are stacked, we’ll present them sequentially by staggering them.

Discover the usage of the “<" image that makes the captions’ animation occur in the beginning of the related slide animation.

In the identical approach, we are able to apply a bottom-to-top animation.

6. Proper-to-left horizontal animation (stacked sections)

Following the earlier demo, right here now we have the identical animation idea. This time, the animation motion will happen from proper to left whereas the captions stand to the left.

In the identical approach, we are able to apply a left-to-right animation.

7. Clip-path horizontal animation (stacked sections)

On this final demo, the slides stay stacked however seem with a formidable bottom-to-top clip-path animation. 

For this animation sort, we first assign applicable z-index values to the slides.

In fact, we are able to alter the clip-path animation path as we want.

Conclusion

That concludes one other GSAP tutorial, of us! I hope you loved the scroll-based sticky sections we constructed at present and gained some inspiration! Go forward, dive into ScrollTrigger’s docs, be artistic, and construct much more wonderful stuff!

Final however not least, I’ve added all of the demos of this tutorial to a CodePen Assortment. Be sure you test it out and provides it some love!

As at all times, thanks loads for studying!