Smooth Scrolling Magic: How to easy Install LENIS Library in Elementor

Поделиться
HTML-код
  • Опубликовано: 2 дек 2024

Комментарии • 128

  • @Boostsamma
    @Boostsamma Год назад +4

    Crazy content, easy and intuitive. You are the first to bring something beautiful to Elementor with this graphics and quality. Keep up the good work 🖤

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Thanks brother! I’m glad you like my videos! Computer Love 🖥❤️

  • @shahriernasif
    @shahriernasif День назад +5

    Doesn't work anymore after the new update or so... the scroll stucks and feels like a laggy site... what should I do ?

    • @odouglasrodrigues
      @odouglasrodrigues 7 часов назад +1

      Same here...

    • @JacobVinjegaard
      @JacobVinjegaard  3 часа назад +1

      Hey Bro… Yeah, it’s sad, but the truth is that Elementor is no longer a great option for custom code. 🙃 My best advice is to wait for an update or switch to Webflow or Framer if you want to create custom websites with custom code and that wow factor. Sorry! 🖥❤️

  • @AbbasAli-v4r
    @AbbasAli-v4r 8 месяцев назад +1

    Working smoothly!!
    Thanks for the easy GSAP code🥰

    • @JacobVinjegaard
      @JacobVinjegaard  8 месяцев назад

      You are welcome. I’m glad you like it! 🖥❤️

  • @JoshuaParkerToulson
    @JoshuaParkerToulson Год назад +2

    Wow this is awesome - and motion effects still work and so does GSAP!

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Yes sir… everything works perfect! it’s just beautiful! 🖥❤️

  • @darellegochuico4398
    @darellegochuico4398 6 месяцев назад +1

    Straightforward and easy to use 😌 Love this kind of content

    • @JacobVinjegaard
      @JacobVinjegaard  6 месяцев назад

      Thanks buddy I’m glad you like it! 🖥❤️

  • @freyjauser
    @freyjauser 11 месяцев назад +1

    Thanks for the share ! I believe it is the same for GSAP then ? But I saw some explanation claiming it was better to enqueue on child theme ?

    • @JacobVinjegaard
      @JacobVinjegaard  11 месяцев назад +1

      You are welcome. Yes it should be more or less the same workflow for GSAP. Yes child themes are always a good idea. 🖥❤️

    • @JacobVinjegaard
      @JacobVinjegaard  8 месяцев назад

      Hi again it’s just happened for me to when I uploaded WP and Elementor. Hopefully this will be fixed with an update soon!? 🙃

  • @t.t.3627
    @t.t.3627 Год назад +1

    AMAZING DUDE! U R THE BEST!

  • @thewebstylist
    @thewebstylist Год назад +1

    Awesome, thank you sir and would luv more web styling tips and easy coding tricks!

  • @wellpal
    @wellpal 9 месяцев назад +2

    Hi Jacob, Loving the content a lot! Hoping for some more GSAP down the road ☺
    For the Lenis install I'm running into an issue on one of my sites. I've installed it on another one succesfully last week however today I'm running into a 403 error. Is there any obvious setting that I might have overlooked which is causing this to occur? At least one you might be aware of or out of experience can anticipate that would be a possiblity...
    Thank you so much.

    • @JacobVinjegaard
      @JacobVinjegaard  8 месяцев назад +1

      Hey Saidah. Thank you so much I’m glad that you like it! 🙏🏻 yes I will definitely do some GSAP tuts in the future.
      I’m sorry but I have never had that problem myself? The only thing I can come up with is to put the style sheets into internal embedding under settings/CSS print method. That’s works for me sometimes!? 🖥❤️

    • @wellpal
      @wellpal 8 месяцев назад

      Hey Jacob, thank you for the reply. Appreciate it. I checked with the server host and it was a security limitation they had on their server backend. This has been adjusted and all is good now. @@JacobVinjegaard

  • @PedroMPerpetuo
    @PedroMPerpetuo 11 месяцев назад +3

    Hi there - works fine till I get to the socket... it does not scroll (using mouse wheel - with browser scroll bar no problem to scroll ) to the very bottom, so that I cant see the complete line of the socket (where I have my terms & conditions and other legal stuff)... any idea? Without the code it works as it should. Using elementor pro. Thanks

    • @JacobVinjegaard
      @JacobVinjegaard  10 месяцев назад

      Hi Pedro. First of all I would like to thank you for watching the video. Right now I don’t know way it do not work but try to post the link and I will see if I can figure it out. 🖥❤️

    • @nico.10diaz
      @nico.10diaz 7 месяцев назад

      Me pasa lo mismo. El footer no se me visualiza como corresponde

  • @peterm3799
    @peterm3799 Год назад +1

    thanks for the tutorial! btw color grading looks amazing on facecam!

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Thanks Péter i'm glad you like the video! I'm just using my old GH4 for the facecam... But it still rocks! 😊👍

  • @handeixdigital
    @handeixdigital Год назад +1

    cool tutorial, quick question how do i add the noise BG on your website?

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Thanks I’m glad you like it. You can buy the grain overlay on my website. 🖥❤️

  • @tugrulhanyilmaz3661
    @tugrulhanyilmaz3661 Год назад +1

    it worked perfectly, thanks man ✊

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +1

      You are welcome bro... I'm glad it was helpful! 🖥❤

  • @teuccio73
    @teuccio73 Год назад +1

    thanks ! Do you have information about horizontal scrolling always for Elementor ?

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +1

      Hi Theo. I'm not quite sure what you mean, but if you have overflow problems and want to get rid of your horizontal scroll, I've made a video on how to get rid of it with CSS!? 😊
      ruclips.net/video/Gc_nAiElaPk/видео.html

  • @shafiulbashar
    @shafiulbashar 2 месяца назад +1

    Helped me a lot. thanks!

  • @jiteshpujari1
    @jiteshpujari1 Год назад +1

    Wow. Amazing. I get to keep the scroll effects :P Is there way to adjust the ease in/out

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +1

      I’m glad you like it! Yes you should dive deeper into it though the GitHub documentation. 🖥❤️

  • @SimpleSEO-ur9sv
    @SimpleSEO-ur9sv 6 месяцев назад +1

    worked like a charm

    • @JacobVinjegaard
      @JacobVinjegaard  6 месяцев назад

      Perfect... I'm glad you like it! 🖥❤️

  • @mwright7127
    @mwright7127 4 месяца назад +1

    I love the smooth scroll it gives, great tutorial! One issue I am having is anchor links scrolling down then jumping back to the point of origin. Any experience with this on your own sites? Cheers!

    • @JacobVinjegaard
      @JacobVinjegaard  4 месяца назад

      Thanks for watching! Just go into the Lenid GitHub and update the JavaScript link. Then it should work. 🖥❤️

  • @mahendrajangid2076
    @mahendrajangid2076 11 месяцев назад +2

    great sir its working thank you so much

  • @mylessicuro9751
    @mylessicuro9751 10 месяцев назад +1

    Hey this is awesome. however when you hover over a video widget. It causes it to glitch heaps?

    • @JacobVinjegaard
      @JacobVinjegaard  10 месяцев назад

      Hi. I’m glad you like it! Hmmm that sounds strange I haven’t had that problem before. Every thing works just fine in my end? 🖥❤️

    • @mylessicuro9751
      @mylessicuro9751 9 месяцев назад

      thanks for your reply.@@JacobVinjegaard it's the exact same on your website landing page, when you scroll over the video it goes jagged. when the mouse touches the video viewport.

  • @borisnieminen677
    @borisnieminen677 Год назад +1

    Excellent!

  • @AronBouwer
    @AronBouwer День назад +1

    Hi, I used your Lenis code, but now all of sudden the scroll is very delayed for some reason. It worked fine for months, but now I got this issue and didn't change a thing about it. Do you have any idea? I got it on multiple websites.

    • @JacobVinjegaard
      @JacobVinjegaard  День назад

      @@AronBouwer there’s a bug in the newest version of Elementor so it does not work as expected anymore hopefully this will be fixed in a upcoming update! 🖥❤️

    • @AronBouwer
      @AronBouwer День назад

      @ that explains it! I hope that they fix that too. We’ll all keep each ofher updated on that right? :) Thank you for your reply!

  • @MeerAsif-i7c
    @MeerAsif-i7c 2 месяца назад +1

    Hi Jacob, the thing is that I've added scroll snap to my page so with that on this isn't working, it's disabling the whole mouse scroll, let me know if you have fix for that!

    • @JacobVinjegaard
      @JacobVinjegaard  2 месяца назад

      Hey. Lenis do not work with scroll snap. Sorry. 🖥❤️

  • @tas5247
    @tas5247 14 дней назад +3

    Hello bro, been using this since you posted I’ve updated to latest elementor and Wordpress and it’s not working as it should anymore… any idea, are you experiencing it?

    • @tas5247
      @tas5247 14 дней назад +6

      I’ve got a fix bro:
      Add this custom css to the theme:
      @media (prefers-reduced-motion: no-preference) {
      html {
      scroll-behavior: auto;
      }
      }
      Let me know if it works for you

    • @JacobVinjegaard
      @JacobVinjegaard  14 дней назад +1

      @@tas5247 hey bro. First of all I really appreciate that you’re watching my videos and use them on your site! Unfortunately there is a lot of bugs in the newest version of Elementor and Wordpress. Hopefully this will be fixed with an update. But to be 100% honest it could be time to look for an alternative like Webflow or Framer!? 🖥❤️

    • @hanna5528
      @hanna5528 10 дней назад

      @@tas5247 that seems to have worked, thanks!

    • @chinmay_TII
      @chinmay_TII 5 часов назад

      ​@@tas5247 Perfect!. Thanks man!

  • @borisnieminen677
    @borisnieminen677 9 месяцев назад +2

    [UPDATE] Solved! For those having problems with Lenis installed, with scroll lock occurring in nested elements, modal box, for example, you need to create a custom attribute, in my case for the container of the template used by the modal box: data-lenis-prevent="" cheers

    • @JacobVinjegaard
      @JacobVinjegaard  9 месяцев назад +1

      Perfect... Thanks! ❤️🖥

    • @nico.10diaz
      @nico.10diaz 7 месяцев назад +1

      Could you share with me how you did this? Please. Thank you

    • @borisnieminen677
      @borisnieminen677 7 месяцев назад +1

      @@nico.10diaz for the page or element, (or perhaps a template) that is "scroll-locked",, just paste data-lenis-prevent="" into the "Attribute" field, located under advanced tab setting. This is for Elementor page builder. Cheers

    • @nico.10diaz
      @nico.10diaz 7 месяцев назад +1

      @@borisnieminen677 Perfect! Thank u so much for share and take a time to response.

  • @chefjimmybob
    @chefjimmybob Год назад +1

    Great vid Jacob. I just have one question, Im trying to set the scroll position to 0,0 whenever the user changes useLocation on the React website im coding but I cant get it to work. Have any tips?

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +1

      Hey Jimmy. I’m glad you like the video! I’m sorry to say it but that’s a bit over my pay grade and security level. 😅
      Sorry but I can’t help out with native React coding. 🖥❤️

    • @chefjimmybob
      @chefjimmybob Год назад +1

      @@JacobVinjegaard Aww Damn, Thanks for the response!

  • @dopek
    @dopek Месяц назад +1

    hi, this works! but i have reveal footer, and the scroll dont reach the bottom, do you know the solving?

    • @JacobVinjegaard
      @JacobVinjegaard  Месяц назад

      Hi. I’m glad it worked for the scrolling experience. My best advice is to go to Lenis GitHub page and search for CSS position sticky to see if you can fix the footer issue. I hope you will fix it! 🖥❤️

  • @rightpadding
    @rightpadding Год назад +2

    Can it also be applied on Bricks? Great content! Another subscriber for yah!

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +1

      Hi Marion... Thanks for the comment and sub! 🙏🏻 Yes im pretty sure it will work just fine in Briks, as long you have acces to the body/end tag. 🖥❤️

  • @ohadzzohar82
    @ohadzzohar82 9 месяцев назад +1

    Great tutorial, seems simple but when i add the code to my website, i cannot scroll the page. like the mouse position is stuck. any ideas would be great

    • @JacobVinjegaard
      @JacobVinjegaard  9 месяцев назад

      hmmmmm... Do you have any other custom code on you site that it can conflict with? 🖥❤️

  • @wallaceironmancaps868
    @wallaceironmancaps868 6 месяцев назад +1

    Lenis smooth scroll makes the scroll inside the Elementor popup stop working, do you know how to solve it? I believe you have to add data-lenis-prevent=”” somewhere to prevent lenis from being activated within the popup

    • @JacobVinjegaard
      @JacobVinjegaard  6 месяцев назад

      First off all thank you for watching my videos... Yes that's correct you should give it a custom CSS attribute. 🖥❤️
      here is the link on how to work with custom attributes:
      elementor.com/help/custom-attributes-pro/

  • @fatjay9402
    @fatjay9402 6 месяцев назад +1

    thank you perfect!

  • @Sheisdanielafernandez
    @Sheisdanielafernandez Год назад +1

    awesome!! thank u a lot, i'm waiting for new tutorials please!!!

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Hi Daniela. I'm glad you like it. i promise to upload again soon! 🖥❤️

  • @Mihaites
    @Mihaites Год назад +1

    Great vid!

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Thanks Mihai. I’m glad you like it! 🖥❤️

  • @JohnXionidis
    @JohnXionidis Год назад +1

    Amazing! Love how smooth the scroll is but there is an issue. Elementor popups seem to lose the ability to scroll for some reason.

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +2

      Hi John. First of all I’m glad you like it! Yes that sounds likely… I have had a lot of problems with pop up’s over the time. Try to go into Elementor/settings/advanced/CSS print method and switch from external to internal and then back. That have worked for me in the past. I’m sorry to say it but Elementor is not as stable as it just to be, and specifically not when you start to adding custom code. 🙃

    • @JohnXionidis
      @JohnXionidis Год назад +1

      @@JacobVinjegaard Thanks a lot for the quick reply. Sadly the suggestion didnt work even after regenerating css and clearing cache. That's fine, still a very nice smooth effect and i prefer it over locomotive scroll.

  • @nico.10diaz
    @nico.10diaz 9 месяцев назад +1

    ¡Muchas gracias por compartir!

    • @JacobVinjegaard
      @JacobVinjegaard  9 месяцев назад

      De nada... Me alegro que te haya gustado el vídeo! 🖥❤️

  • @paula_8n180
    @paula_8n180 5 месяцев назад +1

    Muchas gracias, funciona perfectamente! :)

    • @JacobVinjegaard
      @JacobVinjegaard  5 месяцев назад

      De nada... Gracias por ver mis videos! 🖥❤️

  • @madarauchiha5433
    @madarauchiha5433 Год назад +1

    Hey Jacob, thanks for the awesome tutorial, for some reason, my scrolling stutters and is not buttery smooth. Tried it on multiple macs, same result. Using only Ele pro

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Hi Madara, im glad you like the tut! 🙏🏻 Sounds strange... i have tested it on multi Elementor and Webflow sites with no problems!? it could be a memory issue on your webserver. try to send med the HTML link to the site and i will give it a look! 🖥❤️

    • @madarauchiha5433
      @madarauchiha5433 Год назад +1

      @@JacobVinjegaard thanks, just checked it on my PC and it works smoothly

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      @@madarauchiha5433 perfect!!! Computers some days work just like the good lord… in mysterious ways! 😅

  • @designbyfeliz
    @designbyfeliz Год назад +1

    New sub over here! Great stuff

  • @dileepbatchala1590
    @dileepbatchala1590 Год назад +1

    Can you please make a video on locomotive smooth scroll also. Thanks in advance

  • @leonardobalduzzi8613
    @leonardobalduzzi8613 Год назад +1

    Does anyone know how to also apply the smooth scrolling to horizontal scroll?

  • @linhnguyensituation
    @linhnguyensituation Год назад +1

    Nice!!!!

  • @nico.10diaz
    @nico.10diaz 27 дней назад +1

    05/11/24, me dejó de funcionar en la versión Chrome. En mozilla firefox funciona bien. Si alguien sabe que puedo hacer para que funcione tanto en chrome como en mozilla, lo agradezco! Saludos.

    • @JacobVinjegaard
      @JacobVinjegaard  26 дней назад +1

      Parece ser un error en la última versión de Elementor... restablezca su elemento a la versión en la que funcionó o espere una actualización. ¡Lo siento! 🖥❤️

    • @nico.10diaz
      @nico.10diaz 26 дней назад

      @@JacobVinjegaard Esperaremos entonces. Gracias Jacob!

  • @shabbirali6935
    @shabbirali6935 11 месяцев назад +1

    amazing

  • @Reeya-webflow
    @Reeya-webflow 2 месяца назад +2

    Hi, this doesn't work in firefox and safari browser

    • @JacobVinjegaard
      @JacobVinjegaard  2 месяца назад

      Hey Reeya. Everything works just fine here in my end. But try to go on the Lenis GitHub page and update the code to the latest version then it’ll probably fix your problem. 🖥❤️

  • @harryking5533
    @harryking5533 Месяц назад +1

    Looks like this is broken with the latest Elementor update Version 3.24.4. Scroll is super slow and laggy.

    • @JacobVinjegaard
      @JacobVinjegaard  Месяц назад

      Yes I’m starting to realize that Elementor is not the right tool if you want to make a custom web experience besides what they bring you straight out of the box. That’s also why I have made the switch to Webflow. 🖥❤️

    • @GB-xd9qi
      @GB-xd9qi 29 дней назад

      Does anyone have a solution?

    • @hanna5528
      @hanna5528 10 дней назад

      @@GB-xd9qi check the other comments here, there is a quick fix

  • @jabeztadesse
    @jabeztadesse Год назад +3

    Am I the only one noticing the weird flickering towards the end of a scroll animation?

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      I haven’t had any problems with it so far. Can you link your website? 🖥❤️

  • @franktielemans6624
    @franktielemans6624 Год назад +1

    works only when I'm logged in.

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад +1

      Hi Frank... Thanks for the comment. thats most likely due to the CDN in your webserver or browser cache. clear bought or wait 12 to 48 hours the im sure it will work! 🖥❤️

    • @RebeccaLuu
      @RebeccaLuu Год назад

      Hi Jacob, i cleared the browser cache and it only works when i am logged in, it does not show when i am in incognito mode. @@JacobVinjegaard

  • @aminvalipoor2061
    @aminvalipoor2061 4 месяца назад +1

    nice

  • @wearezigurat
    @wearezigurat 3 месяца назад +1

    does not work on mobile

    • @JacobVinjegaard
      @JacobVinjegaard  3 месяца назад

      No it do not work on mobile straight out of the box... Check out the documentation on GitHup for more info and how to set it up on mobile. 🖥❤️

  • @AllenLu
    @AllenLu Год назад +1

    This does NOT work if you use Hello theme child

    • @JacobVinjegaard
      @JacobVinjegaard  Год назад

      Hi Allen. sounds strange? I will test it myself and be right back. 🖥❤️

    • @rinkap1030
      @rinkap1030 Месяц назад

      @@JacobVinjegaard So did you test it? Because the code stutters when it goes to stop for firefox and I also use Hello Elementor theme. Someone else mentioned firefox already.

  • @miguelangelq.8443
    @miguelangelq.8443 14 часов назад +1

    error bad smoth

    • @JacobVinjegaard
      @JacobVinjegaard  13 часов назад

      @@miguelangelq.8443 it doesn’t work with the newest version of Elementor. Sorry. 🖥❤️

  • @ToinouhMiix
    @ToinouhMiix 7 месяцев назад +1

    Not working elementor 2024

    • @JacobVinjegaard
      @JacobVinjegaard  6 месяцев назад +1

      You are right. I will update the code asap. 🖥❤️

    • @rinkap1030
      @rinkap1030 Месяц назад

      @@JacobVinjegaard Did you update the code after all? Just asking so we all know. Thanks.

    • @wepp.werbung
      @wepp.werbung 26 дней назад

      @@rinkap1030 not working on the latest chrome version. So I guess not.

    • @ChristianBilleschouKjær
      @ChristianBilleschouKjær 13 дней назад

      @JacobVinjegaard would be awesome to have this working again! :D