Jump to content
GreenSock

rizzy3000

animateIn() animateOut() example

Recommended Posts

Greetings, Could someone please point me in the direction of a basic animateIn() - animateOut() example using GSAP? Thanks! Renard

Link to comment
Share on other sites

Sure, the attachment below is an example that uses a few basic objects that have 

animateIn() and animateOut() methods. Each methods returns a timeline.

 

So each object looks like this:

 

var Home = {
jj : $("#jj_jj"),
john : $("#jj_john"),
james : $("#jj_james"),
photography : $("#jj_photography"),


animateIn : function(){
var tl = new TimelineLite();
tl.fromTo(this.jj, 0.5, {scale:0, autoAlpha:0}, {scale:1, autoAlpha:1, ease:Back.easeOut, immediateRender:true})
 .fromTo(this.john, 0.3, {left:-90, autoAlpha:0}, {left:0, autoAlpha:1}, "johnjames")
 .fromTo(this.james, 0.3, {left:196, autoAlpha:0}, {left:101, autoAlpha:1}, "johnjames")
 .fromTo(this.photography, 0.5, {top:-17, autoAlpha:0}, {top:0, autoAlpha:1})
return tl; 
},


animateOut : function(){
var tl = new TimelineLite();
tl.to(this.jj, 0.5, {scale:2, autoAlpha:0}, 0)
 .to([this.john, this.james, this.photography], 0.2, {autoAlpha:0}, 0) 
return tl; 
}


}

There are 3 objects in the demo and a timeline is built that literally glues all the animateIn()/Out()

results together like so:

 

 

var transition = new TimelineLite();
transition.add(Home.animateIn(), 0.5)
.add(Home.animateOut(), "+=1")
.add(Portrait.animateIn(), "-=0.2")
.add(Portrait.animateOut(), "+=1")
.add(Auto.animateIn(), "-=0.2")
.add(Auto.animateOut(), "+=1")
.add(Home.animateIn())

This give you an easy and consistent way of placing the transitions wherever you like, overlapping how you choose and you can use them multiple times as shown by the last

.add(Home.animatIn()).

 

Keep in mind this is a simple example used only to make a self-playing timeline.

 

You can take this method further by making it much more dynamic. For instance you could have a series of buttons used to navigate to and from each section. Each time a button is clicked you could create a new timeline that consists of the currentSections animateOut() method followed by the requestedSections animateIn() 

 

pseudo-code:

someElement.onclick = function() {
    var requestedSection = this.section;
    var tl = new TimelineLite();
    tl.add(currentSection.animateOut())
      .add(requestedSection.animateIn(), "-=0.5")

   currentSection = requestedSection;
}

Hopefully that gives you some ideas.

 

 

 

 

animateIn_animateOut.zip

  • Like 3
Link to comment
Share on other sites

Outstanding! Thank you very much for the detailed and quick response! This is exactly what I needed. Best, Renard

  • Like 1
Link to comment
Share on other sites

You're welcome. Glad it was helpful.

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