Front-End Development Projects with Vue.js by unknow

Author:unknow
Language: eng
Format: epub
Publisher: Packt Publishing Pvt. Ltd.
Published: 2020-11-27T00:00:00+00:00

tl.to(el, {rotation: -270,duration: 1, ease: "elastic"})

.to(el, {rotation: -360})

.to(el, {

rotation: -180,

opacity: 0

});

}

For both TweenMax and TimelineMax, the syntax of the to() animation trigger method is pretty simple:

TimelineMax.to(<element>, <effect properties>, <time position>)

TweenMax.to(<element>, <effect properties>, <time position>)

Most of the effect properties have a similar syntax to CSS so they're not difficult to learn and use. In addition, we must pass a done callback received from the event emitter for events such as enter and leave to onComplete to make sure it is triggered, and the hooks will not be called synchronously. Also, note that all the event emitters also pass el, which is a pointer to the current element in transition for use.

Other than these three events, there are other events we can bind, depending on the complexity of the animations and transitions, such as afterEnter, enterCancelled, beforeLeave, afterLeave, and leaveCancelled.

Please note, it's highly recommended to add v-bind:css="false" (or :css="false") if you are using transitions with JavaScript only. This is to prevent Vue.js from detecting and applying any related CSS, therefore avoiding transition interference by accident:

<transition

@before-enter="beforeEnter"

@enter="enter"

@leave="leave"

:css="false"

>

<h1 v-if="show">{{ msg }}</h1>

In this section, we looked at how external JavaScript libraries can be used for animations. We implemented a simple tween using the GSAP library, making use of its TweenMax and TimelineMax functions.

Let's now learn how to add a new message using an animation effect.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.