Structuring GSAP + WordPress + Elementor Workflow

[nessus]

Hello,

First off, I just want to say how excited I am about GSAP going completely free for everyone—thanks to Webflow’s support. The community is buzzing, and I honestly can’t wait to see what’s coming next!
 

I’m reaching out for some guidance and clarification as I prepare to dive into a new personal project that will heavily rely on GSAP animations, along with WordPress and Elementor Pro.

 

🔧 Project Setup – My Current Plan
The project will involve a variety of animations and page-level interactions. Here's a brief outline of how I plan to manage everything:

 

-----------

Layer	Purpose	Key Tools / Locations
Local Dev	Safe playground for building & testing.	Local by Flywheel → (my local Browser URL) running Hello Elementor + Hello Child Theme.
Source Code	Modular animation code & global styles.	hello-theme-child-master/src/… • js/animations/*/index.js • css/animations/*.css • js/app.js (aggregator)
Bundling	Turn scattered modules into a single, optimized payload.	Webpack (installed via npm) + custom webpack.config.js; output enqueued by PHP.
Version Control	Single source of truth & change history.	Git (repo lives in child‑theme folder) → push to GitHub main via VS Code’s Git Bash.
Deployment	Ship the latest build to production with one click.	WP Pusher (monitors main branch). After each push, click Update in WP Pusher.
Runtime (Browser)	Execute GSAP timelines inside Elementor’s markup.	GSAP CDN + your compiled app.js & animation CSS, loaded in the order you defined.

-----------

 

 

 

❓My Main Question

Is this the right approach for a GSAP-heavy WordPress project using Elementor, or would it be more practical to simply use a Code Snippet Manager plugin and embed everything there?

 

I’m aiming to be as structured and intentional as possible from the start, but if this direction is overcomplicating things, I’d rather adjust now than burn time later.

Your insight would be invaluable and honestly a huge time-saver. I deeply appreciate your time, and apologies for the long message — I just wanted to provide full context.

 

Looking forward to your response.

 

Warm regards,
George

 

 

 

 

 

 

 

 

 

[mvaneijgen]

Hi @nessus welcome to the forum!

 

Seems like a totally fine setup. I personally don't use a page builder and use Advanced custom fields - flexible fields so that I'm in full control of the HTML and CSS (which is really important when working with GSAP)

 

I've just fully migrated from Webpack to Vite.js and couldn't bee happier. Instead of my node_modules being 300mb + it is now just 60mb and instead of having 30+ packages I have just 5 where GSAP is one of them. I would also install GSAP via NPM, so you have them compiled down in your app.js instead of loading CDN. 

 

Hope it helps and happy tweening! 

[nessus]

Hi @mvaneijgen,

thanks for the quick response — really appreciated.
 

Regarding Vite.js, definitely feels like a more modern approach.
I’ll absolutely keep it in mind for a future project, though it looks like it’ll require some extra reading and a bit of manual setup on my side before diving in.
 

As for using Advanced Custom Fields – Flexible Content Fields, that’s actually something I have never explored, and it sounds like a great opportunity to learn. If you happen to have any resources(articles, YouTube, etc.) or examples showcasing this type of workflow in action, I’d love to take a look.
 

Regarding having full control of the HTML and CSS, you’re right — configuring classes and CSS within a visual builder can definitely be a bit of a pain, especially when you’re not always sure what will or won’t be allowed to run.
That said, I’m optimistic about the upcoming Elementor V4 Editor. The promise of a much cleaner code output could really open the door for more refined control.
 

I should also mention — GSAP is already installed via npm in my setup; I just forgot to reflect that in my walkthrough notes.
 

So, with all that said: based on the structure I’ve outlined so far, do you think I’m good to go with the current setup?

Thanks again for all the input — it’s been genuinely helpful.

[mvaneijgen]

5 hours ago, nessus said:

As for using Advanced Custom Fields – Flexible Content Fields, that’s actually something I have never explored, and it sounds like a great opportunity to learn. If you happen to have any resources(articles, YouTube, etc.) or examples showcasing this type of workflow in action, I’d love to take a look.

The ACF docs is what got me started https://www.advancedcustomfields.com/resources/flexible-content/

 

5 hours ago, nessus said:

That said, I’m optimistic about the upcoming Elementor V4 Editor. The promise of a much cleaner code output could really open the door for more refined control.

Cool, good luck!

 

5 hours ago, nessus said:

I should also mention — GSAP is already installed via npm in my setup; I just forgot to reflect that in my walkthrough notes.

Great!

 

5 hours ago, nessus said:

So, with all that said: based on the structure I’ve outlined so far, do you think I’m good to go with the current setup?

Sounds good to me! Small note, as I also work in Wordpress, but when animating all my animations start out on Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework or in this case platform is trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck. Just  a small tip! 

 

Good luck with your project and happy tweening! 

[nessus]

Thanks for your insights @mvaneijgen

I really appreciate it and definitely will follow that last one regarding Codepen.

 

Again, thanks for you help and time.

 

Cheers 🍻