Skip to content
Begin2Code

Build path · Intermediate

Elementor + GSAP Animation

Add scroll reveals, pinned sections, parallax and text effects that make a site feel premium, built inside the Elementor editor you already use, with no build tools and no damage to your Core Web Vitals.

Add scroll reveals, pinned sections, parallax and text effects that make a site feel premium, built inside the Elementor editor you already use, with no build tools and no damage to your Core Web Vitals.

Who this course is for

You can already build a site in Elementor and you want it to stand out, for your own business or for clients. You have used Elementor's entrance animations and motion effects for a fade here and there, but when a client points at a site and says "I want it to feel like that", you are not sure how to get there. That feeling usually comes from timelines, pinning and scroll-linked movement, and that is what GSAP does. This course shows you how to add it to Elementor pages without learning a framework or setting up build tools.

What you should know first

You should be comfortable building pages in Elementor: containers, widgets, the Advanced tab, responsive mode and publishing. If any of that feels shaky, work through Elementor Beginner first, and ideally Elementor Intermediate, before starting here. You need a WordPress site with Elementor that you can safely experiment on, such as a staging site or a Local install on your own computer. You do not need to know JavaScript already. Every line of code is explained as it is written, and you will learn to read the browser console in lesson 1.5.

By the end of the course you will be able to

  • Load GSAP on a WordPress site, explain its licence to a client and write a working animation yourself.
  • Build a hero intro sequence with a GSAP timeline, using easing and overlaps so it feels smooth rather than mechanical.
  • Create scroll-driven reveals, scrubbed animation, parallax and pinned sections with ScrollTrigger that behave on desktop, tablet and phone.
  • Animate headlines with SplitText and count up stats numbers, while keeping the text readable for screen readers.
  • Add Lottie icons and control a hero illustration with the scrollbar, keeping file sizes small.
  • Measure animation with PageSpeed Insights, avoid layout shift and respect visitors who ask for reduced motion.
  • Plan motion for a client page, one clear idea per section, and judge when animation helps and when it gets in the way.
  • Reuse a library of copy-paste snippets on every future Elementor project.

Your course project

Throughout the course you build one real page: the Roast Club landing page for Fernbank Coffee Roasters, a small-batch coffee roastery in Kelham Island, Sheffield. Fernbank sell beans from their shop and online, and they are launching The Roast Club, a monthly coffee subscription posted through the customer's letterbox. You build it as an Elementor page called Roast Club at /roast-club/ on your staging or Local site.

Every lesson adds a piece. You start by loading GSAP and making the hero heading fade up. By the end the page has an animated hero timeline, three staggered feature cards, a pinned three-step How it works section (Pick your beans, We roast on Monday, Through your letterbox), a parallax image band, a split-text headline and a count-up stats band, Lottie icons, a scroll-controlled hero illustration, reduced-motion support and a footer call to action.

The finished page is a portfolio piece you can show clients. In module 7 you use it, or your own site if you prefer, as your capstone and submit it for personal written feedback from Shaz. Pass the capstone and the final exam to earn your certificate.

Curriculum

  1. Module 1: Motion with purpose and setting up GSAP · 11 lessons
    • 1.0 Course trailer
    • 1.1 What you will build and how this course works
    • 1.2 When motion helps and when it hurts
    • 1.3 GSAP in 2026: what it is, what it costs and its licence
    • 1.4 GSAP and Elementor's own motion tools
    • 1.5 Four places to add GSAP to WordPress
    • 1.6 Your first tween, with reduced motion built in
    • 1.7 Avoiding a flash of content, and the editor preview
    • 1.8 Project 1: your motion plan and GSAP set-up, with a worked example
    • 1.9 Module 1 recap
    • Module 1 worksheet
    • Module 1 check (quiz)
  2. Module 2: Tweens, eases and staggers · 9 lessons
    • 2.1 Targeting Elementor elements reliably
    • 2.2 One element, one animation system
    • 2.3 to, from, fromTo and set
    • 2.4 What to animate: transforms, opacity and autoAlpha
    • 2.5 Duration, delay and easing
    • 2.6 Staggers: animating a group
    • 2.7 Project 2: your first entrances, with a worked example
    • 2.8 Module 2 recap
    • Module 2 worksheet
    • Module 2 check (quiz)
  3. Module 3: Timelines · 7 lessons
    • 3.1 Timelines: sequencing without delays
    • 3.2 The position parameter and labels
    • 3.3 Playback controls and a pause button
    • 3.4 Reading GSAP code you find online
    • 3.5 Project 3: your hero entrance timeline, with a worked example
    • 3.6 Module 3 recap
    • Module 3 worksheet
    • Module 3 check (quiz)
  4. Module 4: ScrollTrigger · 10 lessons
    • 4.1 Your first ScrollTrigger, and Elementor's smooth scrolling
    • 4.2 Start, end and markers
    • 4.3 toggleActions, once and batch reveals
    • 4.4 Scrub and parallax
    • 4.5 Pinning sections on Elementor
    • 4.6 Horizontal scroll sections
    • 4.7 Refresh, lazy-loaded images and late layout changes
    • 4.8 Project 4: your scroll story, with a worked example
    • 4.9 Module 4 recap
    • Module 4 worksheet
    • Module 4 check (quiz)
  5. Module 5: Text, SVG, counters and Flip · 8 lessons
    • 5.1 SplitText: splitting text safely
    • 5.2 Line and word reveals that stay readable
    • 5.3 Drawing SVG strokes with DrawSVG
    • 5.4 Counters that screen readers understand
    • 5.5 Flip: animating a filter
    • 5.6 Project 5: your text, SVG and filter effects, with a worked example
    • 5.7 Module 5 recap
    • Module 5 worksheet
    • Module 5 check (quiz)
  6. Module 6: Interaction, responsiveness and accessibility · 9 lessons
    • 6.1 Hover and focus effects without fighting Elementor
    • 6.2 Click effects and pointer follow with quickTo
    • 6.3 Breakpoints with gsap.matchMedia
    • 6.4 Reduced motion done properly
    • 6.5 Loops, flashing and pause controls
    • 6.6 Performance: transforms, CLS, INP and phones
    • 6.7 Project 6: accessible, responsive motion, with a worked example
    • 6.8 Module 6 recap
    • Module 6 worksheet
    • Module 6 check (quiz)
  7. Module 7: Shipping animation on real sites · 9 lessons
    • 7.0 Module intro and version check
    • 7.1 Cache plugins and delayed JavaScript
    • 7.2 WP Rocket's Automatic Lazy Rendering and other hidden breakers
    • 7.3 Debugging with markers, GSDevTools and the browser
    • 7.4 Smooth scrolling libraries: think twice
    • 7.5 Documenting animations for a client
    • 7.6 Project 7: shipping your animated site, with a worked example
    • 7.7 Module 7 recap
    • Module 7 worksheet
    • Module 7 check (quiz)
  8. Module 8: Capstone, final exam and next steps · 7 lessons
    • 8.1 The capstone: what to submit and how it is marked
    • 8.2 Planning your capstone
    • 8.3 A worked example: Reelwick Cinema's capstone, marked out loud
    • 8.4 Why capstones get sent back, and how to avoid it
    • 8.5 The final exam, your tutoring and what comes next
    • 8.6 Course recap
    • Module 8 worksheet
    • Module 8 check (quiz)
  9. Final exam · 0 lessons
    • Final exam (quiz)