# How to animate multiple shapes on one hover over

**URL:** <https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [November 9, 2021, 9:39am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861 "2021-11-09T09:39:15Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 9, 2021, 9:39am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/1 "2021-11-09T09:39:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [November 9, 2021, 10:39am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/2 "2021-11-09T10:39:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 9, 2021, 11:00am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/3 "2021-11-09T11:00:59Z")

</div>

@RobM  
Thanks for your reply Bob!

> [@RobM](#):
>
> Can the SVGs be grouped?

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/](https://www.yourweblab.nl/aml-logo/)

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 12, 2021, 8:25am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/4 "2021-11-12T08:25:16Z")

</div>

@RobM  
Can someone please answer my question!?

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [November 12, 2021, 10:40am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/5 "2021-11-12T10:40:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 12, 2021, 10:44am UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/6 "2021-11-12T10:44:08Z")

</div>

Oh OK thanks! Going to try that!

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 12, 2021, 2:56pm UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/7 "2021-11-12T14:56:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [November 12, 2021, 7:51pm UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/8 "2021-11-12T19:51:45Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [November 12, 2021, 8:14pm UTC](https://forum.pinegrow.com/t/how-to-animate-multiple-shapes-on-one-hover-over/5861/9 "2021-11-12T20:14:13Z")

</div>

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](https://pinegrow.com/docs/interactions/actions/interactions/) and [here](https://pinegrow.com/docs/interactions/selecting-target-elements/). It is also referenced in the tutorials.  
Cheers,  
Bob
