GSAP ScrollTrigger Elementor: Showcase Section

✅ Save time and import template: lifeonablock.c...
✅ Code and images: lifeonablock.c...
Do you want to know how I built this GSAP Scrolltriggered Showcase section in Elementor?
Well in this video I’ll show you how I made this from scratch, so you STEAL this for your next web design project. We only need to use a few lines of code to achieve this.
Now, what's really cool about this section is that it’s actually a part of a full Elementor Website template packed with Scrolltrigger GSAP animations, as you can see.
It’s perfect for anyone who just wants to skip the design headache and save hours of work.
Take a look at this section for example. Everything you see was made without any external plugins, just Elementor. I’ll leave a link in the description if you want to explore the live demo yourself.
BUT for now, let’s focus on this showcase section at the top .
So, let’s jump into the Elementor editor and start. I’ll delete the section so we can recreate it together. First step, drag in a container.
Other Links:
Import section: lifeonablock.c...
Get Elementor Pro: lifeonablock.c...
Screen recorder software: lifeonablock.c...

[@franktielemans6624]

Amazing content. I use to do this stuff with motion-page.

[@PhysioContent]

you talked about 2 colours for the text. how can you change the colour? Because i bought your template and wanne customize it ;-)

[@nicopalmkvist]

Yes, that's right. I just made this short video for you, and the code you need is at the bottom.
It’s pretty easy:
www.loom.com/share/20e9d99ed9c14305a1c107bcce85d4cc?sid=df3cb6bc-8838-4224-9b33-11a6b5a4e63c

[@magunessmatriples8305]

Hello Nicolai! Your channel is one of the best things I have discovered this year. I follow you! :) Do you think is possible to extend and add more rows?

[@nicopalmkvist]

Thank you for your comment, I appreciate it!
Regarding your question, I believe you can add another row and just give the images the same CSS class.
If you need more than that, it would require a code change, as you’d have to adjust when the ScrollTrigger animation should start.

[@JohnXionidis]

This channel is a gem! Keep up the great work Nicolai!

[@nicopalmkvist]

I appreciate it, John! Thanks

[@WPAcademyPK]

Amazing Stuff, keep it up!

[@nicopalmkvist]

Thank you, mate!

[@beyblade90125]

Hey Nicolai,
Is that a 1 time purchase of yearly subscription please guide thank you Nicolai

[@nicopalmkvist]

Hey Beyblade. You'll get lifetime access to an Elementor template that includes all my previous projects and future updates. There's no subscription-just a one-time payment. 👨‍💻💪

[@beyblade90125]

@@nicopalmkvist thank you Nicolai👍

[@cohlsendk]

Guds gave til Elementor.. du er konge ! 🤓

[@nicopalmkvist]

;)

[@Web_Experts]

This is awesome, keep it coming bro

[@nicopalmkvist]

Thank you, mate 💌

[@techwizard1114]

I've been following you since, these are great stuffs.
Maybe I am missing something as this is not working for me

[@nicopalmkvist]

Can you tell me more about what isn't working? Is it the ScrollTrigger part that isn't functioning? Have you correctly written all the CSS classes on the right containers? That’s often where the problem lies.

[@jaywoods9205]

Great work, do you think I can use this in a clothing store website? I want to add it but not sure how to go about it,so any advice?

[@nicopalmkvist]

Thanks!
And yes, it’s designed for easy content replacement, so you can quickly adapt it to your clothing store, for example.
An installation guide is also included to assist you. Feel free to reach out at [e-mail] if you have any questions after installation.

[@shafiulbashar]

I was waiting for this

[@hamoud_gg568]

Can you make this site as a paid template that can be purchased?

[@nicopalmkvist]

I already did: lifeonablock.com/Northbound
And here if you only want the section: lifeonablock.com/showcase

[@pawnstarsindia]

hey how can we use it for webflow or framer????

[@nicopalmkvist]

No unfortunately. This is only for Elementor / Wordpress users

[@icebreakerdev]

Will this template be ok for page speed?

[@nicopalmkvist]

My entire goal with this template was to make it lightweight, and that was possible because it doesn't require any external plugins. You only need Elementor and Elementor Pro, which keeps the code minimal, making the site load faster and run smoothly. 🏆

[@millerartsaudiovisual3358]

Great, Sir!!!

[@Wares_hashimi]

Bro your nice 🎉🎉 and i have one question how can i learn gsap?

[@nicopalmkvist]

Thank you, mate. Maybe I should make a full tutorial on how to learn GSAP ?

[@Wares_hashimi]

Ok please make ❤❤❤

[@sameerpatelxyz]

Thank you so much 🤩🤩🤩

[@nicopalmkvist]

💙👩‍💻

[@zafit02]

i love this channel keep making gsap tutorials for elementor please!!

[@nicopalmkvist]

Thanks. Will do ;)

[@naylord5]

This is pure gold, thank you so much!

[@nicopalmkvist]

Thank you, mate !

[@Aadhil_Software_QA]

do we need Elementor pro to do this bro?

[@nicopalmkvist]

Yes, you need Elementor pro💙

[@amielsena3649]

@@nicopalmkvist if we buy the template we are required to subsribe for elementor pro?

[@nicopalmkvist]

@@amielsena3649 Yes, Elementor and Elementor Pro is all you'll ever need

[@krabbesalat]

Nope, with the xpro plugin there is a custom css addon, that makes this possible.

[@amielsena3649]

@@krabbesalat is xpro plugin is this gpl version of elementor pro?