Custom Text-Outline Cursor-Hover "Fading" Effect Idea

Design help Animations & Interactions
1

Hi Webflow Community!

So, I’ll get right to it:

I’m new to Webflow and have used the designer over the past few days to create my portfolio. Learning Webflow has been fun and interesting with what you can achieve - my progress is growing steadily.

When designing my portfolio in Figma I wanted my hero title on the landing page to have this sort of “fade in, fade out” effect on outlined text via the browser cursor position.

So, say, once you begin to position the cursor near what would be the temporarily “hidden” (0% opacity) outlined title, the outline of the text would gradually begin to appear (increasing the text opacity to 100%). The opposite would happen when positioning the cursor further away from the title: the outline of the text would gradually begin to disappear (decreasing the text opacity back to 0%).

The cursor would achieve this “fading” effect in a blurred sense; in a similar if not exact same way as a radial gradient going from HSB(A): 0, 0, 99, (100) to HSB(A): 0, 0, 99, (0).

See the image below for a Figma export representation of the desired effect.

Text-Effect
Text-Effect1512×982 15.2 KB

See how in the above image the cursor’s (the small white circle outline) position affects the text outline of the title below it. And it does so in that radial-gradient (blurred) fashion, gradually increasing the opacity; not instantly increasing entire letters’ opacities.

See the images below for a few breakup shots of the effect in my mind and what I’m trying to portray. I’ve placed a key in each image (bottom-right) to help the portrayal.

Text-Effect-Demo
Text-Effect-Demo1512×982 34.6 KB

Text-Effect-Demo-Expanded
Text-Effect-Demo-Expanded1512×982 43.8 KB

Text-Effect-Demo-Expanded-Further
Text-Effect-Demo-Expanded-Further1512×982 48.8 KB

While I’ve managed to achieve the text outline effect (this is no problem) through a bit of custom CSS (see below) which runs correctly in published destinations, I’m having difficulty achieving this “fade in, fade out” text outline effect in Webflow.

.heading-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #fdfdfd;
}

I’ve tried to play around with a couple of element trigger interactions inside the designer, but to no avail:

  1. I first attempted to create a mouse hover interaction placed on the title’s heading element that would affect the element’s opacity value as the cursor hovered over it. This worked to an extent, clearly increasing and decreasing the opacity; however, it did this over the entire element at once (imagine every letter changing its opacity value simultanesouly) - so this route was a dud.

  2. Afterwards, I tried to create a mouse move over element interaction placed on the title’s heading element, again. This interaction would affect the element’s opacity value based on the Z and Y axis of the cursor. This led to some really weird effects where it would make the title flicker like crazy (because of the conflict between the two axes) and for some reason would make the default (initial state) text opacity 100% even though it was manually set to 0%. For these reasons, this route was again, of course, a big dud.

    • However, saying that - it did prove that interactions would affect the custom text outline CSS, since it’s affecting the title’s heading text as usual, so it would affect the outline (since the outline is the same element/thing); interactions work with CSS outlined text as usual.

I realise now that some type of masking might be needed to pull this effect off?

I honestly don’t know where to go from here, and this is the reason for this post.

Could someone help me out, please?

All help will be greatly appreciated! :slight_smile:

Cheers,
Elliot (MrMinks)