There is a bug in here. When you look at the shape-divider animation at the center of the screen, and then you reload the page: the whole screen is displaced to the left, and the css command body {overflow-x:hidden;} does not help, at all. Do you know the reason? The code was used in exactly the same way as you did, copy and paste. Of course, you must test this bug in any browser without being logged to wp and elementor.
If anyone still can't figure out how to fix the problem with mobile overflow, here is the solution: Mobile browsers ignore overflow-x:hidden to body and html when using The problem is solved by adding this property to separate sections.
Hi Dominik! Thanks for this video i am happy with it. I use the mountains. I do got a question, when i look at my site with phone the wavy mountains gets full color after about 15 secs. Than after ~15 secs it gets normal, and then it comes back. Any ideas how to solve? Thanks!
Please help, when I apply the code, it works but when it hits the end, showing like a tail cutting edge then it went back, it's not perfect loop, do you know how to fix it?
Thanks for the cool animation.I tried this but my entire frame is moving along with the text and hero images insted of just the shape divider alone.Can anyone help on fixing it?. Thanks in advance --- UPdate: I got it fixed.I added a css class name for my frame and assigned the animation code for that ...hence the entire frame was moving
But mate when u see the mobile version it’s messed up! Is their anything you can do to stop that? Or can you disable it on mobile some how? Like the movements? Thanks bro and great video by the way!
"overflow-x: hidden" does not work. When you open the website outside of elementor you can scroll sideways and see the animation. This shouldn't be possible. What can I do?
At 1:57 you state, "How do we achieve that, that's the biggest question right now . . " The biggest question is what impact on page loads do these animated images place on the site?
I'm going crazy, but how do you put hotspots on a video instead of an image? I would like to make my site interactive with videos and hotspots. I'm afraid that with Elementor I can't ... I ask for help.
@@dominikrapacki Hello! Do you know how to animate any particular element using keyframes and additional elementor css options? It would be great if you have already done it on your websites so you could briefly explain how to do that. Thank you anyways
I'm having trouble wiith this on mobile. It seems if i have it animated with the CSS it causes it to be super wide on mobile. Can you help? Heres my CSS body{ overflow-x:hidden} .elementor-shape{ width: 800%; animation: shape 20s ease-in-out infinite; } @keyframes shape { 0% {left: 0;} 50% {left: -400%;} 100% {left: 0;} }
I tried this but now my page looks horrible on mobile. I put in the code for mobile but it still looks bad on mobile. I love the animation and even tried to customize the code.
Hey you have to hide the overflow on the body and use thee adjusted keyframes code: body { overflow-x:hidden; } @keyframes wave { 0% { margin-right: 0%; } 50% { margin-left: -100%; } 100% { margin-right: 0%; } }
Hey Dominik, erstmal danke für die tollen Videos auf eurem Kanal! Ich habe heute ein bisschen mit den shapes gespielt und dabei am Ende etwas herausgefunden. Und zwar wenn man die Seite aktualisiert F5 oder wie auch immer, verrutscht die Seite pro reload. Dieses verrücken lässt sich auch nicht zurücksetzen. Ist das bei deinen Seiten ebenfalls so? Also meine Seite sieht am Anfang ganz normal aus und die Animation funktioniert auch. Dann drücke ich F5 und der Text rutscht nach links, wieder F5 die Seite rutscht weiter nach links und rechts entsteht weißraum.. Vielleicht kennst du das schon und kannst mir weiterhelfen :) Liebe Grüße Marcel
Something really strange has happened while adding the code to the Elementor Pro Custom CSS. I saved the code, the animation looks fantastic, but when I went back into edit the code is gone and the animation continues to work unless I disable the bottom shape divider. Question is, where is the code and how do I disable it?
Hello sir thank you for such an amazing and educative video please I am using motion effect on my website but it is not loading on the windows explorer browser and some other browsers I have done the caching but still not fixed but it load well when i am using google chrome can you please help me fixed that thanks
Hi I have a major problem with this. It applies to all the dividers on the website and not the one that I have selected. How can I restrict it to only certain dividers?
hello everyone .. I'm not an expert ... can you share the correct code for the rate does it work on mobile? and how do you reproduce the animation continually? then delete the trend on the right and then on the left ..
great work! super easy to do ! and moreover the thing works unlike many tutorials I have seen. Thanks for the video! it would be really great if we could know which chrome extension you were using. Again ,great work , keep it up :)
My second question, is how do you do it on a specific page only? For example, I have shape divider on the homepage and service page, but I want animation is only on homepage?
pls klick the link in description, the webpage i entered is far behind mine i built with WP. I´m not sure what is goin on here, and yes, the short code didn`t work...
I'm having the same issue, doesn't really look great on mobile. I'd love some improvement though. It worked fine in the beginning, I suggest it has something to do with me updating woocommerce. Gives your site a great feel though, definitely needs some tweeking for instance; hide on mobile or tablet mode. After doing somany crazy things with wordpress I've learned that proper knowledge of CSS, HTML, Java & Javascript is required.
Thank You, You write "animate anything" . Could you explain me how to identify different elements to animate? in the example you refer to shape dividere but if i'd like to try with an other element where can i found it and to animate? ( using keyframes? ) thank You
This is Excelent! Thanks for Sharing! Its difficulty to find this type of video, maybe for de SEO but when find it, its awasome! Great! If you upload more contet like this, I will suscribre definetely!
Hey dude! you guys have few videos but really fine ones!!!!!!!!!!! please do more of those videos with some cool stuff, we are waiting for more . also please add some links to your portfolio page on your website, I couldn't see the websites you guys have made! good luck with your new channel!
Great tutorial! one of the best! Thumb up! however, the animation is going beyond my viewport. My question is how do I keep it within the viewport? Thanks again and keep up with the good work!
I think it's the first line of the code, overflow: hidden, is what should keep the content fit the viewport, make sure it works and you spelled it correct, and that nothing overwrites it.
Hi !! Nice video. To fit this animation to tablets and smartphones format, What percentage of width should be put? width: 210% the screen protrudes, and what px in 50% margin-left ? Thank's 😉
I wonder if you could only address that animation only in that one page, now all .elementor-shape-bottom /.elementor-shape-top elements are dancing lol
There is a bug in here. When you look at the shape-divider animation at the center of the screen, and then you reload the page: the whole screen is displaced to the left, and the css command body {overflow-x:hidden;} does not help, at all. Do you know the reason? The code was used in exactly the same way as you did, copy and paste. Of course, you must test this bug in any browser without being logged to wp and elementor.
Nice tutorial but how do you make it responsive to different page sizes. On smartphones the animation runs off the page
This is very cool what extension is that for the chrome would love to know it. Thank you.
If anyone still can't figure out how to fix the problem with mobile overflow, here is the solution:
Mobile browsers ignore overflow-x:hidden to body and html when using
The problem is solved by adding this property to separate sections.
What's that chrome plugin you mentioned at the end
Can you do scrolling effects without pro version with css or html?
Cool globe animation 👍 where I can get that ? 🤔
mobile view is broken how and where can i delete it
I have elementor free in my wordpress. Why in my shape divider animation background not moving ?
Hi Dominik! Thanks for this video i am happy with it. I use the mountains.
I do got a question, when i look at my site with phone the wavy mountains gets full color after about 15 secs. Than after ~15 secs it gets normal, and then it comes back. Any ideas how to solve?
Thanks!
Need that solution too
in my website it dose not move at all..
Please help, when I apply the code, it works but when it hits the end, showing like a tail cutting edge then it went back, it's not perfect loop, do you know how to fix it?
Hello from Brazil! Can i split vertically? I need :(
Thanks for the cool animation.I tried this but my entire frame is moving along with the text and hero images insted of just the shape divider alone.Can anyone help on fixing it?. Thanks in advance --- UPdate: I got it fixed.I added a css class name for my frame and assigned the animation code for that ...hence the entire frame was moving
can i do it with no elementor pro?
On mobile the animation causes scroll to appear (as the window gets bigger)... how to remove that?
Yea... this is a very cool animation, you have shown here... pls make more video on animated icons also which shown in the beside the text.
Does not work for my mobile viewport. Any advice?
But mate when u see the mobile version it’s messed up! Is their anything you can do to stop that? Or can you disable it on mobile some how? Like the movements? Thanks bro and great video by the way!
yes it's messed up the mobile responsiveness.Did you find any fixes for it?.Please advise.
I tried this, but is not working for me, not sure why :( did the exact same thing, any advice?
You sir are a legend. And there is me thinking i was not going to find what i was looking for, thank you
how i rotate text like wheel rotation in elementor ??
Not working for me
It just not moving
"overflow-x: hidden" does not work. When you open the website outside of elementor you can scroll sideways and see the animation. This shouldn't be possible. What can I do?
curious about this myself
At 1:57 you state, "How do we achieve that, that's the biggest question right now . . " The biggest question is what impact on page loads do these animated images place on the site?
can you tell, the name of google chrome extension?
I'm going crazy, but how do you put hotspots on a video instead of an image? I would like to make my site interactive with videos and hotspots. I'm afraid that with Elementor I can't ... I ask for help.
Great tutorial ! Thank you!
BTW what is the Chrome Extension that you used at the end of the video?
Thanks Pinto! Its called keyframes.app keyframes.app/
@@dominikrapacki Hello! Do you know how to animate any particular element using keyframes and additional elementor css options? It would be great if you have already done it on your websites so you could briefly explain how to do that. Thank you anyways
What's the extension?
Can somebody help me. Every type i chose is not animated :/
I'm having trouble wiith this on mobile. It seems if i have it animated with the CSS it causes it to be super wide on mobile. Can you help? Heres my CSS
body{ overflow-x:hidden}
.elementor-shape{
width: 800%;
animation: shape 20s ease-in-out infinite;
}
@keyframes shape {
0% {left: 0;}
50% {left: -400%;}
100% {left: 0;}
}
Awesome, but will this apply to all dividers in every page? That could get a little busy.
I tried this but now my page looks horrible on mobile. I put in the code for mobile but it still looks bad on mobile. I love the animation and even tried to customize the code.
Don't know much about CSS but there should be an option to customize it properly for mobile if not disable it.
set media screen max width around 768px
@media only screen and (max-width: 768px){
body {
overflow-x:hidden;
}
.elementor-shape-bottom {
bottom: -1px;
animation: wave-movin 5s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
width: 200%;
}
}
@keyframes wave-movin {
0% {
margin-left: 50;
}
50% {
margin-left: -100px;
}
100% {
margin-left: 0px;
}
}
What’s that chrome extension you mentioned? Thanks mate.
Hi, how to do this but with a overlay background?
nice reply
Which chore extension did you use at the end????
Hello thanks for the great video, please how did you get the animated gif? i would like to know how to get that and use it.
thanks i have used shape divider and its so cool...thanks...can you please tell me the name of the chrome extension?
It works when placed downstairs. What do I have to enter in the code to put this in the hero section up?
I fiexed: the text: bottom write to Top. :) Thank you. Not responsive but i whote margin-left: -400px for better.
@@Boldogsagtar I can't find the code
where can I get it from ? the link in the description doesn't work
@@theinformationbomber7102 l found on the same link.
Pretty cool, but on mobile, it is making my site move left and right... How do I stop that?
Hey you have to hide the overflow on the body and use thee adjusted keyframes code:
body {
overflow-x:hidden;
}
@keyframes wave {
0% {
margin-right: 0%;
}
50% {
margin-left: -100%;
}
100% {
margin-right: 0%;
}
}
very good tutorial but what about tablets and mobile mood it looks totally not professional because it goes totally from the screen how to fix it ??
Same bro, did u fix it?
Can this be done in the free version of elementor tool ???
Hey Dominik, erstmal danke für die tollen Videos auf eurem Kanal! Ich habe heute ein bisschen mit den shapes gespielt und dabei am Ende etwas herausgefunden. Und zwar wenn man die Seite aktualisiert F5 oder wie auch immer, verrutscht die Seite pro reload. Dieses verrücken lässt sich auch nicht zurücksetzen. Ist das bei deinen Seiten ebenfalls so? Also meine Seite sieht am Anfang ganz normal aus und die Animation funktioniert auch. Dann drücke ich F5 und der Text rutscht nach links, wieder F5 die Seite rutscht weiter nach links und rechts entsteht weißraum.. Vielleicht kennst du das schon und kannst mir weiterhelfen :) Liebe Grüße Marcel
Something really strange has happened while adding the code to the Elementor Pro Custom CSS. I saved the code, the animation looks fantastic, but when I went back into edit the code is gone and the animation continues to work unless I disable the bottom shape divider. Question is, where is the code and how do I disable it?
Hello sir thank you for such an amazing and educative video please I am using motion effect on my website but it is not loading on the windows explorer browser and some other browsers I have done the caching but still not fixed but it load well when i am using google chrome can you please help me fixed that thanks
Hi I have a major problem with this. It applies to all the dividers on the website and not the one that I have selected. How can I restrict it to only certain dividers?
Nice man, how did you do the globe animation on the right?
Check out our video on wp bodymovin
So awesome! 🙌🏻⚡️💪🏻💥👏🏻
First time I’ve seen a video of yours, pls keep the tips and tricks coming to us Elementor heads!
Is it possible to have the site title be animated? If yes what css do I put in? I'm a beginner and the help would be so useful!
So helpful. But i have a question!
Does it affect website load speed?
hello everyone .. I'm not an expert ... can you share the correct code for the rate does it work on mobile? and how do you reproduce the animation continually? then delete the trend on the right and then on the left ..
Is there a way to achieve this without the css code in either of the customize or Elemetor pro
great work! super easy to do ! and moreover the thing works unlike many tutorials I have seen. Thanks for the video! it would be really great if we could know which chrome extension you were using. Again ,great work , keep it up :)
hey thanks for sharing this tip, could you please also tell me about this globe in website ? how to make this globe animate ?
did you find out how to do it already? :)
Phenomenal, thanks for sharing and I look forward to seeing more from you.
all of the animations are static, is there any way to fix it?
If I have done it to my website, it this will create slowing pages speed?
No its just css animations
@@dominikrapacki Thank you :)
My second question, is how do you do it on a specific page only? For example, I have shape divider on the homepage and service page, but I want animation is only on homepage?
Hey I cant see the code for the mobile in the comments can you give me here??
Very nice, but on mobile it sort of stops. How do I take care of that? Or even disable it on mobile?
Hey Helen, check the comments below. I posted the code for mobile 👍
Picnature Development where mate? Thanks
pls klick the link in description, the webpage i entered is far behind mine i built with WP. I´m not sure what is goin on here, and yes, the short code didn`t work...
It breaks the site, weird scrolling left and right. is there any way to bypass it?
I'm having the same issue, doesn't really look great on mobile. I'd love some improvement though. It worked fine in the beginning, I suggest it has something to do with me updating woocommerce. Gives your site a great feel though, definitely needs some tweeking for instance; hide on mobile or tablet mode. After doing somany crazy things with wordpress I've learned that proper knowledge of CSS, HTML, Java & Javascript is required.
Hi! thanks for share your knowledge. You got the code for mobile? i dont see it in your comments. thanks
Hast du ein Video zu der Globus-Animation neben dem Text gemacht?
Ja es ist das Video mit dem Titel bodymovin Animation
Great video! can I stop a divider when the page has loaded?
I have tried this animation and it's awesome, thank you for this tutorial
Woohoo thank you so much for this!!
WoW thank you so much for giving such valuable and helpful content. May God bless you. Much love and power to you ❤❤❤❤
This was very very educative sir
Amazing video man thanks!
Thank You,
You write "animate anything" .
Could you explain me how to identify different elements to animate?
in the example you refer to shape dividere but if i'd like to try with an other element where can i found it and to animate?
( using keyframes? )
thank You
Yes really this is good, how to customize it for mobile viewing. currently it is showing intermittently
In the elementor shape bottom just add width to like "500%"
Decrease pixels on left margin so you don't see the border.
cool animation. please make more video's like this!
This is Excelent! Thanks for Sharing! Its difficulty to find this type of video, maybe for de SEO but when find it, its awasome! Great!
If you upload more contet like this, I will suscribre definetely!
Hey dude! you guys have few videos but really fine ones!!!!!!!!!!! please do more of those videos with some cool stuff, we are waiting for more . also please add some links to your portfolio page on your website, I couldn't see the websites you guys have made! good luck with your new channel!
WOW this is REALLY awesome thank you!!!
Is the planet a LottieFiles Animation?
Thats cool and all but does it get the girls though
Hahah having a 100% male audience is making it difficult 😁
hehehe :) Have a nice day man@@dominikrapacki
@@michaelhofby you too Michael 👍🙌
Great tutorial! one of the best! Thumb up! however, the animation is going beyond my viewport. My question is how do I keep it within the viewport? Thanks again and keep up with the good work!
I think it's the first line of the code, overflow: hidden, is what should keep the content fit the viewport, make sure it works and you spelled it correct, and that nothing overwrites it.
Thank you for making this video.
Hi !! Nice video. To fit this animation to tablets and smartphones format, What percentage of width should be put? width: 210% the screen protrudes, and what px in 50% margin-left ? Thank's 😉
@Juan Desk Jet did you figure out how to do it? Thanks
Super cool!!
Thank you. And it's awesome...
Thank you very much for the CSS code 😊
Nice tut, nice chrome addon is that!
You're a genius
Thank you very much for this tutorial ....
Luv your awesome tips and dynamic trick$ Dominic! 🙌🏻⚡️💪🏻💥📱💻👏🏻💯
thanks for this code /////
I'm following your youtube channel from Bangladesh
I wonder if you could only address that animation only in that one page, now all .elementor-shape-bottom
/.elementor-shape-top elements are dancing lol
Beautiful!
thanks man! pretty useful!
great tip, thanks
great man
Thank you very much
Awww Man!!! I don't know how to code.
woooooo sooo cool!
yo domi use this Bro:
CSS Code:
body{ overflow-x:hidden}
.elementor-shape{
width: 200%;
animation: shape 10s ease-in-out infinite;
}
@keyframes shape {
0% {left: 0;}
50% {left: -50%;}
100% {left: 0;}
}
@media only screen and (max-width: 767px) {
.elementor-shape {display:none;}
}
Dzięki serdeczne efekt bardzo fajny - w 2022 wciąż działa :)
thanks! so cool!
Thanks a ton.