Jump to content
Search Community

Tweens run before page load

wrongholt 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

So to go more in depth on my Code pen showed I had a on click event. What I didn't show I have 4 different links to 4 different pages.  I have tweens that run within the on click event function.  I wanted them to run before the page actually loaded.

 

Thanks for that demo I suppose I can use the on complete and in that function have a for loop that steps through all the links. 

Link to comment
Share on other sites

Hi,

 

It may be helpful to note the steps:

 

1.  mouseenter/leave for both boxes:  scaling the BLUE or the RED

 

2. click on one of the two boxes: animating the BLUE (scale, rotate)

 

3. If that is completed, load another page.

 

Here is the version as I would understand and implement it:

 

See the Pen jLBdzj by mikeK (@mikeK) on CodePen

 

Sorry, to check the code and to use rerun do it in "Edit on CodePen".

 

Best regards

Mikel

  • Like 1
Link to comment
Share on other sites

Hi @wrongholt,

 

I think you do not need any "onload="load()" in the HTML or a special "wrapper" function "load".

 

Use different loadURL function for your pages: loadURL01, loadURL02,  loadURL03,  loadURL04.

And of course onComplete ...

 

Do I understand your purpose? Does that help?

 

Best regards

Mikel

  • Like 1
Link to comment
Share on other sites

So to answer your comment about "onload"  I do need to run that because of I was using just JQuery than decided to switch GSAP because of obvoius reasons.

 

This is my attempt

     

  TweenMax.to(swing, 2.0, {
         ease:Power2.easeOut,
        rotationX:90,transformOrigin:"left top 10",
        zIndex:10,
        delay:2.0, 
        onComplete:newPage
     });
}
    function newPage(){
        var activeLink = $(this).find("img").attr("id");
            window.location.href = "'" + activeLink + ".html'","_self";
        
    }

 

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