Fade out page, fade in next

[Eugene Rayner]

Hello.

 

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
        //e.preventDefault();
        TweenMax.to(homepage, 3,{opacity:0});
        TweenMax.from(aboutpage, 3,{opacity:0})
  });

});

 

any help greatly appreciated.

 

Thanks!

[PointC]

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.

[Eugene Rayner]

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?

 

Cheers

 

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

[PointC]

I'm confused. I'm seeing an anchor in your demo to navigate to a new page, but you mentioned Ajax. I'm not seeing an Ajax request in your code.  Are you trying navigate to a new page or make an Ajax request? 

[Eugene Rayner]

Sorry for the confusion.

 

Please ignore the ajax comment.

I just want my button to take user to the next page

and I want it to fade in and fade out

 

Cheers

[PointC]

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.

[Eugene Rayner]

Okay thanks a lot. Ill have a look around. Once I get something working ill come back with my fadein/fadeout question.

 

Have a nice day!