designer
maker
I build
apps
ideas
3
1
Updated:
Feb 7, 2024
Type:
No-code
Notes
The transition between variants is set to Instant so the container doesn't clip when transitioning from long to short words.
I also use a static Initial variant with an Instant appear transition so that the component doesn't have to wait for any effects to run before it renders on the page.
To add more options ensure the layer you want visible is set to relative. The first variant always needs to have the final layer as absolute.
If you want it in the middle of a sentence, wrap it in a new component so Framer can smoothly animate the resizing. Always ensure it's left aligned.
Be mindful to set any font styling on the primary variant so you don't break inheritance.
Help
How do I add Framer components?