How To Add Motion Animations To Your Website Using Lottie & Elementor [WOW]

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

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

  • @ikemya
    @ikemya 4 ปีที่แล้ว +28

    You just made my day 🤩
    This is an amazing feature that I didn’t even thought of, thank you so much for your awesome tutorials 🙏🏻

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว +3

      Thank you. Enjoy.

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

    Soooo cool! Now Elementor supports it from within the plugin!

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

    Always learning stuff. Thanks & Great job Adam!

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

      Me too. Sharing what I am learning.

  • @RafalReyzer
    @RafalReyzer 4 ปีที่แล้ว

    OMG I was waiting for something like this for all of my life!! :D No more oversized GIFS or crappy autoplay videos. Thanks a lot for sharing!

    • @Fotland-pl
      @Fotland-pl 4 ปีที่แล้ว

      Rafal, I have one question, json loads faster than gif?

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

    thank for the video i keep learning with you every time

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

    your videos always have a great content and you deliver them with transparency.

  • @antlerup
    @antlerup 3 ปีที่แล้ว

    Always the best resource for anything Elementor, thank you!!

  • @vx-petia
    @vx-petia 4 ปีที่แล้ว +3

    Awesome! I got an e-mail from Elementor telling me that they've added Lottie and I didn't even know what it was. I've spent the last 2 days learning more about it and it's exactly what I've been looking for to add a little bit more flair to my pages. Thanks for this tutorial! (I will use the plugin because, unlike Elementor, I can use my customized files where I've changed the base color. Elementor makes you input a URL but no way to change the colors.)

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

    You just keep giving. Love it

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Thanks Stephen. You keep watching and I’ll keep showing up.

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

    This is super exciting! Can't wait to try it out!

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Yes there are some good situations for this.

  • @24blitz7
    @24blitz7 4 ปีที่แล้ว

    Hi bro. I always look out for your videos. You have touched some lives. Learned basics and advanced from your videos, Now I am a developer, Thanks to you. This last video is an amazing breakthrough. Thank you

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

    Great video. This is what i have been look for. Thanks alot

  • @bjulyjayjr
    @bjulyjayjr 4 ปีที่แล้ว

    I would pay $15 a month just to watch your videos! Thank you a million times over!! 👨🏾‍💻

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 4 ปีที่แล้ว

    thanks Adam for sharing, those animations are super cool

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

    I am from Bangladesh & I like your video very much. Thanks dear.

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Thanks for watching.

  • @savvycleaner
    @savvycleaner 2 ปีที่แล้ว

    Great tutorial. Thanks for sharing this. I've learned so much from you. 🙏

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

    LUV LOTTIE FILE$!! GRT one to highlight Adam 🙌🏻💯💥💻🎉👏🏻

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Thanks bro. You can really have fun with them.

  • @zaracrest
    @zaracrest 2 ปีที่แล้ว

    As ever, a super tutorial! Thanks so much.

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

    Thank you so much for taking the time to do this very well presented tutorial.

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

      You're very welcome!

  • @PerryWebCreations
    @PerryWebCreations 4 ปีที่แล้ว

    Very cool! Thank you Adam!

  • @PianoLessonwithWarren
    @PianoLessonwithWarren 4 ปีที่แล้ว

    Nice 👍🏽

  • @patrickhealy1113
    @patrickhealy1113 4 ปีที่แล้ว

    Great video Adam. Thanks for putting this together!

  • @BD-hy8bl
    @BD-hy8bl 4 ปีที่แล้ว +1

    Excellent! Thank you.

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Your welcome

  • @shelleyperez9057
    @shelleyperez9057 3 ปีที่แล้ว

    Omg!! Thank you so much! I've been working on this the whole week and I'm glad I found your channel!. btw, I subscribed! 😊

  • @bacccarani
    @bacccarani 4 ปีที่แล้ว

    Excellent video, thank you Adam!

  • @yoganandasaputra8356
    @yoganandasaputra8356 4 ปีที่แล้ว

    Great , that's why i love elementor.
    Your channel always refresh my day

  • @wowrivieramaya
    @wowrivieramaya 4 ปีที่แล้ว

    Hello greetings from Mexico
    I follow your tutorial to the one on the lyrics, but I export the JSON files as indiaca at minute 7:50
    But in my WordPress it does not recognize them and nothing appears, I would need another plugin or what will be my problem
    Thank you.

  • @terencebenjamin3382
    @terencebenjamin3382 3 ปีที่แล้ว

    Thanks for you great content and explaination!

  • @GeluDanutFarcas
    @GeluDanutFarcas 3 ปีที่แล้ว

    Thank you! I love all your tutorials!

  • @jasminehoy1269
    @jasminehoy1269 4 ปีที่แล้ว

    Thank you ! super love your video!

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

    Lottie animation is not showing on the live website pages, but on elementor wordpress dash board it is working fine, kindly suggest what can be done to overcome this situation where Lottie animation in not at all displayed on the live website.
    Thanks

  • @webdoze
    @webdoze 4 ปีที่แล้ว

    Nice video Adam, this can do some amazing visual things.

  • @thinkcreative1068
    @thinkcreative1068 4 ปีที่แล้ว

    Great tutorial! I'd heard of Lottie but didn't know exactly how flexible and extensive it is. Awesome! (Now I have to find some way to incorporate a spinning donut and bouncing cheese on my site haha)

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Big fan of the bouncing cheese :-)

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

    Thanks for another fantastic video. I wanted something small and simple to add some pizzazz to one of my pages and this will work great!

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Sounds great!

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

    Wow, I was looking for something like this. Thanks!!!

  • @devashishpathak3481
    @devashishpathak3481 4 ปีที่แล้ว

    Thank you sir.Love from Nepal.It works very well

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

    Is there a way to make a column exit on the click of a button, as in an exit animation. like we have the entrance animation.

  • @jamilhfl
    @jamilhfl 4 ปีที่แล้ว

    Thank you
    Very informative video
    Great like it

  • @habeebaldeen896
    @habeebaldeen896 4 ปีที่แล้ว

    Thank You so much..... You've already made my day. I like your videos it so... informative and very simple.
    I really appreciate it for the awesome work you're doing May GOD bless you, and also we want to hear more from you in the future for sure.
    Have a nice day!

  • @Ecki107
    @Ecki107 4 ปีที่แล้ว +23

    12:16
    WPCrafter: "I don't know who wouldn't want a spinning donut on their website"
    Rotating Sun: "Am I a joke to you?"

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

    Good to know! Great tip

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

    Amazing Sir. Thanks that's great idea.

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

      Your welcome.

    • @HariRamOfficial
      @HariRamOfficial 4 ปีที่แล้ว

      @@WPCrafter Sir I am your fan since 2016. Now I am also Elementor expert and woo expert. I learn everything from you and From 2019 I completed 14 fiverr projects to my clients thanks.

  • @MajesticDog
    @MajesticDog 3 ปีที่แล้ว

    You just made my day, Adam. Thank you ever so much for this great tutorial.

  • @YasienSarlie
    @YasienSarlie 4 ปีที่แล้ว

    Good wishing to you and your family 💐 from South Africa

  • @jeremyclimbs
    @jeremyclimbs 3 ปีที่แล้ว

    Thank you man! Ive been looking for this! Is there a way for an animation to play when you click a bad button? I want confetti when they click a button. Thank yoU!

  • @kksal4375
    @kksal4375 3 ปีที่แล้ว

    Great video!

  • @MiMi-dc9qs
    @MiMi-dc9qs 4 ปีที่แล้ว +1

    Thank you ever so much for this. I'm near about to put what I learnt into action. Thank you again!!!

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

    I love this! This was really simple. Thank you so much, Adam.

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

    you are a gem brother

  • @Al-EasyFitSaddles
    @Al-EasyFitSaddles 3 ปีที่แล้ว +1

    HI Adam great videos, thanks. Trying to put woo commerce on a subdomain to improve performance. Did you mention that you had a video that explained how?

    • @WPCrafter
      @WPCrafter  3 ปีที่แล้ว

      I don't have a specific video on it, but its a great video idea.

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

    OMG Amazing!

  • @pancholix
    @pancholix 4 ปีที่แล้ว

    Esta buenisimo, justo lo que necesitaba! Muchas gracias.

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

    Love your content! Best channel out there✌️ Can you please do a video about editing 'bought' website templates/themes and how to edit them in elementor? There's so many templates but there so much confusion because it's almost like every template has a different layout and you have to learn something from scratch every time.
    Please and thank you!!😁😁

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

      Yes. Great video idea. And you are right, it gets complicated.

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

      @@WPCrafter thanks Adam, i love how dedicated you are and prompt to respond and actually engage with your viewers. You don't see much of that around. So awesome!

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

      Thanks Peter. I do my best to make it a 2 way conversation.

  • @learnnfind6430
    @learnnfind6430 4 ปีที่แล้ว

    As I told you before you are a great guy!

  • @ann4726
    @ann4726 4 ปีที่แล้ว

    amazing and quick intro tutorial, thanks!

  • @ComradRush
    @ComradRush 4 ปีที่แล้ว

    Awesome!

  • @reinymargaret5064
    @reinymargaret5064 4 ปีที่แล้ว

    Just came across your channel and immediately subscribed! Awesome content. I am planning to sell an eBook on my wordpress website. Which Digital Delivery Service should I use? Can you please suggest a good one? So confused after looking at so many options!

  • @SandraRees
    @SandraRees 4 ปีที่แล้ว

    Brilliant share, I love animation and you share some really awesome and useful content, thank you so much:-)

  • @kristijanjakob
    @kristijanjakob 4 ปีที่แล้ว

    Nice tutorial. Thank You.

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

    Love it! Thanks 😊

  • @karinapaviotti6348
    @karinapaviotti6348 4 ปีที่แล้ว

    Great video! This is amazing

  • @xDiabloSVx123
    @xDiabloSVx123 4 ปีที่แล้ว

    Love this video! Sharing it. Thank you

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

    Great video! Any suggestions for using it with Thrive Architect?

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Yea you can use the HTML option. I think I’ll make a video on it.

    • @incrediblenitin7861
      @incrediblenitin7861 4 ปีที่แล้ว

      @@WPCrafter I’ve tried embedding using html through Thrive Architect.
      Sometimes it’s load the animation and sometimes it’s just shows the text code in place of the animation. So it’s a weird situation because some users will see the animation and other will see the weird code.
      Save the lottie file as a mp4 video and embed it with a hidden controller, it will provide the equivalent effect.

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

    Nice video, is it compatible with older browsers? Thank you.

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

      That’s a really good question. I’ll look up the comparability. My initial thought is yes.

  • @100technical
    @100technical 4 ปีที่แล้ว +1

    Thanks friend..very nice comme you

  • @linda_sue
    @linda_sue 4 ปีที่แล้ว

    Thank you, Adam! I enjoyed how you added sharing the bouncing cheese with us! I'm going to enjoy experimenting with this!

  • @Madden1970
    @Madden1970 4 ปีที่แล้ว

    Super cool!

  • @mikkosiljander
    @mikkosiljander 4 ปีที่แล้ว +3

    In the loop settings it would be nice able to set how Manny times the loop executes. For the one in the video I would have chosen loop to run something like 3-5 times

  • @nathanjunior7694
    @nathanjunior7694 4 ปีที่แล้ว

    Amazing stuffs, I always love this channel

  • @braywhitjas
    @braywhitjas 3 ปีที่แล้ว

    Hi I have a random question. What are you using to put yourself in the little bubble in the corner? It reminds me of how sign language interpreters interpret on screen in the bubbles.

  • @manumontt9683
    @manumontt9683 4 ปีที่แล้ว

    Really nice feature (the plugin) and the Lottie srcs, but on mobile isn't showing, do you have a clue? Thank you.

  • @susangemayel-tapper3794
    @susangemayel-tapper3794 4 ปีที่แล้ว +1

    Hi Adam, can you do a video on the animation icons called Lordicon, as the TH-cam videos that are already out aren't that great.

  • @Gb-zi1nh
    @Gb-zi1nh 4 ปีที่แล้ว

    nice vid bro! keep it up :)

  • @camiloaristizabalweb
    @camiloaristizabalweb 4 ปีที่แล้ว

    So great man this is so usefull

  • @sfmikica
    @sfmikica 4 ปีที่แล้ว

    Cool! Thanks!

  • @npero
    @npero 4 ปีที่แล้ว

    Thanks a lot
    Was looking for a way to do this

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

    Love the video!
    I'm facing the following problem: I want to use a couple of animated JSON files in a slider (I'm using WordPress with Elementor). Unfortunately all sliders only accept real photo or video files from the media library and do not provide any possibility to use shortcodes (provided by the WP plugin "Bodymovin") or the plugin "Animentor" instead.
    I would be infinitely grateful to find a solution for that!

  • @MuhammadSalman-ys5we
    @MuhammadSalman-ys5we 4 ปีที่แล้ว

    Amazing and very helpful, thank you so much

  • @bennyre7915
    @bennyre7915 3 ปีที่แล้ว

    Is there a way to create a Lottie which crosses several sections? For example a dotted path swirling down when scrolling? Thank you in advance.

  • @bluelacyseo8964
    @bluelacyseo8964 4 ปีที่แล้ว

    Another great video!

  • @raheem109
    @raheem109 4 ปีที่แล้ว

    Thank you Lord Varys for the lesson

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

    Wow, quite a cool discovery Adam - just hope people don't 'over-use' Lottie Animations - LOL.

    • @WPCrafter
      @WPCrafter  4 ปีที่แล้ว

      Yep, like any animation or movement, better to use it very sparingly.

  • @jiloa1234
    @jiloa1234 3 ปีที่แล้ว

    Thanks so much for the special information! Maybe you can help me, I added in the element a template with animated text on an image. The text does not appear at all on the mobile. In the portable Elementor, on the other hand, it seems to work. You have an idea?

  • @DangerNG56
    @DangerNG56 4 ปีที่แล้ว

    amazing feature actually....going to help enhance my work

  • @Sharron-j4y
    @Sharron-j4y ปีที่แล้ว

    this is very kewl and informative - gives a new take on ani - Wado (thank you in Cherokee)

  • @Ledones
    @Ledones 4 ปีที่แล้ว

    Animentor doesn't work here and I don't know why it doesn't :/

  • @seekingdhyana3848
    @seekingdhyana3848 4 ปีที่แล้ว

    Does it need Elementor pro version for plugin ...great video

  • @prod.dante0119
    @prod.dante0119 3 ปีที่แล้ว

    Loved it

  • @TheRapidGamer
    @TheRapidGamer 4 ปีที่แล้ว

    Wow... what a resource!

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

    Awsome Tutorial!
    I wonder if i can use it with divi as well?!
    Thanks in advance

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

      You can. I’ll check if there is a native way to do it.

  • @BuddhirDhenki
    @BuddhirDhenki 4 ปีที่แล้ว +3

    Thank you!

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

      Your welcome

  • @dannijensen5538
    @dannijensen5538 4 ปีที่แล้ว

    Cool feature!
    Any guides on how to apply those animations to Divi ?
    Thanks!

    • @dannijensen5538
      @dannijensen5538 3 ปีที่แล้ว

      @VedranLazun com - There is a plugin for it :)

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

    Sir which screen recorder & video editing software duo you use ???

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

      Screenflow lately.

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

    Thanks, can we do the same with DIVI?

  • @subhasishbhattacharya.
    @subhasishbhattacharya. 3 ปีที่แล้ว

    Thanks 😊

  • @anthonyguada
    @anthonyguada 4 ปีที่แล้ว

    I want to live next door to this man, we can be BEST BUDS... He could always be there on-the-spot to help and teach me when I get stuck, which will be a lot a lot alot
    ehh, I am so new to website creation and elementor and a whole bunch of stuff I purchased and have no clue how to use any of what I purchased,
    hence, me on this channel

  • @shabanabegum5248
    @shabanabegum5248 2 ปีที่แล้ว

    hello, sir I have added this animation to my wordpress website. but when my client opened his website on mobile the animations are not showing. kindly please suggest what to do.

  • @oreoluwadaniel1831
    @oreoluwadaniel1831 4 ปีที่แล้ว

    I love this guy

  • @fahadahmadkhan3777
    @fahadahmadkhan3777 4 ปีที่แล้ว

    Amazing, keep it up

  • @RaghulArtCraft
    @RaghulArtCraft 4 ปีที่แล้ว

    It will work on visual composer Wordpress Plugin?