GSAP DOT GROWS & SHRINKS ON PAGE SCROLL - Elementor Wordpress Tutorial Flex Container
HTML-код
- Опубликовано: 7 авг 2024
- Let's add a little bit more spice to your web creations with this GSAP page scroll animation.
CODE: www.notion.so/CODE-GSAP-grow-...
Timestamps:
00:00 Intro
00:34 Demo
05:51 Outro
Thank you for watching!
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
The animation you didn't know you needed, of course, built with GSAP. What do you think, will you be using it?
I am so happy to find your wonderful videos.
Love your works ! Amazing tutorial ! Thanks☺
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 ;)
I really like this channel, I've watched a lot of channels and this by far the coolest.
Hehe, thank you so much 😊 let me know if there’s anything specific you would like me to cover
Eagerly waiting for your tutorials! There must be a new masterpiece in this video as well
I don't know if you can call it a masterpiece but I think it can be fun to use🤓
@@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 ✌🏻
Love your vids andrea. Waiting for more elementor tutorials :)
More to come!
Thank you so much for creating this effect.
You are very welcome 🙏
Superrrr! 😊❤👌👏👏👏👏👏
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?
amazing channel, thanks andrea
Thank you, Lucas!
Thanks Andrea!!
You are very welcome!
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. 😊
Very good work!
Thanks a lot!
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?
Super nice... Would this be possible with icon widgets? Instead of creating your own shapes with CSS?
Well done on your amazing videos and channel. Could we ask what website this was from?
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!
I m waiting
Hi! Have you tried Focus Library for Elementor?
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!
❤❤
Hi, it's supposed to works on mobile device with this code ? thanks
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
Hey Corina! You are very welcome! Do you mind sharing the link to the project? You can send it to my email...
@@andreaegli Thank you for reply. I send it to you.
Hi Andrea! How do I disable the gsap on mobile and tablet? It isn't working properly. Thank you!
Nice content again ! So you're not enqueuing any JS in Elementor custom code or function.php (child theme) ?
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 😉
Amazing Job. You should make a course and teach this stuffs 😀
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😁
@@andreaegli yap GSAP makes all the difference regarding the experience you could have through your website. Please keep doing your amazing tutorials 😜
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
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!
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 ;)
@@andreaegli Thank you Andrea! Another quick question, is there a way to add grain to the color of the circle?
Hey andrea i used your code but i am getting 2 scroll bars can you help it to resolve thanks
Where are you getting the scroll bars?
@@andreaegli right side of the page just left side of default scoll bar
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
@@diegoandresdiazportela1123will try this brother btw thanks
Hey!! Did you find a solution to your problem? I face it too..
Hi Andrea
Unfortunately this code is not working for me. can you tell me what wrong i am doing?
Hey! if you followed all the steps, this should work. I can't tell without having a look at your backend setup
@@andreaegli It isn't working for me either, the CSS code appears on my layout instead of the dot.
@@dee3382 that's because you most likely forgot to close a ; no other reason for CSS to show on the layout. hope it helps
please,
can you paste the code only for the letters to change the colour?
Not sure I understand what you mean..
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 !
@@dogjailsound I think you're refering to this: ruclips.net/video/uZAljVDdQwU/видео.html I made it
@@andreaegli that's correct, great !!!!
Is this in elementor free version?
You could use elementor free for this but you would need the code snippets plugin to add the code
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.
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.
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.
@@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.
Amazing tutorial after watching gsap animation tutorial all other normal animation looks soo boring
Thank you so much! hehe, I know what you mean, I can't stop making these animations😁
@@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
its not mobile responsive andrea
You have to adjust it for mobile
@@andreaegli how to adjust it?