HORIZONTAL CAROUSEL ON SCROLL - GSAP Elementor ScrollTrigger

Опубликовано: 13 Ноябрь 2024
на канале: Nicolai Palmkvist

11,822

379

✅ Save time - get Elementor template:
https://lifeonablock.com/template-hor...

✅ Code and CSS classes used:
Code: https://lifeonablock.com/code-slider/

In this Elementor GSAP tutorial, I’ll go through how I built a horizontal image slider that moves when you scroll. To create the ScrollTrigger animation effect I use the GSAP library and integrated it into Elementor. This makes it unique, as image slides or carousels are often navigated by clicking on arrows instead of being triggered by scrolling. Everything is built with the Elementor flexbox container without any additional plugins.

What I love most about this horizontal image slider is that it breaks the usual pattern of vertical scrolling. It looks so cool and makes website visitors stop because it slides in a way they haven’t seen before.

So, to summarize, in this video, I’ll show you step-by-step how to create this in Elementor for your own website, using only a few lines of code.