Lottie animation callout on hover issue

Design help Animations & Interactions
1

Hello all. I am working on a product callout animation. Basically there are “hot spots” which the user can hover over to activate a lottie animation. I have set up a grid and grid areas in order to have the elements stay put on resizing. The issue I am having is the lottie animation is a visible still image when the page loads. I cannot show/hide as this moves the grid along with the “hot spot”. I have tried opacity, setting the starting frame on the lottie animation to a blank frame, but no luck. Any ideas?

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

2

If I’m understanding your issue/constraints correctly, I think that controlling the opacity should work. Here’s how I set it up. The first opacity obviously being 0 and the second being 100. You can play with the timing however you want of course!

image
image582×852 49.1 KB