Lenis Smooth Scroll in Webflow

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

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

  • @bornprojects
    @bornprojects Год назад +8

    Finally a proper Lenis tutorial!

  • @meherech7703
    @meherech7703 7 месяцев назад +3

    That was exactly what I was searching for. Thanks.

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

    Love seeing the notification for a new video

  • @garethellison01
    @garethellison01 5 месяцев назад +2

    Thanks Tim! You made it so easy! :)

  • @NoelHayden-b1u
    @NoelHayden-b1u Год назад +5

    Did this break? I had it working on a few sites but it no longer seems to be. Is anyone else experiencing this?

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

    You are honestly the best, thank you so much.

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

    Perfect solution, thanks Tim. Unfortunately it’s not working on safari on mac.

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

      Yes, Lenis is 100% stuck and frozen on Safari right now, it's an issue,

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

      It would be great if you can share Any workaround for this issue @timothyricks

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

      @@jithinio Thank you for the heads up! This must be a recent issue in Lenis. I added a line of code to the cloneable to fix it.

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

      @@timothyricks Thank You so much @timothy ricks

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

      Omg so glad I opened this video despite having implemented Lenis on my site months ago. I hope this hasn't been an issue for long

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

    Im still trying to figure out how to use lenis in overlays or elements with overflow scroll. It doesn't work there.

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

    Awesome Tim🔥🔥

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

    Great video as always!

  • @AmanSharma-dt7fh
    @AmanSharma-dt7fh 4 месяца назад +1

    Thank you mate :)

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

    Again 💎 tutorial!🙌

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

    Hi Tim, can you tell me which screen- and mouse-recording software were you using for this video? Thank you

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

    Thank you! it worked like a charm. The next thing i want to install on my page is GSAP. Lets see if it will work with or without the line of code you mentioned.

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

    Thank you Timothy - fab as always. I couldn't see where to get the code so I used the code from the clonable and was able to tweak it to my liking. Regarding the infinite setting - I couldn't see it at all in that code.

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

      Thank you! All of the code for my tutorials are always stored in the cloneable. The infinite scroll version is on the second page of the cloneable.

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

    I dont know if its a bug from my side but the code prevents me scroling and reaching the end of my page sometimes

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

    Since the last Webflow update, the script no longer works for me either. Has something changed here?

    • @timothyricks
      @timothyricks  Месяц назад +3

      Hi, I updated the code in the cloneable to fix this. The line that prevents Lenis from running in the Webflow editor was causing the issue. Lenis used to break scrolling in the Webflow editor, but it looks like that's no longer the case. So that line isn't needed anymore.

    • @yizunzhang
      @yizunzhang 17 дней назад

      @@timothyricks Hi Tim, thanks for sharing this, but it seems Lenis is breaking scrolling in the Webflow editor again now :(

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

    Hey Timothy! Thank you so much for this tutorial, it really helped me :)
    I noticed that it glitches when I try to scroll over a video, is there a way to fix this?

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

      i have the same problem

    • @Bob-qf5ue
      @Bob-qf5ue Год назад +1

      Any updates ?

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

      I've added a Vimeo embed instead of the native player and it seems that it fixed it.

  • @airi-o_o
    @airi-o_o Год назад

    It don't work for me.. they changed the basic setup script also. Is there anything ive to disable?

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

    Timothy something broken with this solution? When you are in stop scroll mode and scrolling with mouse after scroll start page is scrolled to bottom :( any thoughts how to fix this issue?

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

    External libraries are great - but don't the CDNS really slow down the webflow page performance?

  • @wr5023
    @wr5023 22 дня назад +1

    you´re the best tysm

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

    Hi Tim! Thanks a lot, really helped!
    A question though: how can you create same effect as previous locomotive library (using data-scroll-speed attributes for example) in Lenis to change the speed of specific elements?

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

    Hey @timothyricks first of all, great video! on dektop everything works fine. even if i scale my dektop window to the size of a phone or tabelt the infinite scroll work like a charme but when i open the site on my ipad or iphone the infinte scroll is gone and i have the regular scroll. im new to webflow what could i do to fix it.

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

    There is a bug with lenis. When using an Ipad with a magic keyboard the page won't scroll using the track pad and will only scroll using touch.

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

    Hi Tim, the infinite scroll isn't working in the cleanable or otherwise?!

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

      Thank you! It looks like I needed to update the CDN link to the latest version of Lenis. The cloneable's working now.

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

      ​@@timothyricks thanks! but it still isn't working in mobile. There's this weird issue that when you inspect the website on your desktop browser and switch to mobile view it seems to be working fine, but when you actually open the website up on your phone it doesn't seem to work.

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

      @@madhavkhandelwal8990 Yes, Lenis Infinite Scroll has never worked on iPhones for me sadly. But there's a solution using Swiper that works for all devices. www.timothyricks.com/resources/swiper-js-infinite-scroll

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

      @@timothyricks Yup tried that as well but I guess I was facing some issues here as well when integrated with smooth scrolling. But nvm thank you so much for all your free resources! Hopefully I'll soon be able to afford your patreon as well haha!

  • @Bob-qf5ue
    @Bob-qf5ue Год назад

    Nice Tutorials :) which Recording Softwore do you use ? So smooth! saw it on Danskys channel too!

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

      Thank you! I’m using Screen.Studio

  • @j.espinosa
    @j.espinosa Год назад

    Is there a way we can apply Lennis to the whole project instead of going page by page?

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

      Yes, just add the code to project settings instead of page settings. :)

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

    @timothyricks Noticed your cloneable has a console error and lenis isn't working on the page. Do you know why that happened?

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

    Can we have the link of the website in pink? Thanks

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

    I have page scroll links on my one page site and after adding this the links scroll to the right location and then jump back to the place you last scrolled to before you clicked a link. Any ideas?

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

    Ok - *clicks subscribe and notification bell*

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

    Nice!

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

    Hi, how can I change the scroll speed for specific elements with lenis? I would like to have a scrolling effect that some elements "move" faster?

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

    Thank

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

    🔥🔥🔥

  • @Ludwig-ito
    @Ludwig-ito Год назад

    thanks, Tim. Lenis works 100% on Chrome. However, if I want to use the scroll bar on the far right to scroll down the page midway, my page freezes unless I use the web scroll bar from the very first start from the top of my webpage. If I start scrolling down the page with the scroll wheel on my mouse, I can't use the page scroll bar to manually drag the page down. Do you have any ideas as to why this happened to me?

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

    💯💯💯

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

    I wonder how a screen reader would work on an infinite scroll like this 🤔

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

    real time video and scroll sequence in webflow

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

    After updating my Lenis with your code, my footer is cropped by 50px, but resizing the window solved the problem. Can anyone help me with this? Thanks!

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

      Hi Daniel, this is usually an issue when images don’t have a defined height

  • @1992kiddi
    @1992kiddi Год назад

    Thanks, Tim
    $("[data-lenis-toggle]").on("click", function () {
    $(this).toggleClass("stop-scroll");
    if ($(this).hasClass("stop-scroll")) {
    lenis.stop();
    } else {
    lenis.start();
    }
    });
    Above function is what I was looking for since yesterday and I found it in your video thanks a lot.