Animate Elements using CSS3 Keyframes – OchibaJS

Preview:

Description:

OchibaJS is a lightweight JavaScript library that can be used to animate elements using CSS3 keyframes.

Flexible Animation Control

With OchibaJS, you gain precise control over how your animations unfold. You can define the animation order—whether it’s a sequence from first to last, from the middle outwards, or a custom order. You can also easily adjust core animation properties, such as duration, delay, and easing. This allows you to create intricate animations with minimal code.

Imagine you want to animate a list of items entering the screen. OchibaJS lets you choose if they appear sequentially, from the center, or even randomly. You control the pace and style of each animation segment.

Text Splitting

OchibaJS includes a handy text-splitting feature. If an element contains text, the library can automatically divide it into individual <span> elements. This allows you to animate each letter or word separately. You can create unique, eye-catching text effects that will make your website more engaging.

For instance, think about creating a title where each letter animates into place with a slight delay, creating a sense of dynamism and depth.

CSS Export

A unique feature of OchibaJS is its ability to export the entire animation as CSS code. This lets you use the animation without relying on JavaScript or needing the OchibaJS library in your projects. This is very useful if you prefer to keep your JavaScript to a minimum.

You can define a complex animation using the JavaScript library, and then export the generated CSS to implement that animation on other projects, improving the performance and reducing the number of dependencies of your project.

How to use it:

1. Download the ochiba.js library and insert it in your HTML document:

<script src="js/ochiba.js"></script>

2. Get the target HTML element and create a new OC instance:

<h1 id="headline">Animated Title</h1>

const elem = document.getElementById('headline');
const instance = new OC(elem);

3. Use the animateLeaves() method to animate the content inside the element (h1 in this example), with the desired options:

instance.animateLeaves({
   duration: 2,
   order: 'mid-out',
   timing: 'linear',
   leafAnimation: {
     duration: 1,
     timing: 'ease',
     keyframes: 'scale-in' // your own CSS keyframes
   },
});

4. Create your animations using CSS keyframes.

@keyframes scale-in {
  0%   { transform: scale(16); color: brown; opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

5. All possible options.

instance.animateLeaves({
  // `duration` (number): Sets the total duration of the entire animation sequence, in seconds. 
  // This determines how long it takes for all child elements to complete their individual animations. 
  // For example, if you have a list of 5 items animating, and each item takes 1 second, setting a duration of 2 seconds won't slow down individual item animations but determines how long the whole animation sequence will take. 
  // The default value is not defined and should be set by the user for accurate animations.
  duration: undefined,
  // `order` (string): This option specifies the order in which the child elements will be animated. It provides several preset animation patterns to choose from.
  // 'asc': Animates child elements in ascending order, meaning from the first element to the last element in the DOM. This is useful for simple sequential animations where elements are revealed one after another.
  // 'desc': Animates child elements in descending order, starting with the last element and going towards the first. This creates a reverse sequence animation.
  // 'mid-out': Animates elements from the middle outwards. The central elements animate first, and the animation spreads to the outer edges. This is suitable for creating a focal point in the middle of a list or group.
  // 'out-mid': Animates elements from the edges towards the middle. The elements at the ends animate first, with the animation moving towards the center. This creates an animation that converges to the middle.
  // 'random': Animates elements in a random order. Every time the animation runs, the order changes, creating a chaotic and dynamic effect. This can be useful when you want to avoid predictability in the animation. The default value is not defined and should be set by the user.
  order: undefined,
  // `timing` (string): Sets the timing function that will control the overall pace and flow of the animation sequence for all child elements. It's applied to the overall animation process as a whole.
  // 'linear': The animation progresses at a constant speed from start to finish, without any acceleration or deceleration. It creates a steady, even animation.
  // 'ease':  The animation starts slowly, speeds up in the middle, and slows down again towards the end. This creates a smooth, natural-looking animation.
  // 'ease-in': The animation starts slowly and gradually accelerates towards the end. This effect makes the start of the animation subtle, with a quick transition to the end.
  // 'ease-out':  The animation starts quickly and gradually decelerates towards the end. This provides a dynamic and noticeable start but ends smoothly.
  // 'ease-in-out': The animation starts slowly, accelerates in the middle, and slows down towards the end. It combines both ease-in and ease-out effects.
  // 'cubic-bezier(n,n,n,n)': This allows for a custom timing function using a cubic Bezier curve. You can define your specific curve by providing four numerical values between 0 and 1. For example: 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'. This is ideal for fine-tuning animation dynamics and achieving very specific effects. The default value is not defined and should be set by the user.
  timing: undefined,
  // `leafAnimation` (Object): An object containing specific animation settings that are applied to each individual child node (or leaf) in the target element. It allows fine-grained control of each element's animation.
  leafAnimation: {
    //  `keyframes` (string):  Specifies the name of the CSS keyframes that will define the animation sequence of each child element.  It refers to a predefined `@keyframes` rule in your CSS. For example, if you have a CSS animation named 'fadeIn', the value here should be 'fadeIn'. This is mandatory for animation to take effect on each leaf. The default value is not defined and should be set by the user for accurate animation.
    keyframes: undefined,
    // `duration` (number): Sets the duration of the animation for each individual child element, in seconds. It controls how long each leaf takes to complete its animation. This is different from the main `duration` option, which dictates the time for the overall animation. The default value is not defined and should be set by the user for accurate animations.
    duration: undefined,
    // `timing` (string):  Sets the timing function for the animation of each individual child element. The animation of each child can use different easing from the main animation if it’s different from the main `timing` option.
    // 'linear': The animation progresses at a constant speed from start to finish, without any acceleration or deceleration. It creates a steady, even animation for individual child elements.
    // 'ease': The animation starts slowly, speeds up in the middle, and slows down again towards the end. It provides a smooth, natural-looking animation for each child.
    // 'ease-in': The animation starts slowly and gradually accelerates towards the end for each child element.
    // 'ease-out': The animation starts quickly and gradually decelerates towards the end for each child element.
    // 'ease-in-out': The animation starts slowly, accelerates in the middle, and slows down towards the end for each child.
    // 'cubic-bezier(n,n,n,n)': This allows for a custom timing function using a cubic Bezier curve, allowing for precise animation dynamics and specific effects for individual elements. For example: 'cubic-bezier(0.1, 0.7, 1.0, 0.1)'. The default value is not defined and should be set by the user.
    timing: undefined,
    // `delay` (number): Sets a delay, in seconds, before each individual child's animation starts. This creates a staggered effect, allowing you to control when each leaf begins its animation. The default value is 0.
    delay: 0,
     // `iterations` (number):  Specifies the number of times the animation should repeat for each child element. A value of 1 means the animation plays once; 2, twice, and so on. A value of 'infinite' will make the animation repeat indefinitely. The default value is 1.
    iterations: 1,
   // `fillMode` (string):  Determines how the animation affects the element after it completes.
   // 'none': The default behavior. The element will return to its initial state once the animation ends.
   // 'forwards': The element keeps the style defined in the last keyframe of the animation, after the animation completes.
   // 'backwards': The element is immediately set to the style defined in the first keyframe of the animation before the animation starts, during the `delay` time.
   // 'both': Combines the features of both `'forwards'` and `'backwards'`. The element is set to the style defined in the first keyframe before the animation starts, and keeps the style from the last keyframe after the animation completes. The default value is 'none'.
    fillMode: 'none',
    },
    
});