A brief becomes a real page.Add a restrained GSAP animation
Enable the animation module and test one accessible page effect.
Video coming soon
Your next step is ready.
Follow the complete written guide below.
The video will join it here when it’s ready.
Before you start
- A verified connection and a practice site.
- EMCP Pro with GSAP Integration enabled.
- An editable practice page and the required code permissions.
Let’s do this, step by step.
Step 01
Enable GSAP and choose where it loads
In Setup → Modules → Content & design, enable GSAP Integration and Save modules. Open Settings and choose Load GSAP in.
Turn on GSAP Integration and save the modules. After the reload, open its Settings drawer. Choose only the places where the animation needs to run.
Step 02
Save the required plugins
In the Settings drawer, select the required GSAP plugins and choose Save settings.
Choose the plugins needed for this effect and save the settings. A scroll effect may need ScrollTrigger. Keep the selection focused on this page’s requirements.
Step 03
Build one page-local effect
Load the EMCP GSAP skill and ask for a subtle reveal scoped to one stable section.
Keep the effect small and leave content readable. Ask for a reduced-motion version and cleanup when the editor redraws the section.
Step 04
Inspect real behavior
Check the public page and editor, phone layout, reduced-motion setting, and loaded scripts.
Confirm there is not another GSAP copy from a theme or CDN. Test both entering and leaving the animated area where relevant.
Step 05
Adjust or remove
Reduce movement if it distracts from the content. Verify the page still works when animation is disabled.
Animation should support the page. The final check is that visitors can still read and interact with every element.
You’re done when…
The effect is scoped, works in relevant views, and leaves content usable with reduced motion.
Keep the reference handy.
The docs cover tool details and requirements for this lesson.