Jump to content
Search Community

Gsap Page transition with preloader logo issues

SquareMuse test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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,



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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...