Gsap Page transition with preloader logo issues

[SquareMuse]

Subject: Seeking Help for Preloader Integration in GSAP Page Transitions

 

Dear GSAP and Coding Wizards,

 

I find myself facing a significant challenge while attempting to incorporate a preloader into the GSAP page transitions script that I've been crafting. Despite my best efforts, I've hit a roadblock and now I'm reaching out to you for your magical expertise to help me achieve my goal! 🥳

 

My objective is to seamlessly fade in and out / start and end > the preloader logo alongside the initiation and conclusion of the GSAP page transitions. I hope my request is clear and resonates with you.

 

 

Warmest regards,

René

 

See the Pen LYMEEZB by Ren-Winther-the-styleful (@Ren-Winther-the-styleful) on CodePen

[Rodrigo]

Hi @SquareMuse and welcome to the GreenSock forums!

 

I had a few issues following your code so instead of trying to make it work with your code I created a simple demo instead:

See the Pen jOXEYRm by GreenSock (@GreenSock) on CodePen

 

Basically the example has both timelines paused and resuming the preloader one after the content is ready (in this case I'm using a dummy ajax call, but in real life you should have something else that indicates that the content is ready). When the preolader timeline is complete it'll resume the slide animation.

 

Hopefully this helps.

Happy Tweening!

[SquareMuse]

Thank you Rodrigo I will try and make it work. 😁