Jump to content
Search Community

Preloader animation to loaded content not smooth

Chris Prieto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello again :D

 

I have made the pen in question based on this ihatetomatoes article, which transitions from preloader to loaded content smoothly, 10/10 times (https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/)

 

Somewhere along the process of dumbing down my codepen, the preloader animation transitioning from preloader to loaded content (once preloader hits 100%) is no longer smooth and kind of stutters/pauses on the way out. It will actually be smooth 2/10 but most of the time it paused slightly.  

 

I was hoping one of you smarter folks could spot something wrong or missing in my attempts. It also happens in a text based one that is more like Petr's example (https://codepen.io/ionz149/full/mYqxPE) so I am fairly certain I am doing something wrong.

 

**The issue is noticeable when pen is fullscreen, harder to see in the embedded smaller pen

 

 

See the Pen BeYOrr by ionz149 (@ionz149) on CodePen

Link to comment
Share on other sites

I really don't recommend doing className tweens (and remember, a set() is just a zero-duration tween) because it literally must rip through every...single CSS property, compare the starting and ending values (before and after adding/removing the class) and find the differences and then animate them accordingly. It's just a lot of work. 

 

You could pre-render that stuff (do the work up front) by forcing the playhead on that timeline to the end and then back to the beginning, before you ever actually need to run it. Here's a fork that shows how: 

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

 

Oh, and just so you know, there's no need to wrap your targets in "$()" (jQuery) - you can just pass in the selector text and GSAP will use document.querySelectorAll() by default. 

 

Does that help at all? 

  • Like 3
Link to comment
Share on other sites

Thanks @GreenSock! My apologies for delay in reply, I got pulled down the rabbit hole trying to answer my own questions unsuccessfully.

I think I am picking up what you are putting down (to an extent). Now that you mention it I recall reading elsewhere around here about using the className in tweens so thank you for the reminder. It seems I also need to get a better grip on the timeline.

 

That said I was able to copy what you did in my text based preloader pen and it worked. But it doesn't seem to help out with the circle svg preloader as it still pauses on the out animation (https://codepen.io/ionz149/full/BeYOrr). If I comment out the className tweens it is smooth however everything relying on those classes stops working (expected)

 

So I am now wondering what is the preferred way to add/remove classes within a timeline like I am trying to do? I tried looking this up but am a bit more confused than when I started :)

Link to comment
Share on other sites

I don't notice any glitches, but maybe my machine is too fast. 

 

As for changing classes, you could use a callback to do something like that (in the callback, you'd apply the class yourself using vanilla javascript or jQuery or whatever). It'd be super simple to do if you only need to go forward, but if you need it to work in reverse as well, it's just a bit more tricky. Another option is to create your own plugin to do this sort of thing (a little more hassle up front, but then you just load it and you can reuse it as much as you want across all your animations). 

  • Like 1
Link to comment
Share on other sites

I don't have the chops to make my own plugin unfortunately but it's good to know that is an option.

I realize the post is a bit dated, but something like this (generally speaking)?

 

 

I will begin to dig into callbacks for the time being, Thanks again!

 

Link to comment
Share on other sites

After spending a bit of time crashing and burning with the callbacks and such. I added another section to my example and the preloader stopped glitching. Slowly backing away from this one but just wanted to follow up in the case I am not the only one dealing with this small but annoying hardly existent issue :)

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...