How to animate multiple shapes on one hover over

Pinegrow Interactions Add-on
1

Hi,

Made a logo that has a lab bottle that is turning to the right and some stuff comes out of the bottle. All works OK, but I have the problem that all SVG shapes animate individually on hover. What I try to accomplish is where ever you hover over the logo the complete animation plays. How do I do that with Interactions?

Regards,

David

2

Hi @AllMediaLab,
Hard one to answer without knowing more about the code structure. Can the SVGs be grouped? I would have to see how the animation is set-up.
Sorry I can’t be more help,
Bob

3

@RobM
Thanks for your reply Bob!

Yes I can make the SVG’s the way I want, because I designed it my self in Affinity designer.

What I try is turn the bottle and let the coloured red green and blue circles flow out of the bottle and let the yellow big shape just move a little like liquid does on hover the logo. I know how to make the animations, but need to fire the animation at once with one hover over. Now the hover works on the individual shapes.
https://www.yourweblab.nl/aml-logo/

4

@RobM
Can someone please answer my question!?

5

Hi @AllMediaLab,
So right now both the bottle and the yellow liquid rotate. What other animations do you want? Can you use the same hover trigger that powers both rotation animations to power your other animation? Remember, the trigger and the target of animation don’t have to be the same.
Bob

1 Like
6

Oh OK thanks! Going to try that!

7

Hi Bob @RobM

Can you please explain how to set any trigger on the .svg-wrapper and as target a shape that I want to animate? Just Have to see it once to understand what you mean. Don’t see any elements in the trigger panel., only the animated elements. It’s not possible to select a other then what is animated.

Thanks!
David

8

@RobM Hi Bob,

OK now I know why it did not work! After making a complete new setup with a new Bootstrap 5 and clear description of the SVG layers when I select a Trigger and then go to the target a DropDown appears that was not there before with all SVG shapes showing and now I can select what I want.

Can someone with a Mac check if this is a bug?

Where do I find this in the documentation?

Regards,

David

9

I’m glad it seems to be working now! A lot of times, elements on the page are modified dynamically by Pinegrow and Interactions. Sometimes a project reload is required after a certain action. As for documentation, I’m not sure it is officially written up. There is a mention of it here and here. It is also referenced in the tutorials.
Cheers,
Bob

1 Like