Animation

While animation is mainly driven by CSS, the Sircl extended module holds features to control that animation.

Setup

The animation control features of Sircl are all part of the sircl-extended library. As such, they require the combination of sircl.js and sircl-extended.js, or the use of the sircl-bundle.js that combines both. Of course you can also use the minified versions.

CSS Animation

CSS animation is as it name implies defined in CSS. Keyframes name an animation and describe the start, end and in-between keyframes, while CSS is used to control the behavior of the animation (duration, repetition, etc.)

For more about CSS animations, see:

> MDN | Using CSS animations

Being controlled by CSS, this type of animation is typically initiatd by applying a class. In Sircl this can be done using the different *-addclass event actions, such as the onclick-addclass:

<style>
  @keyframes bg-fade-blue-to-none {
    0% { background: lightblue; }
    100% { background: none; }
  }
  .highlight {
    animation: bg-fade-blue-to-none 1s ease-in;
  }
</style>

<p id="item">Some item</p>

<button type="button" onclick-addclass="highlight on #item">Highlight</button>

When pressing the Highlight button, the item is highlighted with a fading out animation.

The problem here, is that you can run this animation only once: the first time the class is added, what triggers the animation. The second time, the class is already added an cannot be re-added.

To solve this problem, we have to instruct to remove the highlight class ones the animation has ended. And this can be done with the onanimationand-removeclass. The paragraph now becomes:

<p id="item" onanimationend-removeclass="highlight">Some item</p>

Now, at the end of the animation, the highlight class is removed, pressing the Highlight button will add it again and with that, trigger the animation again.

The following Sircl event-action attributes are available to act upon the animation ending event. Note that they will be triggered on both animationend and animationcancel events as both terminate the animation:

Other animation events are controlled to the following event-action attributes that only provide a click action, which is sufficient to do chaining of event-actions to support more complex scenario's. Note that here, the onanimationend-click will act only upon the animationend event, not the animationcancel event:

CSS Transitions

Another way to animate content is by using CSS Transitions. They also are defined in CSS but are simpler in nature. However the control options you have in Sircl are very similar.

The following Sircl event-action attributes are available to act upon the transition starting event:

The following Sircl event-action attributes are available to act upon the transition ending event. Note that they will be triggered on both transitionend and transitioncancel events as both terminate the transition:

Finally, you can control other transition events using the following click action event-actions, which is sufficient to do chaining of event-actions to support more complex scenario's. Note that here, the ontransitionend-click will act only upon the transitionend event, not the transitioncancel event:

In the following example using Bootstrap 5, a series of switches is shown. When unswitching a switch, the switch element itself is removed. The first switch uses an onclick-remove event-action. The problem is with that, is that it removes the element before the slide transition finishes. The 2 other switches use an ontransitionend-remove event-action which waits for the slide transition to finish before removing the element:

Notice how relative CSS selectors are used to remove not just the INPUT element, but the parent DIV element.

<div class="form-check form-switch">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" role="switch" checked
           onclick-remove="<div">
    Using onclick-remove
  </label>
</div>
<div class="form-check form-switch">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" role="switch" checked
           ontransitionend-remove="<div">
    Using ontransitionend-remove
  </label>
</div>

Find more about CSS Transitions on:

> MDN | Using CSS transitions

View Transitions

Web View Transitions provide a way to create animated transitions when switching views. Sircl provides support for View Transitions when changing parts of a web page (so-called same-document view transitions). This includes the Sircl Single Page mode, but can also be applied on partial page loadings in Multi-Page mode. For View Transitions that occure on page change (so-called cross-document view transitions), no JavaScript is required, so there is no need for Sircl support: you only define the transitions in CSS.

Default View Transition

To apply a view transition on a page part load, add the onload-startviewtransition attribute to the target of the load:

<div id="tpic" onload-startviewtransition>
  <img src="img1.webp">
</div>
<a href="img1.html" target="#tpic">Image 1</a>
<a href="img2.html" target="#tpic">Image 2</a>

<style>
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1s;
  }
</style>

In this example you see the default "cross-fade" transition. The STYLE element added only slows down the transition so it is more visible.

In Single Page mode, to have the main content use view transitions, you would add the onload-startviewtransition attribute to the element holding the sircl-appid attribute or the main-target class.

Forward and Backward View Transitions

In Single Page mode, Sircl offers two View Transition types to support forward and backward navigation transitions: forwards and backwards.

For instance, to have a page slide effect when navigating forward and backward in a Single Page mode site, add the onload-startviewtransition attribute on the main target element (the element holding the sircl-appid attribute or the main-target class), and define the following View Transition styling:

<style>
  @keyframes slide-to-left {
    to { transform: translateX(-100vw); }
  }

  @keyframes slide-from-right {
    from { transform: translateX(100vw); }
  }

  @keyframes slide-to-right {
    to { transform: translateX(100vw); }
  }

  @keyframes slide-from-left {
    from { transform: translateX(-100vw); }
  }

  html:active-view-transition-type(forwards) {
    &::view-transition-old(root) {
      animation: 300ms ease-out both slide-to-left;
    }
    &::view-transition-new(root) {
      animation: 300ms ease-out both slide-from-right;
    }
  }

  html:active-view-transition-type(backwards) {
    &::view-transition-old(root) {
      animation: 300ms ease-out both slide-to-right;
    }
    &::view-transition-new(root) {
      animation: 300ms ease-out both slide-from-left;
    }
  }
</style>

Custom View Transition Type

When the onload-startviewtransition attribute has a value, it is assumed to be a custom View Transition type. 

For instance, to apply the custom transition type "light", 

<div onload-startviewtransition="light">
  Apply "light" transition when content of this element changes.
</div>

Note that the scope of the transition is not defined by the element holding the onload-startviewtransition attribute but by the CSS setup where you define view-transitions-names and view-transiton-classes.

Read more about the View Transitions API on:

> Chrome for Developers | Smooth transitions with the View Transition API

Browser support