Animated symbol on mouseover

Saola Animate Support Questions
#1

i am making a 1200 px wide banner with 3 large interactive areas. The area start as a static image, but upon rollover i want to animatie that part.

I think a symbol is the best for that, correct? Inside the symbol i want a looping animation of datatransfer to a server.

I made the symbol and the scene, but i cant get the mouseover working and the looping part of the symbol. Also the banner needs to be responsive and scaling inside the div.

So i need some help with this… Not getting the answers from the manual. Can you help?

#2

Hi Dennis,

You can use a symbol or an additional timeline.

You can use a timeline trigger to loop the main timeline of the symbol: https://atomisystems.com/html5-animation/using-timeline-triggers-loop-animation/

You should add a Play Symbol action to Mouse Enter event of the symbol element.
But the symbol scene is transparent by default and it doesn’t receive any mouse event, so Mouse Enter event only occurs when hovering elements inside the symbol. You can also set a solid fill with opacity 0 for the symbol scene so that it can handle mouse events.

To scale entire the banner, the most simple method is setting its scene width/height to px unit, and select AutoFit option in Document pane.

Regards

#3

Thank you for this great answer. Very clear.
I’ve made my animation, but it does not load on the testpage. WOuld you mind taking a look at it?

<>

#4

Hi Dennis,

The height of the animation container div is 0 so you don’t see anything.
You animation dimension is 1200 x 500, you just need to set padding-bottom: 41.67%; (500/1200) for the container div to make it have the same aspect ratio as the animation.

<div id="ukqVqaec" style="position: relative; width: 100%; padding-bottom: 41.67%;"></div>

For more information, please see this tutorial:


Regards
1 Like