The Setup

To keep the matrimony magic train going, we are going to create variation of the slideshow from my previous post Build a Full Page AngularJS Slideshow Plus Magic Tricks!. Think of it as the slow jam version of the wedding slideshow with crazy simple animation sequencing using Greensock TimelineLite. Obligatory picture of Barry White for my friend Ari Lerner of ng-newsletter fame.

Check out the original post and demo, grab the code, and let us get this wedding party started!

A Brave New Slideshow

In the previous post, we were only animating on the fullscreen images and so we defined our ng-repeat and ng-if directives directly on the img tag. We were also able to attach our animations directly to the images as CSS classes. In this example, we are going to animate multiple items in sequence, so we need to change the HTML structure to have a containing div and put all of our animated elements inside of that.

<div class="slide slide-animation" 
    ng-if="isCurrentSlideIndex($index)" 
    ng-show="loaded" ng-repeat="slide in slides">
    <!-- SEQUENCED ITEMS GO HERE -->
</div>

In the code above, we have defined the container div and, most importantly, defined our animation as slide-animation. This is where we will sequence our child animations. And now that we have exposed the individual slide object via ng-repeat, we are going to layout the background image and three very artsy text containers. I will get into what I used to style them in a moment but just take my word for it… they are pretty!

<div class="slide slide-animation" 
    ng-if="isCurrentSlideIndex($index)" 
    ng-show="loaded" ng-repeat="slide in slides">
    <img class="bg" bg-image ng-src="{{slide.src}}">

<div class="xlarge">{{slide.title}}</div>
<div class="title">{{slide.title}}</div>
<div class="subtitle">{{slide.subtitle}}</div>
</div>

It isn’t a secret at all that I am a fan of TweenMax from Greensock; so when I realized that I could use TimelineLite as a container to chain TweenMax animations, it was champagne for everyone!

You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time.

In our slide-animation we are creating an instance of TimelineLite and assigning it to a tl variable. Then we are chaining four animations to our TimelineLite instance and calling onComplete:done on the last one to give control back to our application. Because we want to animate from a specific starting point and end at another point, we are using TweenMax.fromTo to accomplish this effect. The anatomy of creating a fromTo tween is as follows: fromTo(THE_ELEMENT_TO_ANIMATE, DURATION, STARTING_PROPERTIES, ENDING_PROPERTIES).

In the case of the background image, we just want to fade it in, so fromTo(element.find(‘.bg’), 1, { alpha: 0}, {alpha: 1}) does the trick. With our text elements, we are creating a bit more of an advanced tween – but not by much. We are adding in a left property, starting it at the middle of the screen, ending at 0, and setting the ease equation to Ease.easeInOut.

app.animation('.slide-animation', function ($window) {
    return {
        enter: function (element, done) {
            var startPoint = $window.innerWidth * 0.5,
                tl = new TimelineLite();

<pre><code>        tl.fromTo(element.find('.bg'), 1, { alpha: 0}, {alpha: 1})
            .fromTo(element.find('.xlarge'), 1, 
                { left: startPoint, alpha: 0}, 
                {left: 50, alpha: 1, ease: Ease.easeInOut})
            .fromTo(element.find('.title'), 3, 
                { left: startPoint, alpha: 0}, 
                {left: 50, alpha: 1, ease: Ease.easeInOut})
            .fromTo(element.find('.subtitle'), 3, 
                { left: startPoint, alpha: 0}, 
                {left: 50, alpha: 1, ease: Ease.easeInOut, onComplete: done});

    },

    leave: function (element, done) {
        var tl = new TimelineLite();

        tl.to(element, 1, {alpha: 0, onComplete: done});
    }
};
</code></pre>
});

And to not distract from the next slide’s animation, we are going to fade the entire slide out gracefully by calling tl.to(element, 1, {alpha: 0, onComplete: done}) on the leave method. Technically, I do not need TimelineLite on the leave method but it is there if you want to extend it.

And that is what I mean by “crazy simple sequencing”. I had to break the code onto multiple lines for readability in the post but we are literally getting the job done in four lines of code! The learning curve for TimelineLite was practically zero since I was already familiar with TweenMax.

Pretty Pretty Google Fonts

One thing that pleasantly surprised me as I was preparing this example is how easy it is to integrate Google Fonts.

Step One: Include the Stylesheet

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">

Step Two: Define Your Styles

.xlarge {
    position: absolute;
    bottom: 50px;
    font-family: 'Oswald', serif;
    font-size: 248px;
    color: #FFF; /* Fallback for older browsers */
    color: rgba(255, 255, 255, 0.3);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.title {
    position: absolute;
    bottom: 200px;
    font-family: 'Tangerine', serif;
    font-size: 196px;
    color: #FFF;
    width: 100%;
}

.subtitle {
    position: absolute;
    bottom: 100px;
    font-family: 'Tangerine', serif;
    font-size: 144px;
    color: #FFF;
    width: 100%;
}

Step Three: Everybody Dance!

Review

Thanks for allowing me to share how to sequence animations in this post. It was a lot of fun putting this all together! Just to recap, TweenMax is a crazy powerful animation library and TimelineLite is a crazy powerful container to chain those animations together. And! Google Fonts is pretty slick too!

Also, I make no claims to be a CSS expert so if you have any suggestions on how to make it better, feel free to hit me up on the comments below or even submit a pull request on the repo. And if you have a particular topic you want me to dig into please let me know in the comments as well. #highFive

Resources

Remastered Animation in AngularJS 1.2

Getting Started with the JavaScript Version of the GreenSock Animation Platform (GSAP)