Watch me recreate Elementors dumb new hero section in Etch using GSAP

See this project in action: https://codepen.io/welbinator/pen/Ggqvyxe

🔗 Links & Resources Mentioned:
Get Etch: https://etchwp.com?aff=43a07932 (affiliate link)
Automatic CSS (ACSS): https://automaticcss.com/ref/2441/ (affiliate link)

Want to learn how to leverage AI to grow your agency?
https://community.modernbuilderssociety.com/checkout/ai-powered-wordpress-agency?affiliate_code=0b8393 (affiliate link)

Looking for web development or branding services? https://apexbranding.design

🔴 Subscribe for more real-world web development builds and reviews!

In this video I recreate the hero section from Elementor's recently rebranded homepage as a fun "hate coding" exercise, inspired by its fancy GSAP animations and scroll-jacking behavior.

The original features a background video (I used a static image instead) that shrinks down on scroll until it reaches a final size, after which normal page scrolling resumes; text and CTA fade out/disappear during the shrink, with some minor background image transitions I didn't replicate.

I show the live result on my Etch-built WordPress site: scrolling shrinks the hero smoothly (works up and down), text/CTA vanishes like the original, and it handles mobile responsively on page load (elements center properly, though resizing the window mid-view can glitch due to JS—normal for such libraries; refresh fixes it).

The process started in Replit with AI (likely Claude or similar): I used about 11 iterative prompts to build it first in React/Tailwind (big image shrink, centering, etc.), then asked the AI for a prompt to convert it to vanilla HTML/CSS/JS—it one-shotted the vanilla version in a new chat.

The code relies on GSAP core + ScrollTrigger (via CDN script tags I added directly in Etch's HTML element—no enqueue needed for this demo). I pasted the HTML structure into an Etch page, dumped the CSS into a new Style Manager sheet ("Elementor"), inserted GSAP/ScrollTrigger CDNs as HTML script tags inside the hero div, removed Replit's import lines, and it worked on the frontend (not in the builder preview).

I note it's straightforward to integrate JS libraries like GSAP into Etch this way (CDN or enqueue), contrast it with simpler libs like AOS for basic fade-ins, and emphasize that custom blocks aren't necessary anymore for most site builds—Etch handles this fine.

The video ends recapping the three-step flow (AI build → vanilla conversion → Etch paste) and highlighting how easy it is to pull off advanced scroll animations without plugins.

Видео Watch me recreate Elementors dumb new hero section in Etch using GSAP канала Worlds Worst Web Developer