Simple fade out, fade in.

[SLSCoder 7 Likes (Newbie)]

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

[ZachSaucier 7,127 Likes (Superhero)]

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

[Carl 11,097 Likes (Superhero)]

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.

[SLSCoder 7 Likes (Newbie)]

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.

[PointC 14,170 Likes (Superhero)]

You might want to take a look at barba.js
https://barba.js.org/

 

@Ihatetomatoes has a whole bunch of videos about it.

 

[SLSCoder 7 Likes (Newbie)]

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.
 

[mikel 4,774 Likes (Superhero)]

Hey @SLSCoder,

 

Could this be an option?

 

See the Pen wvzMMRz?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy fading ...

Mikel

 

 

[SLSCoder 7 Likes (Newbie)]

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