GSAP DOT GROWS & SHRINKS ON PAGE SCROLL - Elementor Wordpress Tutorial Flex Container

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

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

  • @andreaegli
    @andreaegli  Год назад +5

    The animation you didn't know you needed, of course, built with GSAP. What do you think, will you be using it?

  • @AliceFors-g1n
    @AliceFors-g1n 11 месяцев назад +5

    Hello Andrea. Thank you so much for your work! Love the effect!!
    I just have one question, at 0:14 in the video are you showing an example which has an arrow inside the dot, how do I apply this effect?

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

    I really like this channel, I've watched a lot of channels and this by far the coolest.

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

      Hehe, thank you so much 😊 let me know if there’s anything specific you would like me to cover

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

    Eagerly waiting for your tutorials! There must be a new masterpiece in this video as well

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

      I don't know if you can call it a masterpiece but I think it can be fun to use🤓

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

      @@andreaegli these fun elements together in a website are not less than a masterpiece 👀.. keep it up .. Its a request to make a landing page with vertical and horizontal scrolling in upcoming videos with a smooth scroll ✌🏻

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

    Thank you so much for creating this effect.

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

    Superrrr! 😊❤👌👏👏👏👏👏

  • @梁云慈-m2t
    @梁云慈-m2t 6 месяцев назад +1

    Hi Andrea, How to make the circle in the reference video at 0:14 expand and then stay enlarged for a longer period before shrinking? Thank you!

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

    Love your vids andrea. Waiting for more elementor tutorials :)

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

    Thanks Andrea!!

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

    amazing channel, thanks andrea

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

    how would you use this animation to create an effect like on the site you're showing at 0.27? In a hero section context where the dot starts as a full-width image bg and shrinks?

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

    I am so happy to find your wonderful videos.
    Love your works ! Amazing tutorial ! Thanks☺

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

      You are so welcome and thank you so much for your very kind words! Let me know if there's anything specific you would like me to cover ;)

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

    Very good work!

  • @thatdudepaco
    @thatdudepaco Год назад +5

    Awesome video! 🔥 Why don’t you save you work as a Json templates and upload it for us? Would be incredibly nice and we would have everything ready to go. 😊

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

    Super nice... Would this be possible with icon widgets? Instead of creating your own shapes with CSS?

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

    I m waiting

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

    Hi! Thank you for your tutorials!!! One question that doesn't have anything to do with the tutorial hehehe: What's the name of the first song? Thank you!

  • @SingaporeMathsAcademyUK
    @SingaporeMathsAcademyUK 11 месяцев назад

    Well done on your amazing videos and channel. Could we ask what website this was from?

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

    Hello Andrea. Thank you so much for your work!
    I've managed the strange gap of the html widget changing the height to 0vh. The dot was overlapping in the center-top of my parent container on a previous container, solved with the overflow-y to hidden (parent-container). Unfortunately the animation is working fine on scrolling down, but on scrolling back the dot is first at the end of the container, to jump then to the start to rerun the animation. Is there a way to solve this? THX

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

      Hey Corina! You are very welcome! Do you mind sharing the link to the project? You can send it to my email...

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

      @@andreaegli Thank you for reply. I send it to you.

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

    Hi! Have you tried Focus Library for Elementor?

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

    Nice content again ! So you're not enqueuing any JS in Elementor custom code or function.php (child theme) ?

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

      I never use the child theme. As for the js elementor code option, I only ever use it if the code I add is to be used globally. If it’s in a specific page, I add it to that page. Personal preference 😉

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

    Hi Andrea! can you please help me with these questions?🙏🏼 is GSAP free to use? If yes, do I need to install something else on the site or just the custom code for each animation? Is there anything I should consider before using GSAP? It is completely new to me! Thank you for the awesome videos, best elementor tutorials ever!

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

      Hey Lucas! Sure, GSAP is free to use to some degree. They do have plugins you have to pay for but I never use the paid version (way too expensive for what we do here). Unless you're building super complex animations, no need for the paid version. Also, no need to install anything else on the site unless the animation you're building appears on every page of the website. you are very welcome & let me know if you have more questions ;)

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

      @@andreaegli Thank you Andrea! Another quick question, is there a way to add grain to the color of the circle?

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

    Hi Andrea! How do I disable the gsap on mobile and tablet? It isn't working properly. Thank you!

  • @wasavikashozal9735
    @wasavikashozal9735 6 месяцев назад +2

    Hi Andrea
    Unfortunately this code is not working for me. can you tell me what wrong i am doing?

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

      Hey! if you followed all the steps, this should work. I can't tell without having a look at your backend setup

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

      @@andreaegli It isn't working for me either, the CSS code appears on my layout instead of the dot.

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

      @@dee3382 that's because you most likely forgot to close a ; no other reason for CSS to show on the layout. hope it helps

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

    Hi, it's supposed to works on mobile device with this code ? thanks

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

    Hey andrea i used your code but i am getting 2 scroll bars can you help it to resolve thanks

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

      Where are you getting the scroll bars?

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

      @@andreaegli right side of the page just left side of default scoll bar

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

      Hello, I'm not an expert, but this tag worked for me in the home HTML
      style="overflow-y:hidden"
      If there is another solution, please share it. Thank you

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

      @@diegoandresdiazportela1123will try this brother btw thanks

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

      Hey!! Did you find a solution to your problem? I face it too..

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

    Amazing Job. You should make a course and teach this stuffs 😀

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

      Thank you! I might do that in the future. I need to learn more myself before I do that but it will happen, maybe beginning on next year because people seem to really like GSAP😁

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

      @@andreaegli yap GSAP makes all the difference regarding the experience you could have through your website. Please keep doing your amazing tutorials 😜

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

    ❤❤

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

    Hey Andrea, sorry I am making another request can you do the text reveal effect and horizontal scroll of three headings after the video player on the sendpotion website
    Please I need to replicate or nearly do the same effect, I know I am making another request but I need those effects badly
    Your content is awesome
    Thanks

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

    please,
    can you paste the code only for the letters to change the colour?

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

      Not sure I understand what you mean..

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

      Hey ! I'm watching it again and I feel I understand now that the effect on the text (it is working ) is a gsap, not something that you did?
      And gracias !

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

      @@dogjailsound I think you're refering to this: ruclips.net/video/uZAljVDdQwU/видео.html I made it

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

      @@andreaegli that's correct, great !!!!

  • @what_why_howw
    @what_why_howw 8 месяцев назад +2

    its not mobile responsive andrea

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

      You have to adjust it for mobile

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

      @@andreaegli how to adjust it?

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

    Is this in elementor free version?

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

      You could use elementor free for this but you would need the code snippets plugin to add the code

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

    You could tell us a bit more.. for instance how to make stop the scale down of the background. You didn’t mention anything about it.

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

      This is just a basic animation, of course there’s more you can do with it and I can’t cover all use cases. What else? Will cover anything else you want to know in the description of the video.

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

      You could also be more polite and appreciate the effort she is making on recording this and all the tutorials without asking anything from us.

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

      @@gabrielk5497sorry Gabriel that I forgot to say ”please”. Also why would you think I don’t appreciate what she is doing? I think everyone does, inculding me. However you should understand that most of the content creators do get something out of us. At least most of them at least aim for it. It’s called monetizing and ad revenue. I know many of these guys say ”they do it for the community and the for the joy of sharing etc.” but they wouldn’t do these without getting something back. Even Andrea wants something. Pure joy doesn’t bring food for the table. I really like her style (video and looks), the personality (which is one of the modt important selling points of a creator) and the content. What my point was in my comment that the tutorial lacked something important in my opinion. I also understand that she didn’t want to cover it and all other possibilities, or maybe she just didn’t know how it would work. I also understand that she grabs the code somewhere and just points out what it does by experimenting it herself. Which is totally fine.
      Gabriel. I am being polite to you. Go stick a needle into someone else. Have a great day.

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

    Amazing tutorial after watching gsap animation tutorial all other normal animation looks soo boring

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

      Thank you so much! hehe, I know what you mean, I can't stop making these animations😁

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

      ​@@andreaegliI wish I can learn this coding but whenever I try it's going above my head otherwise I love to create this amazing animation to share

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

    not working

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

      Try again but watch the whole video, that usually does the trick 😉

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

      @@andreaegli In my case, it works perfectly on desktop but when I check the web on my phone the dot stays the same at the top of the page, no animation whatsoever...🤔

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

      It works when I'm scrolling from the bottom back to the top, but not when the page loads.

  • @fwdflashwebdesign
    @fwdflashwebdesign 3 дня назад +1

    Are you Romanian, accent dose not lie ? :)

  • @DrakStares
    @DrakStares 13 дней назад +1

    this is not a lesson! Where is the step by step? they just showed something ready and that's it 👎👎👎