Get the images I used for free here: lifeonablock.com/free-images Btw remember to use the "Canvas" layout in Elementor; otherwise, your page won’t be full width. 👆
If, however, the other containers are also moved with this code, it leads to overlapping of containers on the website. Do you have a solution for this?
Hi @Nicolai. Thanks for the great vid! I have a question that has already been asked, but not answered yet. When adding normal sections below these 4 pages, you can't reach them. Is there a way to stop the full page scroll to allow for more content (sections) below these 4 full page sections?
How do you replay the entrance animations for the headings ? By default they are only played for first entrance. Otherwise another great tutorial, loved it!
Hi Nicolai I absolutely love your videos and have been following them for awhile now, I really want to keep this effect but my website won't allow me to add in a header after using this effect do you know I can do that?
How can I have the pages work with the scrolling sequence if I have two sections? The hero is two sections, but I want it to scroll as if it is one. When you insert the javascript, it doesn't allow for seamless scrolling
Hello I am having trouble when I try to duplicate the "Bottom" again for Hero 2, the bottom image will not move like the 1st. the image is static and stays in one place cut out, it doesnt zoom out and show more of that bottom image while the rest of the container with my background will zoom and reveal more of its photo.
@@nicopalmkvist Also, I checked the javascript and see code that makes the page scroll to a specific section when you click a specific link with a specific ID name. So if you put a link (I used a heading widget) with ID #link1 that navigates to #section1 it should scroll automatically to section1. That works, but it doesn't work when I do the same with a #link2, #link3, #link4 When I click on #link2 it scrolls to #section3, when I click on #link3 it scrolls to section 4 and when I click on #link4 it scrolls even beyond section4. Yes, before you ask... I checked all the ID names in the links and in the section. Can you clarify this please, because I don't see an explanation in the tutorial how the navigation works.
This was actually one of my main goals with the project. This type of scroll snap slider is usually only possible with one of the popular slider plugins, which can slow down your site. With this solution, you only need a few lines of code, keeping your page lightweight and fast. You only need Elementor and thats it.
@@nicopalmkvist I tried. It should work, but something is wrong.. I tried multiple solutions today, other vids, chat gpt, etc.. nothing seems to work..
i wanted to buy the lifetime pass but on the website it's at 349$ but once you go at the checkout it changes to 549$ ... (Also why don't we see the girl anymore?)
Thanks for reaching out. The price change was a mistake, but it's fixed now. You can also use the discount code "BLACKWEEK" to get a discount this week! 💪 And as for Michelle, I love that you remember her! You can definitely say you're one of the OG followers. Would you like to see a video with her again? :)
![SPIN CAROUSEL ON SCROLL - GSAP ScrollTrigger Elementor [No plugin]](/img/1.gif)
Get the images I used for free here: lifeonablock.com/free-images
Btw remember to use the "Canvas" layout in Elementor; otherwise, your page won’t be full width. 👆
If, however, the other containers are also moved with this code, it leads to overlapping of containers on the website. Do you have a solution for this?
Wow, this is brilliant Nicolai
Thank you!
Another one! You really do keep the golden nuggets flowing. This makes slider revolution feel outdated. Thank you💫
🥰
Slider revolution Pro costs about 90 bucks for a lifetime-licence, for GASP you have to pay 200 per year 😞
@@pixelturm The gsap code I use is free for everyone, take a look in the description
@@pixelturm No its free, bro?
@@videowebsite2018 i misunderstood their license terms, it`s my bad, sorry guys
Another priceless dynamic banger! And LUV how it’s also mobile responsive!
Thanks, mate! I can always count on you.
The imagery is really nice, wow
Thanks! Most of them are actually AI-generated, just using a few short prompts. Maybe I should make a video on how to do it someday.
@@nicopalmkvist definitely man, which one did you use? MidJourney?
@@DanieleManca1983 I actually used www.freepik.com/ai/image-generator
Phenomenal work Nicolai! Only the images used are incredible🔥
Amazing work my man 🎉
please never stop, this is amazing. im thinking about switching to webflow but this kind of content makes me love elementor
I'll make sure Elementor doesn't fall behind ;)
Awesome work. I was waiting for this. Thank you Nic!!! You are amazing
It’s also been a long time coming!
@@nicopalmkvist I really appreciate the hard work. Keep it up :)
This is AMAAAAAZING!! can't believe it! thanks Nicolai
I'm glad you enjoyed it!
Amazing! Love what you do!
Thanks, 4Mulator!
Love your work! Thank you for sharing this.
Thank you so much, Peter!
Amazing!!! Good work sir.
You are such an amazing being
this is nuts!
youre the best my bro
Amazing work, thank you so much for your share
Great tutorial :)
Thanks for your strugling and give us awesome animation design. ❤❤❤❤
Thank you❤️
Good One! Thanks Nicolai
Thanks, Gopoo ;)
Thanks for your work!!
I really love your work!!! You're talented!
Thanks, Rebeca!
You are the best 💓
With this Video you earned my subscription! Weil done and Im looking forward for more 🎉🎉🎉
Awesome, thank you.
I love your work keep the good work
Just amazing, thanks
Glad you liked it, Labarbaweb
You have done an amazing job! How about the Header Title and the Menu that changes the color while scrolling?
Thank you so much!!! you are the best!
Amazing, thank you.
bravo brother👏
excelent brother love it very much
Thanks 💪
Looking good
Thanks, Fatjay!
Thank you so much
Super cool
Wow! I need this for my website
Go for it! 💪
Great tutorial how did you make the title change on scroll and the fixed buttons? thanks
have my love!
good job bro
thank you so much!
Do you have a tutorial for blogs?
Hi @Nicolai. Thanks for the great vid! I have a question that has already been asked, but not answered yet. When adding normal sections below these 4 pages, you can't reach them. Is there a way to stop the full page scroll to allow for more content (sections) below these 4 full page sections?
You just earned subscriber
It's looking awesome! Great job. Could you please tell me How to create an image like this.
thank you so much ❤
You're welcome :)
Awsome work, do you need elementor Pro for this?
A like and some love for you! thank you!
I love you Bro❤❤
wow thank you ^^
Amazing
Amazing
How can I make other content below the snap scroll visible?
That isn't working for me
How do you replay the entrance animations for the headings ? By default they are only played for first entrance.
Otherwise another great tutorial, loved it!
Try to insert this javascript code in the bottom of the code: codepen.io/Wireframe-ApS/pen/poMMNqO
Hi Nicolai I absolutely love your videos and have been following them for awhile now, I really want to keep this effect but my website won't allow me to add in a header after using this effect do you know I can do that?
damn a master peice
Love From Pakistan😃🥰
🇵🇰🇵🇰🇵🇰
How can I have the pages work with the scrolling sequence if I have two sections? The hero is two sections, but I want it to scroll as if it is one. When you insert the javascript, it doesn't allow for seamless scrolling
nice project
Thank you! Cheers!
thank you Nicolai, i tried 2 of your awesome methods, but custom CSS is locked for me, i whish you had an alternative way...
how do you make the menu work? When i try to use my menu it only show a little bit and after that it doesn't move
Hello I am having trouble when I try to duplicate the "Bottom" again for Hero 2, the bottom image will not move like the 1st. the image is static and stays in one place cut out, it doesnt zoom out and show more of that bottom image while the rest of the container with my background will zoom and reveal more of its photo.
Great work, but to continue the site and exit the scrollin how can you do that?
I love your videos you aerned a sub
What if I don't wanna use main container and the main container is practically the page itself?
Thnku nik
great
What about the changing color of logo? 👀
Good Bro but can you make it with html, css and JS plz
Hi, looking to purchase this template but I have a question, is this limited to 4 sections?
Hi @@tas5247 no you can have as many sections you want 👨💻
❤❤❤
How do I enable global footer to be visible. Header is seen. But footer is not. Please help
Change page layout - elementor.com/help/using-elementors-canvas-page-template/
Is it possible to add a sticky navigation with anchor links?
Yes just add a #section1 and add it to the menu link, if that make sens?
@@nicopalmkvist
Yes it makes sense but did you try it?
@@nicopalmkvist Ok I tried it myself and it does work but there is no smooth scrolling, it just jumps to the section.
.
@@nicopalmkvist Also, I checked the javascript and see code that makes the page scroll to a specific section when you click a specific link with a specific ID name.
So if you put a link (I used a heading widget) with ID #link1 that navigates to #section1 it should scroll automatically to section1. That works, but it doesn't work when I do the same with a #link2, #link3, #link4
When I click on #link2 it scrolls to #section3, when I click on
#link3 it scrolls to section 4 and when I click on #link4 it scrolls even beyond section4.
Yes, before you ask... I checked all the ID names in the links and in the section.
Can you clarify this please, because I don't see an explanation in the tutorial how the navigation works.
Can I add this section slide to my Shopify website?
No, this is only for Wordpress / Elementor users
I’m getting a 403 error on the javascript. Is there an updated script or fix?
I've uploaded a new file and tested it, and it works now. Let me know if you still encounter any issues!
@@nicopalmkvist Will do. Tested this morning, the old file is working now too. Must have been a temporary update bug
How does this affect your page speed?
This was actually one of my main goals with the project. This type of scroll snap slider is usually only possible with one of the popular slider plugins, which can slow down your site. With this solution, you only need a few lines of code, keeping your page lightweight and fast. You only need Elementor and thats it.
@@nicopalmkvist hi! Can you tell meu one of those popular plugins ? I wanna try it with them also since i don t have ellementor pro to add custom css
@@nicopalmkvist🔥🔥🔥this is great🔥🔥🔥
What version of Elementor are you using?
Elementors latest version and canvas mode :)
Is it also works with Divi?
I actually don’t know, I’ve never used Divi. But in theory, yes, they should be pretty much the same. I’d be surprised if din’t work.
@@nicopalmkvist I tried. It should work, but something is wrong.. I tried multiple solutions today, other vids, chat gpt, etc.. nothing seems to work..
i wanted to buy the lifetime pass but on the website it's at 349$ but once you go at the checkout it changes to 549$ ... (Also why don't we see the girl anymore?)
Thanks for reaching out. The price change was a mistake, but it's fixed now. You can also use the discount code "BLACKWEEK" to get a discount this week! 💪
And as for Michelle, I love that you remember her! You can definitely say you're one of the OG followers. Would you like to see a video with her again? :)
I need Elementor pro to make that
True!
👍👍🤛👊🤘
are this elementor ? it need to be pro
You need pro for the most part, yes
Destroys a lot of WooCommerce and Elmtor elements, friends.
Learn to make adaptive, all your website layouts are beautiful, but not adaptive.