Streaming live at 10am (PST)

Creative Link Effect Animation


#1

Looking to create a customized link effect.

Number 14 is what I'm trying to create from this list: http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-14

Is this possible in Webflow?


#2

Are you referring to this one?

Yes, it is absolutely possible.
And you will not need any custom code, just use interactions with Hover trigger.


#3

Yes thats right @sabanna

What really?! How would I go about achieving this?


#4

Use link-block with text inside. Add 2 divs inside, which will have a width about 2 px and use absolute positioning for put them on the sides. It will be lines.
Create interaction for the link-block with 2 Hover triggers. Every trigger should affect one of the lines. Don't forget to check the option "Limited to nested elements".

Inside the trigger use step Move+Rotation (movement should be first)

Results: http://sapdesign-sandbox.webflow.io/creative-hover-link-effect

Here you can open the site in Webflow and see all details https://webflow.com/website/SAPDesign-sandbox (page: "Creative hover link effect")

Cheers,
Anna


#5