SNAP ON SCROLL - GSAP Elementor Scrolltrigger (No plugin slider)

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ม.ค. 2025

ความคิดเห็น • 150

  • @nicopalmkvist
    @nicopalmkvist  2 หลายเดือนก่อน +5

    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. 👆

    • @dominikmuller151
      @dominikmuller151 หลายเดือนก่อน +1

      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?

    • @Realistic-Driving
      @Realistic-Driving 9 วันที่ผ่านมา

      @@dominikmuller151 did you fix it? I have same issue

    • @dominikmuller151
      @dominikmuller151 9 วันที่ผ่านมา

      @@Realistic-Driving No, I haven't tried it further, but try to activate the container "hold in column" and then please let me know

    • @Realistic-Driving
      @Realistic-Driving 9 วันที่ผ่านมา

      ​@@dominikmuller151 if yiu can fix it then knock me please

  • @ICUAT
    @ICUAT 2 หลายเดือนก่อน +1

    please never stop, this is amazing. im thinking about switching to webflow but this kind of content makes me love elementor

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      I'll make sure Elementor doesn't fall behind ;)

  • @francinelissiene1220
    @francinelissiene1220 2 หลายเดือนก่อน +2

    Awesome work. I was waiting for this. Thank you Nic!!! You are amazing

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      It’s also been a long time coming!

    • @francinelissiene1220
      @francinelissiene1220 2 หลายเดือนก่อน

      @@nicopalmkvist I really appreciate the hard work. Keep it up :)

  • @mickkout875
    @mickkout875 2 หลายเดือนก่อน +1

    Phenomenal work Nicolai! Only the images used are incredible🔥

  • @thewebstylist
    @thewebstylist 2 หลายเดือนก่อน +1

    Another priceless dynamic banger! And LUV how it’s also mobile responsive!

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Thanks, mate! I can always count on you.

  • @DanieleManca1983
    @DanieleManca1983 2 หลายเดือนก่อน +2

    The imagery is really nice, wow

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน +1

      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.

    • @DanieleManca1983
      @DanieleManca1983 2 หลายเดือนก่อน

      @@nicopalmkvist definitely man, which one did you use? MidJourney?

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน +1

      @@DanieleManca1983 I actually used www.freepik.com/ai/image-generator

  • @dev.yriyad
    @dev.yriyad 2 หลายเดือนก่อน +1

    Thanks for your strugling and give us awesome animation design. ❤❤❤❤

  • @Peter-ko9ne
    @Peter-ko9ne 2 หลายเดือนก่อน +3

    Love your work! Thank you for sharing this.

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Thank you so much, Peter!

  • @HellasCR
    @HellasCR 2 หลายเดือนก่อน +1

    With this Video you earned my subscription! Weil done and Im looking forward for more 🎉🎉🎉

  • @MrPinyworld
    @MrPinyworld หลายเดือนก่อน +1

    Wow, this is brilliant Nicolai

  • @Omid-j1d
    @Omid-j1d 13 วันที่ผ่านมา

    wow!! Respect man. must have taken a lot work!!

  • @rahadianputra3745
    @rahadianputra3745 2 หลายเดือนก่อน

    This is AMAAAAAZING!! can't believe it! thanks Nicolai

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      I'm glad you enjoyed it!

  • @creativos-j4w
    @creativos-j4w 14 วันที่ผ่านมา

    Thank you man you are a legend you helped me lot to prepare my next level design❤❤👌👌!!!!!

  • @4Mulator
    @4Mulator 2 หลายเดือนก่อน +1

    Amazing! Love what you do!

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Thanks, 4Mulator!

  • @alirezafard5056
    @alirezafard5056 24 วันที่ผ่านมา

    Amazing work my man 🎉

  • @videowebsite2018
    @videowebsite2018 2 หลายเดือนก่อน +8

    Another one! You really do keep the golden nuggets flowing. This makes slider revolution feel outdated. Thank you💫

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน +1

      🥰

    • @pixelturm
      @pixelturm 2 หลายเดือนก่อน

      Slider revolution Pro costs about 90 bucks for a lifetime-licence, for GASP you have to pay 200 per year 😞

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน +2

      ​@@pixelturm The gsap code I use is free for everyone, take a look in the description

    • @videowebsite2018
      @videowebsite2018 หลายเดือนก่อน +2

      @@pixelturm No its free, bro?

    • @pixelturm
      @pixelturm หลายเดือนก่อน

      @@videowebsite2018 i misunderstood their license terms, it`s my bad, sorry guys

  • @RebecaMarques
    @RebecaMarques 2 หลายเดือนก่อน

    I really love your work!!! You're talented!

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน +1

      Thanks, Rebeca!

  • @SamirTorakai
    @SamirTorakai 2 หลายเดือนก่อน +1

    youre the best my bro

  • @marklovesscience5630
    @marklovesscience5630 หลายเดือนก่อน

    Amazing!!! Good work sir.

  • @fastmedia277
    @fastmedia277 2 หลายเดือนก่อน +1

    You are such an amazing being

  • @christianlecuyer6380
    @christianlecuyer6380 2 หลายเดือนก่อน +1

    Great tutorial :)

  • @marapereira5830
    @marapereira5830 หลายเดือนก่อน +1

    Amazing work, thank you so much for your share

  • @JustAJok3r
    @JustAJok3r 7 วันที่ผ่านมา

    This looks great but, when I add certain elements (i.e carousel) the expanding effect expands into other hero sections - I've been trying for hours but haven't been able to figure out how to fix this

  • @best4him382
    @best4him382 2 หลายเดือนก่อน +1

    Great tutorial how did you make the title change on scroll and the fixed buttons? thanks

  • @Mick04157
    @Mick04157 หลายเดือนก่อน

    I love your work keep the good work

  • @insomnio335
    @insomnio335 2 หลายเดือนก่อน +1

    Thanks for your work!!

  • @gopoo
    @gopoo 2 หลายเดือนก่อน +1

    Good One! Thanks Nicolai

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Thanks, Gopoo ;)

  • @ShahbazAli-ni6bf
    @ShahbazAli-ni6bf 2 หลายเดือนก่อน +1

    You are the best 💓

  • @LeviLoveless
    @LeviLoveless 27 วันที่ผ่านมา

    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

  • @GiovanniVillarreal-d4e
    @GiovanniVillarreal-d4e หลายเดือนก่อน

    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.

  • @SergiCasillio
    @SergiCasillio 6 วันที่ผ่านมา

    Amazing! How i can add the navigation dots on a side? tnx

  • @Anonym99912
    @Anonym99912 หลายเดือนก่อน +2

    How can I make other content below the snap scroll visible?
    That isn't working for me

    • @godlikee187
      @godlikee187 8 วันที่ผ่านมา +1

      same here

    • @godlikee187
      @godlikee187 8 วันที่ผ่านมา +1

      for example the footer

  • @godlikee187
    @godlikee187 26 วันที่ผ่านมา

    this is nuts!

  • @SaranghaeGamer
    @SaranghaeGamer หลายเดือนก่อน +1

    You have done an amazing job! How about the Header Title and the Menu that changes the color while scrolling?

  • @matadorsam3438
    @matadorsam3438 หลายเดือนก่อน

    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

  • @stefano-magnini
    @stefano-magnini 2 หลายเดือนก่อน

    Great work, but to continue the site and exit the scrollin how can you do that?

  • @nedimmazalovic3319
    @nedimmazalovic3319 2 หลายเดือนก่อน +1

    Awesome, thank you.

  • @yofi2614
    @yofi2614 หลายเดือนก่อน

    What if I don't wanna use main container and the main container is practically the page itself?

  • @CrossZero153
    @CrossZero153 2 หลายเดือนก่อน

    You just earned subscriber

  • @graphicdesignerme
    @graphicdesignerme หลายเดือนก่อน

    thank you Nicolai, i tried 2 of your awesome methods, but custom CSS is locked for me, i whish you had an alternative way...

  • @marcoatmac
    @marcoatmac 2 หลายเดือนก่อน +1

    Super cool

  • @Aflorarte
    @Aflorarte 2 หลายเดือนก่อน

    Thank you so much!!! you are the best!

  • @Reyanan_Aim_Finder
    @Reyanan_Aim_Finder 2 หลายเดือนก่อน +1

    bravo brother👏

  • @dominikmuller151
    @dominikmuller151 หลายเดือนก่อน +1

    I love you Bro❤❤

  • @franktielemans6624
    @franktielemans6624 2 หลายเดือนก่อน

    Is it possible to add a sticky navigation with anchor links?

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Yes just add a #section1 and add it to the menu link, if that make sens?

    • @franktielemans6624
      @franktielemans6624 2 หลายเดือนก่อน

      @@nicopalmkvist
      Yes it makes sense but did you try it?

    • @franktielemans6624
      @franktielemans6624 2 หลายเดือนก่อน

      @@nicopalmkvist Ok I tried it myself and it does work but there is no smooth scrolling, it just jumps to the section.
      .

    • @franktielemans6624
      @franktielemans6624 2 หลายเดือนก่อน

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

  • @mimu-yt
    @mimu-yt 14 วันที่ผ่านมา

    Are there no other payment method options like PayPal?

  • @emvee2916
    @emvee2916 2 หลายเดือนก่อน +1

    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!

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Try to insert this javascript code in the bottom of the code: codepen.io/Wireframe-ApS/pen/poMMNqO

  • @x_max4064
    @x_max4064 5 วันที่ผ่านมา

    What theme you used please??

  • @sma_bari
    @sma_bari 2 หลายเดือนก่อน

    damn a master peice

  • @NikhilJain-r8q
    @NikhilJain-r8q หลายเดือนก่อน

    How do I enable global footer to be visible. Header is seen. But footer is not. Please help

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      Change page layout - elementor.com/help/using-elementors-canvas-page-template/

  • @drunbesiegbar
    @drunbesiegbar หลายเดือนก่อน +1

    have my love!

  • @kooroshmousavi
    @kooroshmousavi 2 หลายเดือนก่อน +1

    Amazing

  • @tas5247
    @tas5247 หลายเดือนก่อน

    Hi, looking to purchase this template but I have a question, is this limited to 4 sections?

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      Hi @@tas5247 no you can have as many sections you want 👨‍💻

  • @passoinostone
    @passoinostone 2 หลายเดือนก่อน +1

    wow thank you ^^

  • @alearielrodriguez
    @alearielrodriguez หลายเดือนก่อน +1

    A like and some love for you! thank you!

  • @MrTechnoman2011
    @MrTechnoman2011 2 หลายเดือนก่อน +1

    Awsome work, do you need elementor Pro for this?

  • @labarbaweb
    @labarbaweb 2 หลายเดือนก่อน

    Just amazing, thanks

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Glad you liked it, Labarbaweb

  • @CodexPlayz-w1n
    @CodexPlayz-w1n หลายเดือนก่อน

    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?

  • @robbyrobby5286
    @robbyrobby5286 20 วันที่ผ่านมา

    can we use on elementor free version?

  • @abbasishrat1283
    @abbasishrat1283 2 หลายเดือนก่อน

    What about the changing color of logo? 👀

  • @BradK02
    @BradK02 หลายเดือนก่อน

    Amazing, thank you.

  • @marcinkodowy6787
    @marcinkodowy6787 หลายเดือนก่อน

    good job bro

  • @admlover
    @admlover หลายเดือนก่อน

    thank you so much!
    Do you have a tutorial for blogs?

  • @LeviLoveless
    @LeviLoveless หลายเดือนก่อน

    I’m getting a 403 error on the javascript. Is there an updated script or fix?

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      I've uploaded a new file and tested it, and it works now. Let me know if you still encounter any issues!

    • @LeviLoveless
      @LeviLoveless หลายเดือนก่อน +1

      @@nicopalmkvist Will do. Tested this morning, the old file is working now too. Must have been a temporary update bug

  • @ScienceVerse007
    @ScienceVerse007 หลายเดือนก่อน

    It's looking awesome! Great job. Could you please tell me How to create an image like this.

  • @kunalnigam8035
    @kunalnigam8035 หลายเดือนก่อน

    Amazing

  • @shuhasini-9uq1x
    @shuhasini-9uq1x 2 หลายเดือนก่อน

    excelent brother love it very much

  • @mraayushkumarr
    @mraayushkumarr 2 หลายเดือนก่อน +1

    Thank you so much

  • @fatjay9402
    @fatjay9402 2 หลายเดือนก่อน +1

    Looking good

  • @mypersonal7
    @mypersonal7 11 วันที่ผ่านมา

    good one

  • @yamilmejias
    @yamilmejias 2 หลายเดือนก่อน

    Wow! I need this for my website

  • @GhaithEgemen-mq8to
    @GhaithEgemen-mq8to 2 หลายเดือนก่อน

    Can I add this section slide to my Shopify website?

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      No, this is only for Wordpress / Elementor users

  • @P.AndréAlmeida
    @P.AndréAlmeida 11 วันที่ผ่านมา

    Ok obrigado ❤

  • @dotgg7243
    @dotgg7243 หลายเดือนก่อน

    I love your videos you aerned a sub

  • @TapisCaravane
    @TapisCaravane หลายเดือนก่อน +1

    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?)

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      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? :)

  • @GhhfGddf-mm9hy
    @GhhfGddf-mm9hy 2 หลายเดือนก่อน

    thank you so much ❤

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      You're welcome :)

  • @marcin1043
    @marcin1043 2 หลายเดือนก่อน +2

    How does this affect your page speed?

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน +1

      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.

    • @stroieradu-dv7zr
      @stroieradu-dv7zr 2 หลายเดือนก่อน

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

    • @zarathustra1728
      @zarathustra1728 2 หลายเดือนก่อน

      ​@@nicopalmkvist🔥🔥🔥this is great🔥🔥🔥

  • @benfrank1879
    @benfrank1879 หลายเดือนก่อน

    What version of Elementor are you using?

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      Elementors latest version and canvas mode :)

  • @grexton_official
    @grexton_official หลายเดือนก่อน

    Is it also works with Divi?

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      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.

    • @grexton_official
      @grexton_official หลายเดือนก่อน

      @@nicopalmkvist I tried. It should work, but something is wrong.. I tried multiple solutions today, other vids, chat gpt, etc.. nothing seems to work..

  • @aneprii
    @aneprii 2 หลายเดือนก่อน

    nice project

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      Thank you! Cheers!

  • @ItsJohnDoeOfficial
    @ItsJohnDoeOfficial 8 วันที่ผ่านมา

    Can't open the page. 555 Security Incident Detected

    • @nicopalmkvist
      @nicopalmkvist  8 วันที่ผ่านมา

      Hmm they are working for me? Do you mean this one: nicolaipalmkvist.com/snap-on-scroll/

  • @healthyplateform
    @healthyplateform 2 หลายเดือนก่อน +1

    Love From Pakistan😃🥰

    • @nicopalmkvist
      @nicopalmkvist  2 หลายเดือนก่อน

      🇵🇰🇵🇰🇵🇰

  • @luisenglish-mn1mz
    @luisenglish-mn1mz 2 หลายเดือนก่อน +1

    great

  • @juanpablo3993
    @juanpablo3993 หลายเดือนก่อน

    I need Elementor pro to make that

  • @aryansoni9631
    @aryansoni9631 2 หลายเดือนก่อน +1

    Thnku nik

  • @jashandeepsingh3768
    @jashandeepsingh3768 2 หลายเดือนก่อน +1

    ❤❤❤

  • @HaiderAli-l8g
    @HaiderAli-l8g หลายเดือนก่อน +1

    Good Bro but can you make it with html, css and JS plz

  • @mohamedhafez3318
    @mohamedhafez3318 2 หลายเดือนก่อน

    are this elementor ? it need to be pro

    • @nicopalmkvist
      @nicopalmkvist  หลายเดือนก่อน

      You need pro for the most part, yes

  • @redlinecatcher487
    @redlinecatcher487 10 วันที่ผ่านมา

  • @Grey25010
    @Grey25010 16 วันที่ผ่านมา

    you cant really adapt this to your own use case. there are things in the code that greatly affect vertical positioning of Elementor Heading widgets.

  • @pandytv3238
    @pandytv3238 27 วันที่ผ่านมา

    👍👍🤛👊🤘

  • @warrock9283
    @warrock9283 หลายเดือนก่อน

    Destroys a lot of WooCommerce and Elmtor elements, friends.

  • @serusok
    @serusok หลายเดือนก่อน

    Learn to make adaptive, all your website layouts are beautiful, but not adaptive.

  • @thomasballarin2559
    @thomasballarin2559 11 วันที่ผ่านมา

    Hello Nico, it’s amazing features.
    I would like to buy a subscription but I have questions Before. How send you an email please ? Thanks

  • @shahzadhaider9195
    @shahzadhaider9195 10 วันที่ผ่านมา

    Good work
    But really messy...

  • @mananhunyar4839
    @mananhunyar4839 4 วันที่ผ่านมา

    ❤❤