Web Animation using JavaScript: Develop & Design (Develop and Design)

                    //  When    this    outward animation   is  complete,   begin   the inward  animation

                    complete:   function()  {

                                //  Proceed with    the inward  animation

                                $(“div”)

                                            .html(message)

                                            .blast({    delimiter:  “word”  })

                                                        .css(“opacity”, 0)

                                                        .velocity({ opacity:    1   },  {   stagger:    50  });

                    }

        }

);
This begins by calling the Velocity UI pack "transition.fadeOut" effect on the
text parts generated by the div having previously been Blasted. As with the inward
direction, the stagger option successively offsets the individual text part animations in
the outward direction. New to this call is the use of Velocity UI pack’s backwards
option, which pairs with stagger to reverse the target element set’s order so that the last
element (the last word in the sentence) animates out of view before the second-to-last
element does, and that element animates out of view before the third-to-last element does,
and so on. When this outward animation sequence is complete, the inward animation is
called from within the complete callback.

Using the backwards option for text animation provides two benefits. First, it helps
mirror (create the inverse of) the inward animation, which consists of the first word
animating into view before the second word does, and so on. Second, when the backward
animation is immediately followed by the forward animation, the net result is an elegant
chaining effect in which the last word in the backward direction and the first word in the
forward direction occur back-to-back. This works to tie the two animation sequences
together into what looks like one conjoined animation instead of two separate animations
crudely glued together.

Transitioning individual text parts

Movie title sequences are well known for their inventive typographic motion design. The
technique underlying many of these effects is singling out individual text elements for
animation. That’s what this section covers.

    Note

For typographic animation   inspiration,    search  YouTube for movie   title

sequences   and take    detailed    notes!  As  long    as  you keep    the principles  of

motion  design  theory  in  mind,   you should  feel    encouraged  to  explore textual

animation   design  in  your    interface.

To achieve fine-grained control over the elements that Blast generates, simply use
CSS’s nth-child selector or jQuery’s eq() function. These functions behave similarly
to one another, in that they allow for the selection of an element within a set based on that
element’s index. If you passed an integer value of 3 into these functions (or 2 in the case
of jQuery as you will see), they would target the third element (that is, third word) in the
full element set (that is, multiword sentence):