GSAP PRELOADER WITH COUNTER & IMAGE - Elementor Wordpress Tutorial Flex Container

[@amanahmed1357]

I am glad I have found you in the late 2023. I have learned a lot of things from you. There's no one I have found who is teaching such things on the platform. my WordPress skills went too high by watching your videos. Thank you

[@christempo4]

Awesome tutorial, thank you for sharing it 😊. One thing I would add to the gsap.to(".layout", { }) part is a zIndex:0 beside the opacity of 0. This would prevent the preloader layout from sitting on top of other DOM elements with lower Z-index that could lead to links not being able to be clicked for example. Otherwise, really cool pre-loader, keep up the hard work Andrea👏

[@framer-web-love]

❤ hello andrea egli you love my deaf gsap js code beautiful learing thanks 😊😊😊

[@jubin9730]

Hi Andrea could you please do a tutorial on how to have a customizable scroll snapping effect with easing that snaps to containers

[@andreaegli]

Hey! Can you provide me with a link to an example?

[@fabiannavarro-h1j]

Hi Andrea, I love this, however, when implementing it and browsing the page in the same session, returning to the home page loads the preloader again. Is there a way to only show it in the first session?

[@dovenobertinca4029]

Hi, first thanks for this amazing feature. But I have a question if thats will be ok, I have already a builded website and when I apply this all the buttons will be disable after that, I'm not able to click for the nexts steps. I have already a preloader and what you think that can be a problem. Thank you in advance!!

[@andreaegli]

You are very welcome! Hmm, can't see why this code would disable buttons. What other preloader do you have, is it custom coded, do you have that running while this one is running too? There could be so many things causing this issue...

[@T981978]

@@andreaegli Hello andrea, i have the same issue, inspecting the page i can see that problem is with the div with the class: layout, the opacity go to 0 but the z-index is 10000 so none of the element of the page is clickable, we can scroll the page but not interact with it, how can we find a solutions? thanks in advance and thank you for all the tutorial that you make

[@T981978]

@dovenobertinca4029 @andreaegli after trying a bit i found out that by adding display:"none", on gsap.to(".layout", { display:"none", opacity: 0, ease: "power3.inOut", duration: 1, delay: 4, }); now the page is working

[@shir2498]

thank you! this is great. is there a way to make it faster? i tried playing around with the code but nothing worked

[@Asad-Main]

Thanks, It's beautiful ! Can we change the image ?

[@Asad-Main]

8:00 Found it. 😉

[@andreaegli]

🤓

[@AllenLu]

Hey andrea, could you investigate gsap smooth scroll and implement them into wordpress or elementor? because I believe gsap one is better than Lenis in my humble opinion.

[@andreaegli]

Hmm, I think I did a while ago and that's why I settled on Lenis but let me see what I can do. Why do you think Gsap is better than lenis? Lenis is made specifically for smooth scrolling ;)

[@AllenLu]

@@andreaegli Thank you Andrea! Lenis has a bug that on same page anchor link will cause some weird animation (maybe its wordpress or elementor conflicted with it) I browsed many webs with gsap smooth scroll, it's so smooth and amazing.

[@andreaegli]

@@AllenLu right! could be elementor or WP. maybe the code needs a bit of re-work. i haven't had an issues with the one I use tho. Were those other websites built with WP & El?

[@AllenLu]

@@andreaegli yes the problem i have were WP and EL, the problem is across every web if I put lenis.

[@franktielemans6624]

Is this counter real? I mean, does it actually show how much of the webpage has already been loaded?

[@andreaegli]

It is a simulated counter that increments based on random intervals until it reaches 100%.

[@AS_DESIGNSTUDIO]

can you make a tutorial on how to create a functional custom contact form in elementor?

[@andreaegli]

Not sure I understand what you mean by that? Fully coded or…?

[@AS_DESIGNSTUDIO]

@@andreaegli i mean a Contact form in elementor where i can costumize the style for example of the input box, border, background... not fully coded. i tried Contact form 7 but its not so free to costum

[@saving-strategies]

Subhan is here

[@saving-strategies]

Hi Ma'm