What is this animation called?

On this webpage, if you scroll down to the “Key skills” section, there are a number of cards for programming languages, etc. If you hover over each card, the card gets larger and then if you hover out it goes back to its previous size. What is this type of animation called? I’d like to learn how to create it but I don’t know what it’s called so that I can search on how to build it. Everything I found was about increasing the sizes of images on hover but that’s a different effect. I tried to figure it out using the Grow element interaction but was unable to duplicate the interaction, simple though it may be. Thanks!


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

Hi, Robert! To recreate this in Webflow, I’d probably just use Scale. Obviously, the example has some different timing and maybe some easing applied, but just so you can get an idea:

scaleexample

Hover In Animation:


Hover Out Animation:

Hope this helps! Let me know if I can clarify anything.

1 Like

Thank you! That makes perfect sense. If I may ask one follow-on question, you’re using two separate interactions, one for Hover In and a different one for Hover Out, correct?

Yep, that’s correct. The hover in has an initial state with a scale of 1, and then another scale that controls how large / how long. The hover out just has one state that returns it back to a scale of 1.

1 Like

Thanks again! I’m very grateful for your quick response. I’ve already created an example and it works. :grin:

1 Like

Awesome! Happy to help.

Ooops, there’s a problem. The interaction works fine with just one page element. However, I have a series of ten divs that need to have this interaction and if I hover over any of the other nine divs, the animation doesn’t occur. The divs all share the same class name “protocols-item” so I initially set “Affect” to “Selected Element” thinking this was the way to apply the animation to all ten divs but just have the animation run when hovering over one specific div. But this setting prevents the animation from running when I hover on any of the other divs. If I change Affect to “Interaction Trigger” this doesn’t fix the problem either. What other piece of this puzzle am I missing? Thanks.

In the interaction settings, all the way at the bottom, change the trigger setting from Element to Class. This will make sure that the interaction works on all elements with that class name.

image

1 Like

Thanks again Chris! The keys were to set “Affect” to “Interaction Trigger” inside the animation and then click “Class” in the Trigger settings and then select the appropriate class name from the pulldown list as you described.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.