Jump to content
Search Community

I want my loader timeline finish atleast 3 ".to" animations before window.addEventListener('load') runs my function

artyor test
Moderator Tag

Recommended Posts

Hi guys, 

I have basic codepen where I have "loader" animation, which i want to animate out with code, once my page is loaded.

So I used window.addEventListener('load', (){
  init();
})

In case my page loads before my loader animation finished atleast 3 steps, I still want them to play out before init() runs...

I tried using onComplete on 3rd .to of my loader timeline and adding fnc() (which was wrapper for window.addEventListener), but it didn't work...I assume it's because that's not have event listeners work...

is there any way I can archive this?
 

See the Pen vYyaZYw by artyor (@artyor) on CodePen

Link to comment
Share on other sites

8 minutes ago, ZachSaucier said:

Hey artyor. Is this the sort of thing that you're trying to do?

 

 

 

You might also be interested in GSAP's keyframes functionality.

Hi Zach, 

Well, not exactly that, I don't want init(); to run after 2 full repeats, but after 3rd ".to" of timeline running 1st time,

So basically, if page has loaded & if my timeline is finished  3 ".to" out of 4 (on first run)...

I'm not sure if that's clear enough? Maybe Im using wrong words, but you're codepen is still very useful to learn how onRepeat can be used. 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Correct, I should have removed that :) 

If you removed it, I wouldn't be so happy that I figured it on my own haha (still only learning js). I think your codepen works like charm, just tested it. Thank you, I will let you know otherwise.

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