Creative Link Effect Animation

Design help General
1

Looking to create a customized link effect.

Number 14 is what I’m trying to create from this list: Creative Link Effects

Is this possible in Webflow?

2

Are you referring to this one?

1166×126 10.6 KB

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