Horizontal Scroll Elementor Free & Pro Tutorial - Step-by-Step Guide! (2024)

Поділитися
Вставка
  • Опубліковано 27 лис 2024

КОМЕНТАРІ • 26

  • @pixelturm
    @pixelturm 4 дні тому

    GSAP is really nice to play around, for commercial usage unfortunately again additional costs for a customer, for my opinion it rather would be better to make nice effects only with CSS & JS, kr

    • @lechclick
      @lechclick  4 дні тому

      Hey, you’re absolutely right-GSAP is such a great tool! 😊 According to their official license, you only need a commercial license if you’re creating a product that is sold to multiple end users, like a website template or a game with paid features. For most other use cases, like building custom websites for individual clients or e-commerce sites that sell physical products, the standard license is completely fine.
      Also, it’s worth mentioning that GSAP offers both free and paid tools. The core GSAP library (with animations, timelines, etc.) is completely free to use for almost all projects. But some advanced plugins, like ScrollSmoother or MorphSVG, are part of the paid membership (Club GreenSock). These are optional and only needed for very specific effects or complex animations.
      So unless you need those advanced features or are developing something to be sold to multiple users, there’s no need to worry about extra costs for GSAP.

  • @wp-doctor
    @wp-doctor 25 днів тому

    Perfect!❤❤❤ Thanks

    • @lechclick
      @lechclick  25 днів тому +1

      You're welcome 😊

  • @daviddrummer7522
    @daviddrummer7522 22 дні тому

    Keep it up!

  • @pradnya1788
    @pradnya1788 День тому

    Hi! It only working only on Desktop version, isn't working on Mobile or Tablet device. What is the solution

    • @lechclick
      @lechclick  День тому

      Hi, Elementor has some bugs since the new version. Please repeat all the settings especially the Grow/shrink and everything related to size and all width and height values for tablet and mobile. It seems elementor is not saving it, at least i have the problem since the new version. Then also clean your browser afterwards. Hope that helps, but it is working on mobile!

  • @MarkTaffs
    @MarkTaffs 23 дні тому

    Hi Sabine. Thanks for this fabulous tutorial. One issue is that I am getting the words scroller-start/end at the top right of the screen.

    • @lechclick
      @lechclick  23 дні тому +1

      HI Mark, thanks for watching. These are the markers. I described it at 10:37 in the video. Just type in "false" and they will dissappear ;-) Hope that helps. Let me know if you have any other questions.

    • @MarkTaffs
      @MarkTaffs 23 дні тому

      @ thank you. I worked it out. It’s working well.

  • @babayaga-m7o
    @babayaga-m7o 18 днів тому

    cooles video

  • @chris_0815_chris
    @chris_0815_chris 9 днів тому

    Hallo Sabine, klappt perfekt auf PC und Tablet, aber am Smartphone, weder Samsung noch Apple kriege ich das vertikale Scrollen hin. hast du einen Tipp für mich. Vielen Dank!

    • @lechclick
      @lechclick  9 днів тому

      Hallo Chris, ich habe es mir gerade angesehen und es gibt kein Problem mit dem Code, bei mir funktioniert es auf dem Iphone. Bitte gehe mal in Elementor in die Mobile Ansicht im Editor und schau ob da alles aktiv eingetragen ist oder nur in grau verebt ist. Geh am besten die Settings für die Container nochmal durch und schau ob vor allem für die 4 inneren Container das Flex Shrink auf 0 ist und wirklich gesetzt ist. Und dann fürs testen bitte immer den Browser Cache leeren oder im Inkognitomodus testen. Ich hoffe das hilft dir !

  • @monimokala
    @monimokala 13 днів тому

    Hello, thank you for your good tutorial, but the problem I have is that I did all the steps exactly according to your tutorial, but when scrolling, it only displays red color and then it does not display any color. I mean the 3 section panels, am I except I don't want to install gsap on my wordpress or not, thank you for your guidance

    • @lechclick
      @lechclick  12 днів тому

      Hello, please check if your scroll container is set to column row horizontal and that your size options in the advanced step are set correctly. Also a problem occurs if in the code a comma is missing. I hope that helps!

    • @lechclick
      @lechclick  12 днів тому

      And also make sure that the HTML widget is at the end because all elements need to be loaded before the Javascript code comes.

    • @monimokala
      @monimokala 5 днів тому

      @@lechclick I have followed all the steps but I am still having problems. I definitely want to use this method for my site. How can I contact you to resolve this problem?

    • @lechclick
      @lechclick  4 дні тому

      I’m sorry to hear you’re having trouble! You can reach out to me via my email listed in the channel description, and I’ll do my best to help you resolve the issue.

  • @zmauriaN
    @zmauriaN 14 днів тому

    How can we make the "Start" text disappear before the slide begins on the side? Thank you

    • @zmauriaN
      @zmauriaN 14 днів тому +1

      finded, edit in gsap code "markers: true," to "markers: false,"

    • @lechclick
      @lechclick  14 днів тому

      great that you find it.

    • @lechclick
      @lechclick  14 днів тому

      I have also changed it in my code, so that it comes without the markers :-)

  • @moisesvasquez5077
    @moisesvasquez5077 23 дні тому

    Not working :( follow all the steps but it does not work correctly, the cut or transition is done wrong

    • @lechclick
      @lechclick  22 дні тому

      Thank you for your feedback! It’s interesting because this method has worked for others and it worked for me in three different elementor setups, so there may be a small setting or detail causing the issue here. If you’d like, feel free to share the exact steps you followed, and I’d be happy to take a closer look and help troubleshoot!