Jump to content
Search Community

Simple fade out, fade in.

SLSCoder test
Moderator Tag

Recommended Posts

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

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

  • 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   0 members

    • No registered users viewing this page.
×
×
  • Create New...