GSAP FLIP GRID CONTAINER TO FLEXBOX ON BUTTON CLICK - Elementor Wordpress Tutorial Flex Container

Although this is a bit experimental I think I have found a way to make it usable. Let me know if you're going to use it in your projects

Timestamps:

00:00 Intro
00:52 Demo
13:13 Outro

Thank you for watching!

🟠 SUBSCRIBE TO THE NEWSLETTER:

🟠 TRY ELEMENTOR

🟠 TRY HOSTINGER

🟠 WORK WITH ME

🟠 YOU CAN FIND ME HERE TOO

TWITTER - @AndreeaEgli

🟠 FOR BUSINESS ENQUIRIES

Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)

#elementortutorial #elementorpagebuilder #elementortipsandtricks

[mo-jasim]

Keep it up, literally you taught me as the best teacher ever❤

[pragparikh]

Your code seems mostly fine, but there are a couple of improvements you could make:

Script Tag Closure: There's a typo in the first line where you're including GSAP library. You've missed the closing t in </script>.

jQuery Dependency: Make sure jQuery is loaded before using it. In your case, it's loaded after GSAP and Flip, which may cause issues if your jQuery code runs before jQuery is loaded.

Event Binding: It's better to ensure your DOM is fully loaded before binding events. You can achieve this by wrapping your event binding code within $(document).ready() or $(function(){}).

[zackun]

Please keep posting cool content like this

[Developer_meraj]

Hi andrea egli your videos are simply awesome ❤ i love them a lot. With your inspiration i tried to use gsap with wordpress elementor but in console it shows some errors like id not found or class not found, I'm a frontend dev mostly i use VS CODE
can you please give a solution for this

[hsdesign]

try to give the grid container and also the inner container an additional class .transition css: .transition{transition: none; } this also helps with the "pin: true" problems in elementor.

[cybcov]

hii could you please make a tutorial on custom css dropdown navigation menu? like a bouncy animation or something cool bc the default WordPress menu is uncustomizable. loveee ur vids

[peteharrison]

Great video Andrea, I'm still working through it. At 3:28ish you mention how these images came about, the transcript says M journey, but I cannot find a reference to that. Where did the come from?

[KEVIN-plv]

the problem is not in your code, if you slow down the video playback speed and watch the animation you will find that the grid which is you tag it as a (section) is jumping, to correct that make a FLEXBOX and put the grid inside it and remove the (SECTION TAG) of the grid and set it to default, elementor using kind of codes for the grid to make it light in loading and it's making it not compatible with alot of things and that's why it is still in BETA , and change the{ EASE FUNCTION TO EXPO INSTEAD OF POWER AND MAKE THE DURATION TO 0.8 } it will work good,
OMG i thought that i deleted the first comment before you see it😰 but i just saw the notification that you even replied back too 😂

[fatjay]

Do you know a way to make the elementor loop grid as a stager animation on loading .. ?

[peteharrison]

I don't know if you fixed the code, but I do not get the jumping at the endof the animation. I'm in Chrome on a windows pc

[ferrywap]

Please i have a request. Been trying to fix something on the Tesla website. There’s a section with two buttons. They look the same size on a computer, but not on mobile or tablet (using elementor). On the tesla website mobile view, the buttons seems to cover the whole container (or maybe i'm wrong). Tried using padding to make it longer like it is on the tesla website on mobile view, but not sure if that’s the right approach
Also, there’s a problem with Elementor. When two buttons have the same padding but one has more text, they don’t look the same. Need to use custom CSS to fix it. Can you make a video about this? Want the buttons to look like they do on mobile (responsive). Been trying to fix this for months. Would be extremely glad if you could make a video about it, I just can't replicate the button design like it is on the tesla website (the section with 2 buttons). Thank you for all you do

[daveden]

Sadly, I've decided to abandon the Elementor Grid feature. It causes a lot of lag in my editor.

I'd rather just write the grid css myself

[bmax]

Yavrum sen bence bricks e geç
Elementor falan hikâye