Jump to content
Search Community

Fade out page, fade in next

Eugene Rayner 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



Trying to figure out a way to use fade out and fade in when user clicks on navigation.

Essentially, user click on navigation, the current page fades out, and the clicked navigation page fades in.


$(document).ready(function () {
    //navigation button that appears on the home page
    var aboutpageButton = $('#aboutpageButton');
  	//homepage id
    var homepage = $('#homepage');
  	//aboutpage id
    var aboutpage = $('#aboutpage');

    aboutpageButton.addEventListener("click", function() {
        //add code for page fadeout
        TweenMax.to(homepage, 3,{opacity:0});
        TweenMax.from(aboutpage, 3,{opacity:0})



any help greatly appreciated.



Link to comment
Share on other sites

Hi @erayner_45092 :)


Are you saying the code you posted isn't working or you're just looking for the best way to handle the animation? If you could put that into a CodePen, we could get you better answers. 

If you're just looking to fade out one section while another fades in, you can do that many ways. I made this demo as an answer to another forum question, but the mechanics would be the same. Maybe it can help you.

See the Pen xqqyaE by PointC (@PointC) on CodePen


Happy tweening.


  • Like 1
Link to comment
Share on other sites

Code isn't working and also looking for a way to do this.

I have tried to create a pen but unfortunately I think a Pen wont work for this..


I am trying to get my next 'about.html' page to fade in once navigation has been clicked on 'index.html'

It might not be as simple as I was thinking. Might be an Ajax thing?




See the Pen EmdWEG by erayner (@erayner) on CodePen

Link to comment
Share on other sites

I see. That's really more of a coding issue unrelated to GSAP and we need to keep focused on the animation platform here. Other members may have some time to talk you through it, but I think Googling might be a better way to go here.


Just my two cents worth, I think Ajax would be better for this since many of your page elements would undoubtedly be the same. For example, to me it would look odd if a navigation bar were to fade out and then fade back in and look exactly the same. It's probably just some content that would change and Ajax is great for that type of thing.


Happy tweening.


  • Like 2
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...