| Overview |
A great text animation doesn't just catch a participant's eye — it can guide them toward taking action. This guide covers how to use Feversocial's built-in animations, plus how to add unique visual effects using USAL.
Why does your page need text animation?
Deeper engagement: Interactive content keeps users on the page longer — time on page rises by an average of 70%, giving your brand message more time to be read in full.
Sharper conversion: Pages with interactive animation convert 2x more often than static pages; adding motion to your CTA buttons alone can lift click-through rate by 15% to 40%!
Stronger attention: Text animation removes the "flat" feeling from a page, lifting user engagement by an average of 50% and making visitors more willing to interact with your content.
Sources: Demand Metric, Social Targeter, CleverQuokka
Feversocial's built-in text animations
The Feversocial dashboard already includes several ready-to-use animations, so you can apply them instantly without writing any code.
Where do I set up an animation?
In the page editor, select the text you want to animate, click "More" in the toolbar, then click "Animation Settings" to configure it.
Built-in animation reference table
Dashboard menu name | Code tag |
Fade in | data-usal="fade" |
Fade in from right | data-usal="fade-l" |
Fade in from left | data-usal="fade-r" |
Vertical flip | data-usal="flip" |
Horizontal flip | data-usal="flip-l" |
Rotate | data-usal="flip-ul" |
Zoom in | data-usal="zoomin" |
Zoom out | data-usal="zoomout" |
Advanced setup
If the built-in animations don't cover what you need, Feversocial supports importing animation code generated by USAL.
USAL is a powerful third-party animation generator that lets you:
Design more complex animation paths and curves.
Fine-tune the "bounciness" and "speed" of an animation.
Generate lightweight code that won't slow down your page load.
How do I generate an animation on USAL and import it into Feversocial?
[Step 1] Set up your effect on the USAL website
Website: https://usal.dev/#home
On the USAL site, select "Playground," then pick an animation type from the menu on the left.a. Fade: The element goes from transparent to opaque.
Examples: fade-u (fade in upward), fade-dl (fade in from bottom-left).
b. Zoom In: The element appears growing from small to large.
Example: zoomin-r (zooms in from the right).
c. Zoom Out: The element appears shrinking from large to small (usually with a sense of depth).
Example: zoomout-ul (zooms out toward the top-left).
d. Flip: A motion like flipping a card.Example: flip-l (flips to the left).
*Quick note on direction codes: u=up, d=down, l=left, r=right.
Fine-tune the other animation details
Don't worry — you don't need to adjust every single one, just whichever settings you like!
Animation Tuning:
Value 1 (movement/angle): How far it moves, or how much it rotates.
Value 2 (Y/perspective): Vertical offset or sense of perspective.
Value 3 (intensity): Animation intensity.SPLIT OPTIONS: Used for text animation, such as splitting a sentence into individual words.
Split Delay (ms): The delay between each split element (in milliseconds).TEXT EFFECTS: Special effects designed specifically for text.
COUNT ANIMATION
Target Number: The number to count up to (e.g. when scrolled into view, the number automatically counts from 0 up to 1000).
TIMING
Duration (ms): How long the animation runs. A higher value means a slower animation (1000 in the tool means 1 second).
Delay (ms): How long to wait after scrolling into position before the animation starts.
Threshold (%): The trigger threshold — what percentage of the element must be visible in the viewport to trigger the animation (10 in the tool means it starts once 10% is visible).EASING
Controls the animation's speed curve (e.g. fast-then-slow, constant speed, or a bounce).
TYPOGRAPHY
Default Font: Choose a font.
Font Weight: Font weight (e.g. Bold, Light).
Font Size (px): Font size, in pixels.
MODIFIERS
Blur: A blur effect — control whether the element looks blurred as it enters.
Once only: Play once. When checked, the animation only plays the first time it scrolls into view — scrolling back up and down again won't retrigger it.
Loop continuously: Keeps looping.
Keep final state: Stays on the animation's last frame once finished, instead of disappearing or resetting.
If you'd rather not tune every parameter by hand, USAL also offers one-click preset templates.
Click any of these buttons to instantly preview a classic layout animation (great for when you're short on time!):
Hero Title: A main-headline effect (typically grand and slow-paced).
Card List: A card list (great for product feature sections).
Counter: A number counter.
Shimmer Text: Text with a subtle shimmer.
Fluid Text: A smooth, fluid text effect.
Split Paragraph: Splits a paragraph so the text appears with layered timing.
Custom Timeline: A custom animation timeline.
Tuned Animation: A finely tuned, polished animation.
Loop Animation: A looping animation.
Stagger Effect: A staggered animation effect.
[Step 2] Once you're happy with the preview, copy the HTML code USAL generated into Feversocial's code field — that's it!
Tips for working with USAL animations
Tip 1: How do I change the preview text? (So it's not always just "Hello USAL")
In the USAL Playground, find the HTML editor and locate <div ...>Hello USAL!</div>. Delete Hello USAL! and replace it with whatever text you want to test (e.g. "Buy now," "Click to claim"). Once changed, the preview below updates instantly with your text, so you can check whether the animation's timing feels right.
Tip 2: How do I bring a specific effect over to my Feversocial page?
If you've already finished your content and want to add an animation to a specific piece of text —
for example, you want to apply a Loop Animation to the text "Buy now" on one of your buttons —
First build the Loop Animation HTML code on USAL
Then just copy the data-usal="fade loop duration-1000" part (what comes after data-usal will vary depending on the animation you picked)
Once copied, go back to the Feversocial page editor, open the source code for the block where you want the animation applied, and paste it right after the style attribute — that's it!
