Changed lottie from svg to canvas and the animation disappeared

Design help Animations & Interactions
1

so like a lot of articles and threads here in the forum suggest i changed my lottie animation from svg to canvas to that it can also work on safari/ios.

but than it completly stopped animating and instead now its a steady image.

info: its a lottie animation “while scrolling”

another info: i made this lottie based on vectors in after effects.

any solutions for that? ^^

Here is my public share link: (scroll to the part where it goes vertically again)

https://preview.webflow.com/preview/shoshin?utm_medium=preview_link&utm_source=designer&utm_content=shoshin&preview=938fe3d8f50e211c2b920f18e7aafb8a&pageId=5eeb6954406bcd8b5b14c592&mode=preview

2

Hi @danyalxy

I was just wandering why do you need to change it to canvas? - I use lottie quite a bit and I never have used “canvas” and never had IOS/Safari issues…

did you have any issues with IOS/Safari lotties? and you have tested it?

1 Like
3

sorry werent in this forum for some time. but saw your comment now.
so yes basically lottie is lacking awful on ios/safari.

check it out here:
https://www.shoshin.space/about

when you scroll to approx. the middle there is this japanese sign that should be revealed on scroll…on google chrome its smooth - on safari its a mess. :smiley:

so thats why i tried to change the lottie file to “canvas” because some people mentioned it woukd solve the issue…but no. it makes it worse for me haha…

do you have any tips for that?

4

I know this thread appears to have ended but just in case, I do have a use case for lottie in canvas:
I have a lottie animated vector svg but I want to have the effect where you draw on it with your mouse and it reveals the animation in place but with different colors. I have been looking at using canvas to have two stacked variations of the SVG with a layer that masks one of the layers out where the user has drawn across with their mouse. Kind of like a scratch-off but you “scratch” an animated svg to reveal a different colored version of the same.

Not sure how I can load (and keep animating) the SVG into canvas where this sort of thing is easier. Loading a “normal” svg seems to be straight forward but not so with a Lottie animated SVG.

Is there some other way I can think of approaching this? I have considered using EaselJS but it doesnt solve my issue of actually loading animated Lotties into canvas.

Thanks!