GSAP Guide

1. How to Enable and Configure:

• Select the text element in the Navigator panel.

• Open the Settings tab in the right-hand panel.

• Add the following custom attributes:

'data-gsap-animation' → Defines the animation type (e.g. split-in-fade, split-in-up).
'data-gsap-duration' → Duration of the animation (seconds)
'data-gsap-delay' → Delay before the animation starts (seconds).
'data-gsap-stagger' → Stagger timing between characters or lines.
'data-gsap-playonce' → Set to true if you want the animation to play only once.

2. Example:

Select a text block in Designer and add:

data-gsap-animation = split-in-fade
data-gsap-duration = 1
data-gsap-delay = 0.2
data-gsap-stagger = 0.03

This will fade in each character with a staggered delay.

3. Animation Type:

- 'split-in-fade' → Fade in characters.
- 'split-in-up' → Characters move upward while fading in.
- 'split-in-down' → Characters move downward while fading in.
- 'split-in-left' → Characters slide in from the left.
- 'split-in-right' → Characters slide in from the right.
- 'split-in-scale' → Characters scale up into place.
- 'split-in-rotate' → Characters rotate in.
- 'split-lines-transform' → Lines slide upward from below.
- 'split-lines-rotation-x' → Lines rotate in on the X-axis.

4. Adding Hover Animation (Optional)

If you want an animation to restart on hover, add the attribute:

hover-split

Example: A heading with this attribute will replay its GSAP effect each time you hover over it.