Jump to content
Search Community

Animation delay not working on Safari

james12345 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi guys,

I have this splittext animation which starts after a 'splash screen' from a timeline. It seems to be working in Chrome, Firefox & Edge, just in safari it seems the splittext animation happens straight away. Any help or a point in the right direction would be great.

Cheers
 

See the Pen abGPKQv by jamesstudiothis (@jamesstudiothis) on CodePen

Link to comment
Share on other sites

Hi,

Thanks for the reply! 
Unfortunately this isn't using document.fonts.ready.then for custom font random line breaks as suggested by Zach here:

I don't know if this is the culprit in Safari but I assume it's possibly not? 

If anyone else could point me in the right direction of what needs tweaking within my current structure that'd be great as I need to keep this modular format. 

Link to comment
Share on other sites

  • Solution

This isn't really a GSAP-related question, but it looks to me like simply a difference in how the browser is handling the "load" event. Safari probably doesn't consider the window to be loaded until the fonts are done loading, thus when you addEventListener("load"...), Safari never ends up calling that at all because things are already done loading at that point. Add a console.log() inside your load handler...you'll see that it fires in other browsers but not Safari. 

 

So in other browsers, you're disabling your ScrollTriggers and pausing the reveal tweens, waiting until after your loading animation finishes to start firing those off, but in Safari you're never disabling or pausing those. I'm a bit confused as to why you're disabling/pausing those in a window "load" event in the first place, and why you're creating a "delay" Array and pushing the animations into it...but never referencing that anywhere. 🤷‍♂️

 

Anyway, I hope that clears things up. 

  • Like 2
Link to comment
Share on other sites

Yep, this totally makes sense & thanks for the time & clarification. 

What I wanted was for them to only really be disabled / paused / delayed when the 'splash screen' happened on first page load (using ajax throughout the rest of the site—killing off the triggers and reinitialising). What I have done is removed the disabling / pause from the "load" event, so they're always disabled when initialised and then just re-triggered at another point during the ajax load.

This seems to be working great now (although unsure if it's the most logical 🤷‍♂️), thanks for the help & point in the right direction! Really appreciate it!

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