animateIn() animateOut() example

[rizzy3000 3 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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

[rizzy3000 3 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

You're welcome. Glad it was helpful.