Changelog

New features

This release introduces the inserter component. It allows you to insert frames and components straight from the Framer canvas into paragraphs of text and control their placement.

Other additions include blur and outline properties, as well as vastly improved style mixer component with support for superscript and subscript.

UX improvements

All the animation components now allow you to preview any state on canvas - all you need to do is to just flip a switch!

Bug fixes

Many bugs have been fixed. The stagger in animator and highlighter scroll has been corrected, and setting all the stagger values to 100% should make it possible for words and lines to animate strictly one by one. Dynamic colors no longer break with animator scroll component, too.

Bug fixes

Two issues have been fixed. First, Animator Scroll now works correctly with color styles. And second, Highlighter Scroll no longer crashes on canvas under specific circumstances.

Performance improvements

All components are slightly faster across the board now. Highlighter Scroll gains the biggest boost, and is slightly more resource-efficient. For the rest of the components, gains come from the bundle size reductions thanks to the restructured code.

Animator

Animator allows you to animate paragraphs of text, word by word. Three subtypes are available: appear, variant, and scroll. Appear animates the text when it comes into view. Variant is meant to be integrated with any components that you want to build: just define a state for each variant, and do whatever you want. Scroll animates the text depending on how far you scroll.

Highlighter

Highlighter has the same three variants as animator. However, instead of animating the words themselves, it acts as a mask between two states, animating independently from characters. Great for scrollytelling websites and such.

Style mixer

Style mixer allows to use multiple text styles in the same paragraph. It can be useful if you want to highlight certain words in the paragraph, for example. You can change any parameter of text - typeface, color, size etc. independently for each style. At the moment, 2 styles per paragraph are supported.

Variable

Last but not the least, variable. This component simply allows you to tweak the variable axis of the text. If you are using compatible font, you can precisely change weight, slant, italic and optical size using sliders. Note that all the other components support variable fonts as well; variable component is just simpler and lighter, better suited for situations when no extra functionality is needed.