Streaming live at 10am (PST)

Creative Link Effect Animation

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?

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.

Yes thats right @sabanna

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

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

1 Like