info@begin2code.com Join waitlist

Home/Courses/Elementor + GSAP Animation

Intermediate, Blue run Build

Animate your Elementor site with GSAP

Scroll reveals, pinned sections, parallax and text effects that make a site feel premium, built inside the Elementor editor you already use. No framework to learn, no build tools, and no animation that tanks your Core Web Vitals.

Recording now. Join the waitlist and you will hear first, with an early-bird price.

Join the waitlist See the curriculum
7Modules
37Lessons
6 hoursVideo
2Hours of 1:1 included
IntermediateLevel
Full courseCapstone, exam and certificate

Sound familiar?

Entrance animations and the Pro motion effects are fine for a fade here and there. But the sites clients point at when they say "I want it to feel like that" use timelines, pinning and scroll-linked movement. That is GSAP, the animation library behind a large share of award-winning sites, and it now ships free with every plugin included.

What you'll build

An animated landing page for your portfolio, a snippet library you can reuse on every project, and a clear sense of when animation helps and when it gets in the way.

By the end you'll be able to

  • GSAP loading on your site and one working animation you wrote yourself.
  • A hero intro sequence built from a timeline.
  • Scroll-driven sections that behave on every screen size.
  • Headline and number effects you can reuse on any client site.
  • An animated icon set and a scroll-controlled hero illustration.
  • Animation that passes Core Web Vitals and does not exclude anyone.
  • A portfolio piece you can show clients, reviewed by Shaz.

Capstone project

Finish with something real

Build it on your own site, or a practice brief if you do not have one, and submit it for personal written feedback from Shaz. Pass the capstone and the final exam to earn your certificate.

Who it's for

  • You can build a site in Elementor and want it to stand out, for your own business or for clients.

What you need

  • WordPress and Elementor. Elementor Free is enough.
  • The confidence of our Beginner course.
  • No JavaScript experience: we start from zero.
  • A test site you can try things on.

Curriculum

7 modules and 37 short lessons, about 6 hours of video. Every module ends with a quick quiz and an exercise on your own site.

01Getting GSAP into WordPress and Elementor5 lessons

GSAP loading on your site and one working animation you wrote yourself.

  1. What GSAP is, what it costs (nothing) and the licence in plain English
  2. Three ways to load it: Elementor Custom Code, a snippet plugin, or a small helper plugin
  3. CSS classes and IDs in Elementor: giving the script something to grab
  4. Your first tween: make a heading fade up
  5. Using the browser console without fear
02Tweens and timelines6 lessons

A hero intro sequence built from a timeline.

  1. to, from and fromTo: the three verbs
  2. Duration, delay and easing, and why ease matters more than speed
  3. Stagger: animating a row of cards or icon boxes in turn
  4. Timelines: sequencing a hero section
  5. Position parameters: overlapping steps so it feels smooth
  6. Exercise: animate a full hero on page load
03ScrollTrigger8 lessons

Scroll-driven sections that behave on every screen size.

  1. Start and end: reading the markers
  2. Reveal on scroll, once or every time
  3. Scrub: linking animation to the scrollbar
  4. Parallax images and backgrounds
  5. Pinning a section while content changes
  6. Horizontal scrolling panels
  7. matchMedia: different animation on desktop and mobile
  8. Exercise: a pinned "how it works" section
04Text effects with SplitText5 lessons

Headline and number effects you can reuse on any client site.

  1. Splitting headings into words, lines and characters
  2. Masked line reveals
  3. Keeping split text readable for screen readers
  4. Count-up stats and animated numbers
  5. Exercise: an animated headline and stats band
05Adding Lottie4 lessons

An animated icon set and a scroll-controlled hero illustration.

  1. Lottie vs GSAP: designed illustration vs code-driven movement
  2. Elementor's Lottie widget and where to find files
  3. Controlling a Lottie animation with ScrollTrigger
  4. File size, dotLottie and keeping it light
06Performance and accessibility5 lessons

Animation that passes Core Web Vitals and does not exclude anyone.

  1. Transforms and opacity only: avoiding layout shift
  2. Measuring with PageSpeed Insights before and after
  3. Respecting reduced motion with gsap.matchMedia
  4. Never hiding content you cannot guarantee to show
  5. Loading scripts only on the pages that need them
07Capstone: an animated landing page4 lessons

A portfolio piece you can show clients, reviewed by Shaz.

  1. Planning motion: one idea per section
  2. Build: hero, features, pinned steps, stats, footer call to action
  3. Polish: timing, easing and mobile checks
  4. Submit for a personal review and certificate

Lesson lengths are estimates and may change slightly when the course is recorded. Every lesson is re-recorded or annotated when the tools change, free for everyone with an active course.

Everything included

  • 37 video lessons, about six hours, watch at your own pace
  • 2 hours of 1:1 live tutoring with Shaz (use within 12 months)
  • 12 months' access, with updates when Elementor or GSAP change
  • Snippet library: 15 copy-paste animations for the Elementor HTML widget
  • Exercise files: starter pages for every module
  • Capstone review with personal feedback and a certificate of completion
  • Questions answered under any lesson within one working day
  • 30-day money-back guarantee

Before you start

WordPress, Elementor (Free is enough) and the confidence of our Beginner course. No JavaScript experience: we start from zero.

Your tutor: Shaz

I'm Shaz, a UK web designer with over 20 years of experience. Through my agency, E-web UK, I build and look after WordPress sites for businesses every week. I'll answer your questions, review your work, and your included one-to-one tutoring is with me directly.

More about Shaz

Be first in when it opens

This course is being recorded now. Waitlist members hear first and get an early-bird price.

Snippet pack

£39one-off payment

  • 15 copy-paste GSAP snippets
  • Setup notes for each one
  • Respects reduced motion out of the box
  • Free updates
Enquire about the snippets

Course

£429£858launch sale price, 12 months' access

  • All 7 modules, 37 lessons
  • Snippet pack included
  • 2 hours of 1:1 tutoring
  • Capstone review and certificate
  • 30-day money-back guarantee

Course + plugin

£469at launch, one-off payment

  • Everything in the course
  • B2C Motion plugin: pick GSAP presets from the Elementor panel, no code
  • Plugin licence for unlimited client sites, 1 year of updates

Prices include any VAT due. Refunds within 30 days, less any 1:1 time used at £60 an hour. New to Elementor? Start with Elementor Beginner.

Rather have it done for you?

Shaz adds premium scroll animation to existing Elementor sites, from £300 per page, tuned for speed and accessibility. Or book a 1:1 "fix my animation" session from £35.

Ask about done-for-you Book a 1:1 lesson

Questions about this course

Anything else? Send me a message or book a 30-minute taster lesson.

Do I need Elementor Pro?

No. Everything in the course works on Elementor Free. Pro's Custom Code feature is handy for loading scripts, and we show a free alternative.

Do I need to know JavaScript?

No. We start from your first line and stay inside the few bits of GSAP you will use again and again. If you can copy, paste and change a number, you can follow along.

Is GSAP really free?

Yes. GSAP and all its plugins, including ScrollTrigger and SplitText, are free to use on your own and client websites. Module 1 explains the licence terms in plain English.

Will animation slow my site down?

It should not, done properly. Module 6 covers loading scripts only where needed, animating only transforms and opacity, and measuring before and after.

What about visitors who get motion sickness?

Every technique in the course respects the reduced-motion setting in the visitor's operating system, and the snippets do the same out of the box.

How long do I have access?

12 months from purchase, including updates. Your 2 hours of 1:1 tutoring are valid for the same 12 months.

Next in the Build path

Each course builds on the one before. Take the next one when you are ready, or save with the path bundle.

See the whole Build path
BuildIntermediate Professional Websites with Elementor Pro Theme Builder, dynamic content, forms that convert and a clean client handover. £1,399 £699 · 17-20 hours BuildAdvanced Elementor for Developers and Agencies Theme Builder, dynamic listings, automated forms, WooCommerce and memberships. £1,799 £899 · 22-26 hours

Get on the list. Start first.

This course is being recorded now. Join the waitlist and you will be first to hear when it opens, at the £429 sale price (usually £858).

Join the waitlist See the Build path