HORIZONTAL CAROUSEL ON SCROLL - GSAP Elementor ScrollTrigger

✅ Save time - get Elementor template:
lifeonablock.c...
✅ Code and CSS classes used:
Code: lifeonablock.c...
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.

[@nicopalmkvist]

60 sec walkthrough of my best Elementor Template: kzbin.info/www/bejne/rYTZZXZpp6qjY8k

[@EkhyOk]

thank you soooooooooooooooo much please, we need more tutorials. Elementor + GSAP = ROCKS!!!

[@nicopalmkvist]

I couldn’t agree more 🤩

[@videowebsite2018]

I'll be using this on a website I'm creating for a client. Thank you 😍

[@mustaphaceesay1034]

The example website you showcase in the video is well executed ❤ could you please make an entire tutorial on how to build the exact website from scratch. Thanks for the efforts! 🎉

[@alfredliang8101]

@@nicopalmkvist Don't doubt that, your video deserves that

[@learnearn3166]

Thank you for such a nice tutorial

[@nicopalmkvist]

Appreciate comments like these - thank you! 🥰

[@alfredliang8101]

Hi, Nicolai. Is it possible to use just css or javascript code on creating scroll-snap effect on the elementor free website?? If it's possible, I wish to have the tutorial for this cuz i had been searching for such tutorial all over the internet but coudn't find one. Please🙏🙏🙏🙏😥😥

[@nicopalmkvist]

Do you mean like I did in this video: kzbin.info/www/bejne/m2XbeYKObMmXpM0

[@alfredliang8101]

@@nicopalmkvist No I mean like this, but this one is in divi, is it possible in Elementor free?? kzbin.info/www/bejne/rmbQpqehjNB4kMUsi=DGTOTjCqEzDY2HUI

[@alfredliang8101]

@@nicopalmkvist I mean something like this but in elementor free. Is it Possible?? kzbin.info/www/bejne/rmbQpqehjNB4kMUsi=LpKXd7bo_-SS8nu2

[@alfredliang8101]

@@nicopalmkvist I mean something like this, but in elementor free version: kzbin.info/www/bejne/rmbQpqehjNB4kMUsi=kxnYpQesKGIOQ-82

[@alfredliang8101]

@@nicopalmkvist I mean something like this but in elementor free version kzbin.info/www/bejne/rmbQpqehjNB4kMUsi=kxnYpQesKGIOQ-82

[@NazirAljiwala]

what about the page speed if we are using external js and libraries ?

[@nicopalmkvist]

Good question. My goal with this template was to create something lightweight and super fast, which I achieve by using only Elementor and no other third-party plugins. Often, you need several plugins to create animations and functionality like this, but since I only use code, it impacts the speed much less. Hope that makes sense.

[@sameerpatelxyz]

Hey man thanks for this tutorial this is very helpfull, i have commented on 360 degree video scroll to take effect futher please look. Thanks

[@nicopalmkvist]

Hi Samer, I’ve read your second comment, and I understand what you're trying to achieve. However, it requires a change in the JavaScript code. I recommend copying my javasvript code from lifeonablock.com/video-gallery-on-scroll/ and pasting it into ChatGPT, explaining what you want to change. I do this often when building these things, and it usually works. 🦾

[@secrettalent8123]

Please next video on Image Wave Effect

[@nicopalmkvist]

@@secrettalent8123working on two videos at the moment, and the image save effect is One of them

[@secrettalent8123]

@@nicopalmkvist Thank you so much

[@secrettalent8123]

I also request you to make some videos on 3D website like vorstudio have!

[@agnisamansfield4038]

Allen Jose Garcia Mark Hernandez George