Thanks for the tutorial! I would love to see the feature of Jsons be made available in the standard plan. It's literally the only reason why I had to purchase the business option.
Thank you so much! This is really helpful. I am having an issue with the code block being too large in height, I can't seem to decrease it on my page. The lottie is the correct size, but the code block scrolls all the way down the page. Is there a way to edit the height of the code block with the lottie in it? Much appreciation!
Hi! Are you using a keyframe that is not supported by Bodymovin? You can see a list of supported keyframes here salihabdul-karim1.gitbooks.io/lottie-documentation-draft/content/after-effects-supported-features.html
Hey Carl Johnsen, I have taken Loop off. Is there anyway that I can make the lottie file repeat itself after I have scrolled past it and come back up to it?
I’m generating a json from After Effects using bodymovin. Every time I try to upload the json to json.bin I get an invalid json error. No matter what setting I try in bodymovin this keeps happening. I have a comp that is just a bunch of JPGs strung together to make my animation. I can’t figure out what I’m doing to get that error?
Hi Carl, thanks for the tutorial. I'm getting an error when adding the link from my Bodymovin after using jsonbin. Do you have any suggestions how I can troubleshoot this? Or what community I can talk to? :)
Hi Marc! Yes, a few people have been having problems. I'll be releasing a video probably late this week/early next week on how to host the files on GitHub instead. GitHub seems to be the best bet at the moment, but it can be a bit fiddly if you're new to it. If you can't wait for the video feel free to send me an email.
Great video. Thanks for sharing. Is there a way to hide the video bar that loops the animation? I was able to successfully upload it per your instructions, however, the video player is showing.
@@Voltzaps Thank you so much. I truly appreciate your reply man, I've been searching for weeks on how to do this, it was so simple, and it worked. God Bless!
Hi Carl, your tutorials are top notch, thank you! I was wondering if you could give me some advice on using my lottie animation as a hyper link in squarespace. I was hoping the user can click on the animation and be directed to another page on my site. ANy help would be awesome, thank you!
Am I being stupid... all working great in the Squarespace editor but as soon as I save and exit, the animation just doesn't appear. What am I doing wrong lol?
Hi carl! I was able to get the animation working on my landing page...any suggestions on how to layer the animation so it's full page in front or behind the text? Im trying to use it as an accent feature
Hi Carl, love you work mate. The dry humour is the best. Is it possible to do an update on this one... or show us how to upload our original animations to jsonbin? If you could I'd be stoked. Many thanks for your hard work regardless.
Hi Paul! Sure, it’s been a while since I used Lottie in Squarespace, but you might want to try using LottieFiles to upload your animations instead. Give me a shout if you need any help with it all.
Hey Jake! I know. You can use GitHub instead. I'll have a tutorial coming out soon for it, but if you can't wait feel free to shoot me an email or DM on Twitter.
Hi Paul, For about a week Squarespace has stopped hosting my own Lottie files hosted through JSON bin. I can host other Lottie files not hosted through the bin. Just wondering if you have run into any problems like this? Another designer I know has experienced similar - previous Lottie files no longer playing through a code block hosted through JSON bin...
@@burtonrunyan3498 I suggest the following tutorial: ruclips.net/video/Wgme-ZkkIAA/видео.html I resaved using this methos and they are now playing on squarespace again! I think the issue for me was linked to json bin
It is, yes. You need to wrap the Lottie player in tags, like this: LOTTIE PLAYER HERE Change YOURURL to either a URL slug for your site "/contact" for example, or an external URL. If you want the link to open in a new tab, you'll need to add target="_blank" to the tag, like so: LOTTIE PLAYER HERE
I've used this tutorial with success in the past. However, I'm trying use it again today and the links that used to be in the description are all gone. Can anyone help? I need to grab the player. Thanks.
Thank you so much for this! Unfortunately I still get a permissions error, squarespace isn't allowing me to fetch the URL because it's on a different server. My console is logging a CORS error. I've tried hosting the file on Amazon S3 and allowing the permissions with JSON but it still isn't working.
I have a question, I did everything you said with Bodymovin to get my animation as a JSON file and then I put it into Squarespace using the Lottie Player and it showed up as a bunch of missing images but animated? It was weird, is this a size issue? I tried looking it up on Google but I couldn't find any help for my issue, was wondering if you knew. Thank you so much! This video helped a lot.
Hi! I've had problems with bigger renders too. There's also a list of features that aren't supported in the render github.com/airbnb/lottie-web/wiki/Features Might also be worth checking that you've got the latest version of Bodymovin.
@@Carl_Johnson This worked like a charm for me until today and I'm not sure why, but I can get other jsons to work, but mine in hosted through the Json bin just won't play today. I've updated all the github links so everything is up to date... any ideas?
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
If you're having a problem with JSON bin, here's how to host the JSON files on GitHub: ruclips.net/video/7ZmjGxlbHMo/видео.html
another great video! super helpful! love the motion + squarespace tutorials! (bring back the rive -> squarespace tutorial 🙏)
This is Boss, thank you. Why have I taken this long to find your tutorials? You should have loads more subscribers :-)
Thanks Hannah!
This is great! Thanks for the quick hit answers and also your fun humor!
your tutorials are amazing!! ive been going through all of them. thank you so much for creating them 🙌
Thanks Sabrina!
So super, super cool. What an amazing, easy way to add some interest to a website.
Another helpful as vid, love your channel!
Thanks Kieren!!
Thank you for the video! Super helpful.
Carl, you rock. So helpful and informative. Especially the note about how brick enlivens a dull floor 🤪
this is helpful! haven't seen a client request this but will keep in mind! thanks for sharing!
No problem Mike!
how you can explain these complicated things veeeeeeery easy! I wish you had lessons with this title: "HOW TO LIVE!" -simplified by Carl Johnson
😂😂 That's the best comment I've had! EVER!
@@Carl_Johnson 😂👍👍
that's the best comment for a tutorial, I've seen anywhere: )
Thanks for the tutorial! I would love to see the feature of Jsons be made available in the standard plan. It's literally the only reason why I had to purchase the business option.
This is amazing! Was about to create a tonne of Gifs for a client site...After effects here I come! Thanks so much
Glad it helped, Kelly. Have fun with After Effects.
hey great video! i know im a little late but how do you flip the animation?
Thank you so much! This is really helpful. I am having an issue with the code block being too large in height, I can't seem to decrease it on my page. The lottie is the correct size, but the code block scrolls all the way down the page.
Is there a way to edit the height of the code block with the lottie in it?
Much appreciation!
good lord, that's a lot of process for a little looping animation. Squarespace really needs to implement Lottie files into their platform
Yes, they really do need implement this.
Super helpful! Thank you for this tutorial :)
No problem Pooja!
Thank you! Made it seem feasible for me!
Glad it helped!
hi i dont know why but my bodymovin render keep failing. i already check the comp and sources are all fine. any ideas?
Hi! Are you using a keyframe that is not supported by Bodymovin? You can see a list of supported keyframes here salihabdul-karim1.gitbooks.io/lottie-documentation-draft/content/after-effects-supported-features.html
@@Carl_Johnson yeah that would be the case, i was using camera and making parallax. So thats maybe the issues.
How do you change the padding of the animation? There's space at the top of the code block, cant figure it out. Thanks for the awesome video btw!
Thank you Carl
Excellent work
THAT Branding Company Thanks!
Dope! Thx 🎉
Thanks for the help full video Carl🙌 Is there a way to add lottie animasjons in the logo area?👀
Thanks! I haven't found a way to easily get the Lottie player into the logo area yet.
Hey Carl Johnsen, I have taken Loop off. Is there anyway that I can make the lottie file repeat itself after I have scrolled past it and come back up to it?
I’m generating a json from After Effects using bodymovin. Every time I try to upload the json to json.bin I get an invalid json error. No matter what setting I try in bodymovin this keeps happening. I have a comp that is just a bunch of JPGs strung together to make my animation. I can’t figure out what I’m doing to get that error?
perfect video!
Hi I have a question! How do you make it so that the lottie animation can go behind the text?
any way that you know of now that square space doesnt allow code injection unless you start paying more?
Unfortunately not Jacob! You need to be on the Business Plan or above.
Hi Carl, thanks for the tutorial. I'm getting an error when adding the link from my Bodymovin after using jsonbin. Do you have any suggestions how I can troubleshoot this? Or what community I can talk to? :)
Hi Marc! Yes, a few people have been having problems. I'll be releasing a video probably late this week/early next week on how to host the files on GitHub instead. GitHub seems to be the best bet at the moment, but it can be a bit fiddly if you're new to it. If you can't wait for the video feel free to send me an email.
Great video. Thanks for sharing. Is there a way to hide the video bar that loops the animation? I was able to successfully upload it per your instructions, however, the video player is showing.
Delete "controls" in the code
@@Voltzaps Thank you so much. I truly appreciate your reply man, I've been searching for weeks on how to do this, it was so simple, and it worked. God Bless!
Hi Carl, your tutorials are top notch, thank you! I was wondering if you could give me some advice on using my lottie animation as a hyper link in squarespace. I was hoping the user can click on the animation and be directed to another page on my site. ANy help would be awesome, thank you!
Am I being stupid... all working great in the Squarespace editor but as soon as I save and exit, the animation just doesn't appear. What am I doing wrong lol?
Hi carl! I was able to get the animation working on my landing page...any suggestions on how to layer the animation so it's full page in front or behind the text? Im trying to use it as an accent feature
Hi Carl, love you work mate. The dry humour is the best. Is it possible to do an update on this one... or show us how to upload our original animations to jsonbin?
If you could I'd be stoked. Many thanks for your hard work regardless.
Hi Paul! Sure, it’s been a while since I used Lottie in Squarespace, but you might want to try using LottieFiles to upload your animations instead. Give me a shout if you need any help with it all.
JSON Bin has completely changed, and it broke my animation. Do you know if there is a new site or a fix?
Hey Jake! I know. You can use GitHub instead. I'll have a tutorial coming out soon for it, but if you can't wait feel free to shoot me an email or DM on Twitter.
Hi Paul, For about a week Squarespace has stopped hosting my own Lottie files hosted through JSON bin. I can host other Lottie files not hosted through the bin. Just wondering if you have run into any problems like this? Another designer I know has experienced similar - previous Lottie files no longer playing through a code block hosted through JSON bin...
I was scrolling comments to see if anyone else had had this issue. Other Lotties work fine for me as well, just not the ones hosted through jsonbin...
@@burtonrunyan3498 I suggest the following tutorial: ruclips.net/video/Wgme-ZkkIAA/видео.html
I resaved using this methos and they are now playing on squarespace again! I think the issue for me was linked to json bin
@@burtonrunyan3498 okay so i'm not a total idiot, i am having the same problem right now.
How do you align the animation. I have been struggling to fix that my animation is always to the left of the code block
Hey Rami!
You’ll need to put the code in this video between some center tags in your code block…
VIDEO PLAYER CODE HERE
Is it possible to make the lottie a link?
It is, yes. You need to wrap the Lottie player in tags, like this:
LOTTIE PLAYER HERE
Change YOURURL to either a URL slug for your site "/contact" for example, or an external URL.
If you want the link to open in a new tab, you'll need to add target="_blank" to the tag, like so:
LOTTIE PLAYER HERE
@@Carl_Johnson Amazing! Thanks so much
I've used this tutorial with success in the past. However, I'm trying use it again today and the links that used to be in the description are all gone. Can anyone help? I need to grab the player. Thanks.
Hi Tammie - here's the link to the player github.com/LottieFiles/lottie-player
hi. i just discovered your channel. hope your vids will help me.
Hi, thanks for subscribing. They should do 😀
do not doubt! it definitely helps!
Fabulous!!
Thanks Alice!
Why do we need Json Bin? Cant we just use it from lottie?
Yes, you can just use the URL from LottieFiles, no problem. The JSON bin part was just intended for people using their own animations.
Could you plz make a video for this and the scrolling animation for wix/editorX as well
I've got some EditorX stuff planned in the future!
Thank you so much for this! Unfortunately I still get a permissions error, squarespace isn't allowing me to fetch the URL because it's on a different server. My console is logging a CORS error. I've tried hosting the file on Amazon S3 and allowing the permissions with JSON but it still isn't working.
Sorry it isn't working for you. What CORS Reason message are you getting? developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors
I have a question, I did everything you said with Bodymovin to get my animation as a JSON file and then I put it into Squarespace using the Lottie Player and it showed up as a bunch of missing images but animated? It was weird, is this a size issue? I tried looking it up on Google but I couldn't find any help for my issue, was wondering if you knew. Thank you so much! This video helped a lot.
Hi! I've had problems with bigger renders too. There's also a list of features that aren't supported in the render github.com/airbnb/lottie-web/wiki/Features
Might also be worth checking that you've got the latest version of Bodymovin.
@@Carl_Johnson Thank you! Yes, I did further research and it was an effect that is not compatible with Bodymovin.
King
Does this work with Squarespace 7.1??
Yes, it'll work in 7.1
@@Carl_Johnson This worked like a charm for me until today and I'm not sure why, but I can get other jsons to work, but mine in hosted through the Json bin just won't play today. I've updated all the github links so everything is up to date... any ideas?
LOL bin full of Jasons