Triggering animation

This example demonstrates how animations can be triggered using the add/remove/toggle class actions in Sircl.

Triggering animations is often a matter of adding or removing a class provided the class uses CSS transformations. Sircl has several event-actions that support adding, removing or toggling classes on elements which can be used among others to trigger animations.

Animista is a great libary of animation effects through CSS transformations.

In this example I have copied two animation effects from Animista: a slide-in and a slide-out effect. The target of the animation ("#p2") starts with the slide-in effect. Using the button which bears an onclick-toggleclass event-action the classes are then switched:

<p>
  <button onclick-toggleclass="slide-in-elliptic-top-fwd slide-out-bck-bottom on #p2">View/hide details</button>
</p>
<p id="p2" class="slide-in-elliptic-top-fwd">
  More details fly in using an animation of the <a href="http://animista.net" target="_blank">Animista</a> CSS animation library.
</p>

Following is the required CSS code:

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-elliptic-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}
@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
            transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
            transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
            transform-origin: 50% 1400px;
    opacity: 1;
  }
}

.slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation slide-out-bck-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-bck-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-1100px) translateY(1000px);
            transform: translateZ(-1100px) translateY(1000px);
    opacity: 0;
  }
}
@keyframes slide-out-bck-bottom {
  0% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(-1100px) translateY(1000px);
            transform: translateZ(-1100px) translateY(1000px);
    opacity: 0;
  }
}

.slide-out-bck-bottom {
	-webkit-animation: slide-out-bck-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-bck-bottom 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

Depending on your situation, you may also use onclick-addclass and onclick-removeclass event-action attributes, as well as add/remove/toggle class actions related to other events. Find out about the available event-action attributes in the section about Event-Actions.