Jump to content
GreenSock

bootstrap007

How to animate out each elements before moving to the next page

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

Can anyone give me some reference or code for how to animate out each elements jquery function or only using gsap before moving to the next link/page?

 

I have created a HTML page with few elements like logo, one pic and one introduction paragraph. All these three elements animate and appear when the page loads and after this, when user click the next page I would like to have an effect like all these three elements animates out (reverse animation) and then moves to the next page.  Any help would be much appreciated.

 

I have created a demo below:

 

See the Pen eYOawXe by bootstrap007 (@bootstrap007) on CodePen

Link to comment
Share on other sites

Hey bootstrap and welcome to the GreenSock forums.

 

As mikel pointed out, you can make use of an event listener to do this. If you want to reverse your timeline and then go to the next page, you should make use of the onReverseComplete callback that's built into GSAP:

 

See the Pen zYOVrmb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

P.S. Why not use the <nav> element for your navigation? It'd probably also make sense to put your logo and navigation into a <header> element. Maybe even get crazy and put your content in an <article>! Semantic HTML is a good thing :) 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

16 hours ago, mikel said:

Hey @bootstrap007,

 

Welcome to the GreenSock Forum.

 

Try for example this code

 

 

 

 

Happy tweening ...

Mikel

 


 Thanks Mikel!  :)

 

Link to comment
Share on other sites

14 hours ago, ZachSaucier said:

Hey bootstrap and welcome to the GreenSock forums.

 

As mikel pointed out, you can make use of an event listener to do this. If you want to reverse your timeline and then go to the next page, you should make use of the onReverseComplete callback that's built into GSAP:

 

 

 

 

P.S. Why not use the <nav> element for your navigation? It'd probably also make sense to put your logo and navigation into a <header> element. Maybe even get crazy and put your content in an <article>! Semantic HTML is a good thing :) 

This is exactly what i am looking for. Thanks a ton!  ?
Regarding your question - Actually I had posted this same question on Stackoverflow without any demo link and ppl started asking for a working demo.  Then I made this HTML in a hurry and this is only for a demo purpose.  :)

Thanks! ZachSaucier

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