Gooey Link
The Gooey Link element is a text link element that provides a micro-interaction that switches between two texts on hover using a morphing/blending effect.
Note:
In order to provide support for iOS, the text is wrapped inside an SVG, this has an impact with regard to some font properties and specifically font sizing.
The Font Size setting of the typography preset for example does not have any effect on this element!
In order to provide support for iOS, the text is wrapped inside an SVG, this has an impact with regard to some font properties and specifically font sizing.
The Font Size setting of the typography preset for example does not have any effect on this element!
How font sizing works:
- Specify a size using the width and height under the Container category in the design tab that will fit your ideal text size.
- Under the Text category in the design tab. Use the Scale setting to scale up/down the text
- Depending on the type of font used among other factors, you may need to use the Vertical Offset setting to vertically position the text within the given container size.
Content Tab
Content
- Text: The default text
- Text on Hover: The text shown on hover
- Link: The link for the text
- Tag: Wraps the link inside the given HTML tag
Effect
- Type: The effect type to use
- Duration: The Effect duration
- Blending Strength: The strength of the effect. This is the main lever you have for the blending effect. There is no magical formula here, the right number will depend on the font used, the text size, font weight, and how much you want the two texts to blend with each other on hover. Start low and work your way up until you are satisfied.
Design Tab
Container
- Width: The container width
- Height: The container height
Text
- Vertical Offset: The vertical position of the text within the container
- Scale: The scale factor applied to the text