Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bootstrap007

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

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:

 

https://codepen.io/bootstrap007/pen/eYOawXe

Share this post


Link to post
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

Share this post


Link to post
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!  :)

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×