How to Play a Lottie Animation on Scroll in Squarespace

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

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

  • @machinegunyelly6944
    @machinegunyelly6944 3 года назад +4

    You need a whole lot more subs, views, and support. Your content is great! Especially listening to that lovely accent of yours - cheers.

    • @Carl_Johnson
      @Carl_Johnson  3 года назад

      Cheers Dennis! That’s proper kind of you!

  • @karlrydfors8840
    @karlrydfors8840 4 года назад +1

    Your guides are as helpful as guides can be for squarespace, really good.

  • @culturedkeys1289
    @culturedkeys1289 3 года назад +1

    You're the goat man! Love your tutorials as they are extremely helpful! Thank you!

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

    you are a star, man.

  • @RTP.LEYREADY
    @RTP.LEYREADY 3 года назад

    This video has opened up a whole new world...🤣😂🔥🔥🔥 Thank you!!!

  • @TylerCheeseman
    @TylerCheeseman 4 года назад +3

    I'm definitely going to give this a shot sometime! Thanks for this!

  • @jodsgn
    @jodsgn 3 года назад +2

    Followed along and got the scroll to work, however i have the animation in the footer aswell? probably due to the code injection in the footer section? any tips?

  • @samcrawford7861
    @samcrawford7861 4 года назад +1

    Mate this is class! Can't wait to get this on some client sites.

  • @jackbrady155
    @jackbrady155 4 года назад +1

    So good! please keep the uploads coming, extremely helpful!

    • @Carl_Johnson
      @Carl_Johnson  4 года назад +1

      Thanks Jack. Will be uploading more often from now on.

  • @diegocastillo6979
    @diegocastillo6979 4 года назад

    Awesome Content Carl, Your videos have been helping me a lot! Please keep them going!

    • @Carl_Johnson
      @Carl_Johnson  4 года назад +1

      Thanks Diego! Got lots of stuff planned for next year.

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

    Legend, thank you

  • @Voltzaps
    @Voltzaps 3 года назад +1

    How do you change the position and height of the animation on the code block? Thanks again for your videos!

  • @sammicook3010
    @sammicook3010 4 года назад

    Great video thank you- never heard of lottie animations so I shall check it out also

  • @videos-oo1mo
    @videos-oo1mo Месяц назад

    Hey Carl, this is awesome, was missing this in Squarespace. Any way to make squarespace wait for the animation to play through?

  • @thomashowcroft3808
    @thomashowcroft3808 3 года назад

    Hi Carl, such a great video you have saved my day! Thank you so much, I have managed to do the same process on wordpress.
    I was wondering if you know of a way that i can lock the viewport until the atnimion scroll has completed?

  • @ParutoX
    @ParutoX 4 года назад

    Great tutorial

  • @winnie______
    @winnie______ 3 года назад +1

    Your videos are really great! Thank you so much!
    Is it possible to make this animation sticky when it reaches the top and keeps being played on scroll, and then stops being sticky to the top when the animation ends?

    • @spikemoss
      @spikemoss 2 года назад

      Please let me know if you found an answer to this elsewhere, I'm also curious!

  • @kondjanegongo796
    @kondjanegongo796 4 года назад

    Great, will deff use this. why i didnt start trying to customize my website earlier i will never know.

    • @Carl_Johnson
      @Carl_Johnson  4 года назад

      Glad it was helpful! All of these little things add up to make it less 'Squarespacey'.

  • @Iamnickrobertson
    @Iamnickrobertson 2 года назад

    Is there something specific to do when you need part of an animation to play on click? I found a Hamburger menu that transitions into an X and ive got the click to play the animation but it plays it all the way through. Whats the best way to do that so you click it transitions to the X. Then Click the x to transition back to the hamburger menu?

  • @themediajoint
    @themediajoint 2 года назад

    Hi Carl, great videos! After watching this I had a thought, is the number of frames of your animation based on your sequence settings and duration on After Effects? Eg: 60fps for 1.5sec = 90 frames. Just a thought.

  • @grainvisions
    @grainvisions 7 месяцев назад

    It looks sick but i just cant find the Interactivity code for the specific animation inside Lotties website. In fact any of their animations just doesnt have it there under the integrations. Have they changed the location? i just cant find it

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

    Is there a method to adding multiple lotties to one page? For me I can only get one to even appear on the page.

  • @amirdaryani
    @amirdaryani 3 года назад +1

    Hej John,
    Animation on Scroll !?!! that's gold! I have a friend who is working with Webflow and he flaunts this option alwaaaays :)) but now we have it in Squarespace! Many thanks for that+
    I made that and it was working perfectly but suddenly after an hour it stopped working and the Lottie animation changed to these two letters: ">
    I don't know what happened :)) do you know how can I fix it?
    I use version 7.1 and checked the code couple of times.

  • @AbdulWaheed-eq9ex
    @AbdulWaheed-eq9ex 3 года назад

    Great but its not working on scroll i don't know what is the main issue could you help please TIA

  • @LishLikes
    @LishLikes 3 года назад

    Hi Carl! Your tutorials are fantastic. I've run through this with success but have found that randomly my animation just disappears from my site (currently not public) with only a yield/warning label in its place. Have you come across this? Would be grateful for any assistance.

  • @VinceKok
    @VinceKok 3 года назад

    Able to make it Animate when it viewport? A little different from yours.

  • @Lexhouben
    @Lexhouben 4 года назад

    top notch!

  • @MrNinjaRope
    @MrNinjaRope 4 года назад

    Nice!

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

    Hi. I LOVE your tutorials. I have problem with the position of the code block once i leave the edition mode It goes to the top of the page can you help me please? I am desperate.
    Thanks

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

      Can you share the link to your site please?

  • @timothylew7276
    @timothylew7276 4 года назад

    Carl, how about using SVG artista as a Squarespace splash page?

    • @Carl_Johnson
      @Carl_Johnson  4 года назад +1

      Hi Timothy! Yes, if you paste the SVG code into Code Block and then put transition code into the CSS editor, that would work on a splash page.

  • @ogsltd9912
    @ogsltd9912 4 года назад

    Plans for a Christmas add? I want snow on my website please ha

    • @Carl_Johnson
      @Carl_Johnson  4 года назад +1

      I was just going to send you some code, but I had a quick look at your site (onlygymsltd.com) and saw that you've got your snow already 😀

    • @ogsltd9912
      @ogsltd9912 4 года назад

      Hey. Thank you! I found one from a SQSP developer on here, (just need to add more shadow) but I’ve subscribed to your site. So much stuff on there I’m going to add.

  • @tharakakarunarathne5346
    @tharakakarunarathne5346 2 года назад

    I get "W.getLottie is not a function" Error :/

  • @konaing2827
    @konaing2827 4 года назад

    Hey Carl! did u forget something in ur microwave? 4:09 😅

  • @bigpoppapaul
    @bigpoppapaul 4 года назад

    Thank you for all your tutorials. Over the last two months, I've been able to design 3 websites thanks to much of what I've learned from you. Before 9 weeks ago, I'd never done this before so thank you.
    I have a request for a future video. I've been scouring the internet looking for an answer for 3 days. I found this image map generator and would love to know how to embed the html code it outputs into a section on 7.1. www.zaneray.com/responsive-image-map/
    Or failing that, I don't even know if this would be possible, but basically, I need to create an image-map of an area, with other images that show up on hover on points of interest. So one image, with multiple hotspot images that pop up on hover. Hell, I haven't even found a paid plugin that seems to do this as of yet. So a tutorial would be grand.

    • @Carl_Johnson
      @Carl_Johnson  4 года назад

      That's great that you've managed to learn how to build those sites in such a short time! It sounds like Google maps api would be the best option for your map mapsplatform.withgoogle.com/horizons/maps-customization?FY20-Q2-global-otherevent-onlineevent-cs-GMP_Horizons_CGC_website_page_tracking&

  • @147Dalia
    @147Dalia 3 года назад

    Can you please slow down! You have great material but it not coherent.