Streaming live at 10am (PST)

Hover animation help


#1

Hello,
I think i must be missing something, but i can't find an explanation of how to create the effect in exmaple 5 on this page:
https://interactions.webflow.com/

I unserstand how to get the overlay to float up, but how do you then target a separate element (ie the icons) to get them to twist and fade triggered by the same action?

Many thanks for your help.


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


#2

Hi @Timsig

Basically you will have div and all moving/fading/rotating content inside of it.

Interaction should be applied to that div. Inside the interaction you can add few triggers (they can be same or different) by clicking on "+" sign:

In your case all triggers will be "Hover", but affect different elements inside the div.
For example:
1st trigger - Hover - Affect different element: overlay-title - Hover over: Trasition move up - Hover out: Transition move down
2nd trigger - Hover - Affect different element: icon - Hover over: Scale to 1 + Opacity 100% - Hover out: Scale to 0.01 + Opacity 0%

Note: On the interaction site icons by itself has interactions with hover trigger too.

Hope I was able to explain :wink:

Cheers,
Anna


#3

Many thanks- got it now.


#4

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