SplitType - Framer Component

An interactive Framer component that applies a unique text effect to each character when hovered.

Live Preview: https://splittype.framer.website

The component offers multiple animation styles, from a classic "split" effect to more subtle transitions, making it ideal for creating engaging headlines and titles.

Customization Options

Text & Typography:

• Text: The string of text to be displayed.

• Text Color: The color of the text.

• Font: Full typographic controls, including font family, size, and weight.

• Text Transform: Sets the text to uppercase, lowercase, or none.

• Stroke Color: The color of the text outline.

• Stroke Width: The thickness of the text outline.

• Shadow Color: The color of the text drop shadow.

• Shadow Blur: The blur radius of the text shadow.

• Shadow X Offset: The horizontal position of the shadow.

• Shadow Y Offset: The vertical position of the shadow.

Animation & Effects

• Animation Type: A crucial control that lets you choose the animation style on hover:

  • Split: The classic effect where text characters split apart.

  • Fade: Characters fade in or out on hover.

  • Slide: Characters slide up or down.

  • Scale: Characters grow or shrink.

  • Rotate: Characters rotate on their axis.

  • Blur: Characters blur on hover.

• Split Style: The direction of the split (vertical, horizontal, or diagonal). This is only visible when the Split animation type is selected.

• Effect Distance: The distance the text characters move during the animation.

• Animation Speed: The duration of the animation in milliseconds.

• Easing Function: The animation's easing curve, with options including ease, ease-in, ease-out, and a custom Bouncy effect.

• Neighbor Effect: A toggle that applies a smaller, secondary effect to the characters directly next to the hovered one.

• Neighbor Distance: The distance for the secondary "neighbor" effect. This is only visible when Neighbor Effect is turned on.

• Show Scissors: A toggle to show or hide a scissors icon that appears when a character is hovered over. This is only available for the Split animation type.

• Scissors Color: The color of the scissors icon.

• Scissors Size: The size of the scissors icon.

Refund Policy:

All sales of digital templates are final. Once purchased and downloaded, refunds or exchanges are not available. Please ensure the product meets your needs before purchasing. For any questions or issues with your download, please contact me for assistance.