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

[@rafa_ceazar]

I try to get template, but think I'm working on another project, because in a section there is an image pinned, an image.

[@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 😍

[@Uwe-u7k]

Great video and explanation for this. Unfortunately, it does not work on mobile devices. I did it exactly according to the instructions but unfortunately it doesn't work. Is there a way to fix this?

[@sepcomp-u7b]

works with no problem

[@funmiamarvi]

Awesome tutorial! Thank you

[@gopoo]

Thanks a lot for this tutorial.😊

[@stephanhullin1067]

thanks you very much

[@Gambarkan3D]

wow, you are my knight bro!!

[@cinnamonholmes917]

great video!

[@learnearn3166]

Thank you for such a nice tutorial

[@nicopalmkvist]

Appreciate comments like these - thank you! 🥰

[@ferbaissi]

excelente tutorial!!!!

[@pixelturm]

Really good, works at desktop fine and smooth .. on mobile .. tested on Iphone7 & Iphone12 .. in safari and chrome .. there ist a stuttering while scolling

[@chayanjunwal3967]

Bro i am become a fan of you!

[@lobstanleygrahan4963]

I loved your menu bar. How did you make it separate?

[@LucTrésorDIKONGO]

So cool video

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

[@DanielWoodward-d5o]

Brilliant. it works. However all boxes have to clear, leaving a big blank space before vertical scrolling continues. It would be better if the scroll continues when the last container enters the screen, leaving the content above visible as you scroll down. How to control this variable?

[@eduardofigueiredo9016]

Thnaks for the amazing tutorial. I'm wondering how can I add another slider below it and make it slides from left, so they will cross (one from right and one from left). Is that possible?

[@nightcoreprince2651]

Can u make tutorial for header and footer

[@TylerMeyer-yk1lr]

Hi there I hope you are keeping well, I have an issue where the containers are not scrolling. I followed the video exactly but it still doesn't scroll.

[@אולהאוריין]

Hi and thank you so much for the tutorials!! how can i make it work for Hebrew? i tried to change direction but its still scroll to the left and i need it to go right. How can i make it work? Thank you

[@virskyline]

Your tutorial is good, but it's not working. I followed every step carefully, yet the layout is not smooth, and there is white space left at the end. Additionally, the containers are not scrolling horizontally as they should.

[@deepaktyagi1212]

He is write code is not working

[@rezwanshovon9959]

How to scroll fast or give automatic scroll in this effect, please elaborate or provide the code... Thank you in advance.

[@Mattéo-f9s]

Hi Nicolai, I've reproduced everything as in your video, except that when I scroll I have a big empty moment before continuing and exiting the container. That is to say, on my site I only scrolled through 3 boxes, except that for me it doesn't stop after the third and last box, the scroll continues horizontally at a certain point it switches back to scrolling vertically... How can I adjust this?

[@nicopalmkvist]

@@Mattéo-f9s My best guess is that you’re dis not enable “stay in column” in one of your containers under advanced -> motion effect. If that dosen’t work then share a link to your website (remeber to add space between in your link or else I can see it in this comment section)

[@Mattéo-f9s]

@@nicopalmkvist Hey, no, you don't understand. Basically, I did put in one of my containers the fact of staying in the column, however, it's just that the horizontal scroll continues after I pass my boxes, and so, there's nothing displayed until I reach a certain point and go back to vertical scroll.

[@DanielWoodward-d5o]

@@Mattéo-f9s did you crack how to control when the vertical scroll resumes without all the blank space?

[@RenarsKrastins]

Dammit, its not working on free version of elementor, can not access sticky on top

[@Everyday-delight-foodies]

Is this product version of elementor

[@Bernify]

i recreated this but it does not work in mobile version... it does not stick when i scroll down in mobile version... it only works when i scroll up.. any fix?

[@gopoo]

Just check if there are any css(naming) conflicts

[@wonderhistoryfacts]

I followed every step but it is not working :(

[@relo1231]

Hello, please, how to make a slider without scroll?

[@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. 🦾

[@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.

[@NazirAljiwala]

@@nicopalmkvist Yes that makes sense, Thank You For the Reply

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

[@sangamkumarsingh04]

are you using Paid elementor or free?

[@nicopalmkvist]

@@sangamkumarsingh04 Paid / Elementor Pro

[@sangamkumarsingh04]

@@nicopalmkvist ok thnak you

[@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!

[@krisyau1]

Great tutorial, but it doesn't slide on mobile!😀

[@Webscloud]

i need elementor pro🥲🥲