Skip to main content
e
10mo ago

Importing Lottie Files / Event Listeners

Hi! Excited about playing around with Rive and I have a two part noob question.

1. When I import a Lottie file into an artboard I see the lottie file placed both on the main Artboard and as a separate self Artboard? I'm not sure how to explain it but is this on purpose? I couldn't find anything on this behavior in the docs.


2. I'm trying to create my first state machine with a simple hover state that switches between a single frame static duplicate of the lottie asset and a second fully looped animation on hover. the problem is that when i click on the lottie asset and create an event listener, i don't see any pointer event listener options. What am i missing?
I tried adding an event to the artboard but i didn't make much progress.




2 replies
e
10mo ago

Hi ! yes that behavior is expected, when you drag and drop the lottie file to an existing Artboard it will create a Nested Artboard (Nested Artboards are similar to precomps in After Effects), there's an option if you don't want that nested artboard: In the assets panel, right click on the lottie/json file and select "Generate Artboard
I'm sharing a quick video here, let me know if any of this makes sense.
https://www.dropbox.com/scl/fi/vhcm83lykkyxat8gf22dc/testLottieArtboard.mp4?rlkey=zq3qszvg8dwtrke40nlhxcgxb&e=1&st=lrcg7czk&dl=0


For the second point, what you need in this case, is to create a shape in order to activate the listeners panel, a common practice is just creating a rectangle with the size of the wanted interactive area, then turn down the color opacity and with that selected you'll see the options, let me know if any of this helps, looking forward to see that interaction working!!!
here's a link for a tutorial on listeners, I really recommend this playlist if you are starting with Rive, super helpful and short videos

e
(edited) 10mo ago

thank you so much for your response!!!

for my second question, i think the issue was that i was trying to add event listeners to the nested artboard, so i removed the default rive artboard and just worked directly with the artboard.

i landed on your proposed transparent hit-area box after I noticed that hover "enter" states were being re-triggered multiple times depending on whether or not i would hover over different groups of the lottie file