â–Ľ
Streaming live at 10am (PST)

Gif only 1 loop?

hi! is it possible to let a gif only play once instead of looping forever?

[1]
https://preview.webflow.com/preview/shoshin?utm_medium=preview_link&utm_source=designer&utm_content=shoshin&preview=938fe3d8f50e211c2b920f18e7aafb8a&mode=preview

This isn’t something you can edit within Webflow, however it is possible to set the looping within Photoshop when saving out a GIF—so I’d imagine it’s possible in whichever software you’re using to create it:

image

If you didn’t create it and you’d like to stop it from looping infinitely, then you may want to try something like this which allows you to modify the loop amounts of GIF. I haven’t personally tested this tool out myself, however it came up when searching for the topic on Google and it’s possible that there are alternatives out there as well.

Edit: I noticed you’ve already got the animation setup as a Lottie file on the about page, is there a reason you don’t use it on your homepage as well? Lottie files have this control natively in the Designer.

2 Likes

thank you for your detailed reply and for looking up my other pages.

i would have liked to stick only with lottie even on my homepage, but lottie files are working terribly on ios (safari). they stutter a lot. (if there is a solution for this it would be even greater)

so i had to find an alternative and made this symbol a gif.

i did it by my own with photoshop si i can try to set it to 1 loop like you recommended.

Hello @danyalxy,

So lottie files don’t always work perfectly on safari. There is a fix though, switch your lottie settings from SVG to Canvas on the Lottie settings in webflow.
Screen Shot 2020-08-24 at 10.20.25 AM
Now that fix is not perfect. It might change the proportions of your original lottie, so be aware of that. Let me know if it works for you.

2 Likes

As @Pablo_Cortes said, the canvas setting isn’t always the solution, but I’ve found that it works much better for Lottie files that were made from image sequences—especially on iOS.

2 Likes

yes i have been experimenting with canvas for some time but it has weird behaviour. it changes the proportions and i feel that it even messes up the resolution.

but other than that even the animation itself wasnt working anymore. why is that?
the lottie is made with after effects bodymovin based on vector…

so thats why it began to experiment with gif because it seems to work pretty well in terms of animation and functionality on different devices BUT it is not compatible with interaction. this seems to be the cost…

Yeah it kind of sucks that Lottie doesn’t work perfectly on all browsers. I think there is something you can still do though to optimize your lottie. Look up in the forum or on a google search how to optimize your AE file for using the bodymovin extension. I think there are a couple of options that you can change on the export file that could improve the final rendering. Also, take a look at this list, it might provide you with what is not working on iOS https://airbnb.io/lottie/#/supported-features Good luck.

2 Likes

thanks pablo! will se if i can stick with the lottie…
cheers

1 Like