Streaming live at 10am (PST)

Star rate using lottie animation - star disappears after finishing animation!

Hi. I am very happy to be able to use the lottiie animation in my web based service.
I am trying to use this at star rating about books.
But I have faced problem at using the lottie star file.

image

Then you can see the modal for the star rating. Please click the first star.
image

The star animation works well but after finishing the animation, the star disappears.
I want to the star remains as yellow filled star after finishing the animation.

What should I do?


Here is my public share link: LINK
(how to access public share link)

In most of the case, if you set the playback to stop at 99% instead of 100%, you’ll fix this issue.

Thanks for your kind reply. @vincent.
Is there any way to set the playback to stop at 99% in the webflow lottie setting?
Now I am using https://lottiefiles.com/72-favourite-app-icon .

Regards,
Keaton

To help you efficiently, we need your site’s public read-only link. Do you mind sharing it please? Her are twomethod to generate it.

1 - From the Designer, top right button. This is the recommended way as it will link directly to the page you’re on.

2 - From your site’s Settings panel:

Once generated and copied, come back here to paste the link.

Thanks in advance.

Thank you, @vincent.
Following your guide,
https://preview.webflow.com/preview/bookson-mvp?utm_medium=preview_link&utm_source=dashboard&utm_content=bookson-mvp&preview=76d6a81d3aaee45ce84c3fb440cb29ae&mode=preview

In this project, the issue is in wallet-connected-with-booklist page.

Thank you again.

Regards,
Keaton

I’d use start an animation instead of the integration

2 Likes

Wow!! @vincent
I really appreciate your comments.
And I believe that your guide will be helpful to other webflow users when they are trying to use lottie in their project.

:+1:

1 Like

I am sorry for asking too basic question.
I cannot see the star rating lottie animation in the webflow screen.
Do you see the star?
The lottie original file shows yellow bordered star before starting animation.