Jump to content


Simple fade out, fade in.

Recommended Posts

I'm trying to do a simple fade out, fade in.

I fade out, change the html then fade back in.

I tried using gsap instead of timeline too.

It simply doesn't work.

What am I missing?

Click the word Fade to run it.

See the Pen mdrJjXv?editors=1111 by SLSCoder (@SLSCoder) on CodePen

Link to comment
Share on other sites

Hey SLSCoder. 


I highly recommend that you read the most common GSAP mistakes and tips to animate efficiently as they both cover this issue and others that I think you'd learn a lot from. 


Some notes:

  • In situations like these you want to create the animation ahead of time and use control methods to manipulate it.
  • You should avoid putting JS functions and CSS inline.
  • I would use semantic HTML (using a real <button element> and not using a <br> for spacing). 
  • You should use the position parameter instead of delays for tweens in timelines.
  • It's generally cleaner to animate properties directly instead of having to worry about changing the class names.
  • Opacity goes between 0 and 1, not 0 and 100.

Here's how I'd set it up:

See the Pen qBadQXp by GreenSock (@GreenSock) on CodePen

  • Like 6
Link to comment
Share on other sites

nice tips. using set() with innerText is cool. I never thought of that.

I always reach for TextPlugin but I'll save that for when the text value needs to animate between states.

  • Like 2
Link to comment
Share on other sites

Thanks. Please realize this code was just for a TEST.

The app completely rewrites an entire html page between fades.

I'm trying to create a fade page transition.

Set and innerText isn't going to work here.

Link to comment
Share on other sites

Thanks. I've looked at this. I realize I still wasn't very clear.

It appears that barba.js involves ajax and change of actual  page urls.

All my html is javascript generated on the SAME page.


Basically, a function fills a div tag with the page content.
When I run the function again, all the content changes.
I need to make the div contents 'transition' from the old content to the new content.

I have a div: <div id='divContent'></div>
I have another div <div id='divTransition'><div>

Both are css position:absolute so they can move.

I have a <div id='divBackground'></div> which is the 'anchor' and potential image background of the page.

The first transition is to be a fade. Basically, the html in divContent fades out, then the html changes and the div fades back in.
I feared that the time it takes to fill the content may be noticeable so if needed I could fill divTransition and then do the fade between the 2 divs.
I thought this would be easy. So far, I can't do it.

The second transition would be the old content slowly moves to the right & off screen while the new content moves right and onto the screen.
I haven't tried that one yet.

Link to comment
Share on other sites

Wow! Great code.

If I see this right you're not 'fading' anything. You're actually COVERING it with gray. Yes?
So, you cover container, make all the motiv divs height 0, then make the motiv[0] height = height * 3 (which I don't understand) and then fade the cover.

Then you push the first motiv to the end making the second one the first and do it all again.


It seems a bit much but I might be able to make a variation on it work. I'll try.

  • Like 1
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   1 member