FIXED SCROLL IMAGE GALLERY WITH GSAP & SMOOTH SCROLL (LENIS) - Elementor container edition

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

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

  • @andreaegli
    @andreaegli  ปีที่แล้ว +10

    I think Lenis has the potential to be my go-to JS library for smooth scrolling. Paired with some GSAP here and there and we can create some dope Awwwards-worthy websites.

  • @websquadron
    @websquadron ปีที่แล้ว +2

    Well done with the GSAP!

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Thank you, Imran 🤓

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

      I love that you two cheer each other cause I watch you both and I find inspiring when people support each other

  • @martialcouderc1545
    @martialcouderc1545 ปีที่แล้ว +1

    Bravo, another great tuto, congratulations and above all, keep on making great videos. It's a pleasure to follow you.

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you so much, Martial! Will do 😉

  • @thiagom34546
    @thiagom34546 ปีที่แล้ว +1

    another amazing video, andrea! congratulations for the work

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Thank you for your continued support, Thiago!!!

  • @Sushiiieee
    @Sushiiieee 8 หลายเดือนก่อน +3

    Amazing. I just love your work. 🧿💙

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

      Thank you so much 😀

  • @muhammedsalihoglu_
    @muhammedsalihoglu_ ปีที่แล้ว +2

    I Love your contents, videos and explaining! Thanks Andrea :)

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you so much for your kind word 🤓

    • @YusufErenIslim
      @YusufErenIslim ปีที่แล้ว +1

      dude, do I know you from somewhere

  • @Consultooze
    @Consultooze ปีที่แล้ว

    I loved it ..Its a good way to show you Portfolio designs like this. I will appreciate more if you could make a tutorial for website like Lenis Studio

  • @OfficialEasycart-zc2xk
    @OfficialEasycart-zc2xk ปีที่แล้ว +1

    I love you Andrea ❤ You have been so amazing with your contents. Can you do a video on how you get clients or some tips for someone who is just starting out on clients acquisition. Thank you.

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      🤓 Thank you! I will as soon as I have more insights into that. Right now, I do what everyone is doing. What I can say for sure, creating content helps in getting clients. This is what worked the best for me until now.

    • @OfficialEasycart-zc2xk
      @OfficialEasycart-zc2xk ปีที่แล้ว

      Thanks for the insight! We will be expecting more videos on creating modern landing pages as you've stated in the tutorial. Thank you and well done 👍

  • @sebastianodibusti
    @sebastianodibusti ปีที่แล้ว +1

    amazing content! thnx for the great tutorial Andrea, I will apply it on my website🤭

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      thank you, Sebastian! You're so welcome!🤩

  • @Fransyy
    @Fransyy ปีที่แล้ว +1

    Yes we need more GSAP, that's the future. thank you!

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      we absolutely do! welcome, Frans!

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

    Your work is amazing! I really wanted a locomotive scroll video.

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

      Thank you so much 😊 I use it on all the websites I build, honestly what’s a website without smooth scrolling anymore 😂

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

      @@andreaegli Really! Actually, my question is about how to make those small containers/items that scroll horizontally and stop the site's vertical scrolling. But not the full container, but small items.

  • @jean-mahmoud_du_tacobel
    @jean-mahmoud_du_tacobel ปีที่แล้ว +1

    Thank you very much Andrea ❤ I love your top

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      You're welcome, Jean! Hehe, yeah, me too😁

  • @VictorAlaez
    @VictorAlaez ปีที่แล้ว +1

    So beautiful. Loving your videos so far ❤

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you so much, Victor 🤩

  • @teuccio73
    @teuccio73 ปีที่แล้ว +1

    this is what i like !

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      🤩 more like this are coming!

  • @muhammadmaaz6119
    @muhammadmaaz6119 ปีที่แล้ว +1

    Wow Again super amazing tutorial....thank you

  • @juandylan4052
    @juandylan4052 ปีที่แล้ว +1

    Awesome! thanks a lot.

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

    Awesome tutorial! Any reccomendations on preventing the gallery section from briefly showing on page load? It seems to load before the hero section. Help appreicted!

  • @noelfromgen2546
    @noelfromgen2546 ปีที่แล้ว +1

    I really love your videos. Just a heads up the link to get the code is linking to the wrong notion doc. It is linking to the "Text over video 2 ways (GSAP included)"

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you so much, Noel! Fixed🤓

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

    Hi Andrea, thanks very much for your work. Lenis stopped working on all the sites where I installed it on Wordpress with Elementor, did this problem happen only to me?

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

      Hey Umberto! Yeah, no idea what happened, could be an Elementor or WP update that messed it up :( I didn't have a lot of time to work on this but I think for now it should work: ohwow.club/lenis-smooth-scroll-in-elementor-hotfix/

  • @roshanvaz3208
    @roshanvaz3208 ปีที่แล้ว +1

    Hi Andrea. Can you please teach us how can we include a 3D character on our website that changes position, angle and scaling according to scroll. Thanks. :)

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Hey Roshan! Like on the website of Lenis? I’ve had this on my to-do list for a while now, will try to make it work 😉

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

    Can you explain how we can use any video to scroll UP & Down when we use slide bar from mouse

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

      You need a JavaScript code snippet

  • @NicholasZein
    @NicholasZein ปีที่แล้ว +1

    Really cool! ❤
    Would you mind explaining why you prefer to use external libraries instead of using Elementor's motion effects?

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      😉
      More flexibility & customisability

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

    what if we have multiple fixed containers in one page?

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

      I call that a different scenario or use case and the effect needs to be adjusted accordingly. I haven't tried that...

  • @AhmedMagdy-lf4nr
    @AhmedMagdy-lf4nr ปีที่แล้ว +1

    Thanks 👍

  • @peteharrison3241
    @peteharrison3241 ปีที่แล้ว +1

    Great tutorial, I've played with GSAP via Oooh Boi's Steriods for Elementor plugin, but not seen Lenis before. How do you change the layout of your Elementor editor to have the Update/Publish button on the top of the screen rather than at the bottom of the Widget panel?

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Thank you, Pete! Oh, Lenis is fantastic and so easy to implement. I need to make a full vid only about Lenis because there are some additional things that need to be implemented when using it if for example use popups etc...
      I just updated Elementor to the latest version

    • @peteharrison3241
      @peteharrison3241 ปีที่แล้ว +1

      @andrea egli I found the experimental option for the Top Bar, that needed activating.

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      @@peteharrison3241 ah yes, I forgot about that step, very important

  • @CM-sz4ug
    @CM-sz4ug ปีที่แล้ว +1

    Hi Andrea, this is amazingly high quality. I appreciate it as knowledge I couldn't afford to pay for. On mobile only the first image container (with 2 images) is visible on scroll. Is there a way to make the other two image containers display beneath this like a typical gallery?

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Hey! So happy to hear that you found this useful 😀 did you find a solution? I would modify the size of the containers…

    • @CM-sz4ug
      @CM-sz4ug ปีที่แล้ว

      @@andreaegli thanks Andrea :-) look forward to more of your videos

  • @pustynnyklakier4805
    @pustynnyklakier4805 ปีที่แล้ว +1

    Hi Andrea. Could you help me? It works great with three containers - first, gallery, selected works. If I duplicate everything and I receive 6 containers the same it doesn't work properly..

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      I don’t know, I haven’t tried that many containers and can’t imagine why it wouldn’t work…

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

    Beautiful Work like u Mam

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

    Hi Andrea, I can not find a way to make this effect work in tablet or mobile modes. Is there a way to make it work?

  • @Fransyy
    @Fransyy ปีที่แล้ว +1

    PS: you have a great elementor admin dashboard that has different positions than the standard, do you use a plugin for that or is that within the elementor settings? could not find it :')

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Oh, if you update to the latest version of elementor, you’ll get the same dashboard 😉

  • @RebeccaLuu
    @RebeccaLuu ปีที่แล้ว +1

    Hey Andrea, love this video and your others.Grreat way to make elementor website pop! I implemented this into my clients website but it seems to only work when i am logged in. It doesn't work on incognito or when i am logged out of wordpress. Do you have any suggestions?

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Hey, Rebecca! Thank you so much! I agree 🤓 That is very strange! What browser are you using? I've tested it on Chrome, Safari and Arc and it works just fine on all of them..Here's my version: tuts.egliandreastudios.com/index.php/fixed-scroll-img-gallery-with-gsap-lenis/ If this works for you, there might be something else going unrelated to the effect...let me know!

  • @thewebstylist
    @thewebstylist ปีที่แล้ว +1

    Luv this style! Curious can I ask, I can’t figure out a client request to have a very wide image jpg of a timeline in an Elementor site in a row be fixed on scroll into to them pan left to right horizontal to pan view whole image and then when it gets to fax right view then scroll down into the next roll. If you know a solution (I also have the GSAP pro plug-in) pls let me know what I can $end you! 🙏🏻💻😎✌🏻

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Can you send me an example of what you’re trying to achieve?

    • @thewebstylist
      @thewebstylist ปีที่แล้ว

      @@andreaeglijust watching this vid again to recreate.
      Woooo hooo Do you sell your amazing designs?
      And I’ll send a link to what I’m trying to recreate w fixed wide horizontal image scroll, thanks so much !

  • @kovinhas
    @kovinhas ปีที่แล้ว +1

    You should make more tutorials like this using GSAP. GSAP is a powerfull tools that level up the websites. Can you do more tutorial maybe changing Mouse Cursor effects, or loading landing pages please. There aren't much youtubers exploring this theme using this GSAP effects.
    new to the channel, and i love it

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      hey, Kovin! Yup, I have a full playlist on the channel covering GSAP. Will definitely be covering more GSAP features, might even have one coming next week so stay tuned!
      Thank you so much!🤩

  • @Webrisernl
    @Webrisernl ปีที่แล้ว +1

    Is it also possible to get the prebuild template?

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      Hey! Yes, mid to end January I will add most of the stuff i've built on the channel to my website so stay tuned for that. Sub to the NewsLetter, I will announce the launch there ;) happy new year!

    • @Webrisernl
      @Webrisernl ปีที่แล้ว

      @@andreaegli thanks alot you got my support! Love your work! Happy new year much love, luck and most important I wish you health!

  • @chathurajayadinu
    @chathurajayadinu ปีที่แล้ว +1

    Can you share this custom font that you used in headings?

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      yes, here it is demofont.com/kudryashev-display-font/

    • @chathurajayadinu
      @chathurajayadinu ปีที่แล้ว

      @@andreaegli thanks dear!

  • @AronBouwer
    @AronBouwer 21 วันที่ผ่านมา +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.

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

      hey! Yeah, after the latest Elementor update affected the Lenis code. Here's a hotfix: ohwow.club/lenis-smooth-scroll-in-elementor-hotfix/ for now it works well, we will see in the future. If there will ever be any issues, please check back for updates on the page I shared above ;) i hope it helps!

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

    Do you have a solution to make this work with mobile somehow?.. I spend alot of time to create a beautiful page and also love it alot.. but on mobile it off.

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

      The only solution is to make one of the containers with images, not show on mobile. Edit the size of the containers down to 30 or 45vw (depending how much padding/margin you add here), edit the size of the images, adjust the margin & padding, width, height etc...these are just a few things you can do. It's not difficult but you need to play around with ALL the values that make up this effect. I've done it on a project and it worked just fine ;)

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

    can you create this website with hand top 0.27 ☺???

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

      not sure what you mean by hand top?

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

    Hi, when I scroll, the image section becomes white in 1 sec. How to change that ?

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

      Same Issue

  • @oppaisensei6087
    @oppaisensei6087 ปีที่แล้ว +1

    heyyyy it's me again your favorite sub the notion link isn't working :)

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      😅 You need to take a number and wait your turn! Kiddddinnngggg!!!! It should be fine now😊

    • @oppaisensei6087
      @oppaisensei6087 ปีที่แล้ว

      @@andreaegli arigato!!!!!!

  • @lehlohonolomokoena2204
    @lehlohonolomokoena2204 ปีที่แล้ว +1

    Music playlist please, damn good

    • @andreaegli
      @andreaegli  ปีที่แล้ว +1

      hehe, I get my music from Artlist so I don't think they're on Spotify but I can make a list and send it to you if you'd like😉

    • @lehlohonolomokoena2204
      @lehlohonolomokoena2204 ปีที่แล้ว

      @@andreaegli lol yes please!! I’m on Spotify too, and forever create cool designs and animations with your tips. Really appreciate. Big love from South Africa.

  • @thewebstylist
    @thewebstylist ปีที่แล้ว +1

    Awards worthy style indeed 🎉 I’d luv if mobile views were included in your awesome vids (I’ve been putting mobile design as a priority 1 for a decade) 🙌🏻📱👍🏻😎

    • @andreaegli
      @andreaegli  ปีที่แล้ว

      Yup! Some (most I would say..) do include mobile design options but yeah, I will try to add that to all in the future. Mobile design is definitely very important but some effects should just be disabled in mobile view, especially if they are overly complex or lead to bad UX.