Description

This repository contains a list of examples that highlights ABeamer features.

Each example contains link to download the example code.

Usage

  1. Install ABeamer.

    npm install -g abeamer
    

    Before continue, read about the details on abeamer page.

  2. Create a project

    abeamer create my-project
    cd my-project
    
  3. Download the example zip file, and replace with your project files inside my-project folder


animate-4k

Demonstrates how to render at high resolutions.
In this example, the story screen size is set to 4k.
It contains no gif due its size.
The TOPIC is on the abeamer.ini file.
Download code: zip
Try it online.


animate-abeamer

This example is the ABeamer logo.
It uses pixel, value and text properties animations To move up and down the disks, it uses a expression allowing to create conditional movement while supporting teleportation

Image

Download code: zip
Try it online.


animate-attack-task

Demonstrates how to do a fast color flashing using the task color-attack.
In this example, “buy now” uses a path to move and rotate.
The “only” text has a simple motion.
The “price” uses a color attack to quickly flash the colors and return to original color.

Image

Download code: zip
Try it online.


animate-badges

This example is the ABeamer badge generator.

Image

Download code: zip
Try it online.


animate-charts

Demonstrates how to use charts.
It displays bar, line and area charts.
WARNING: Charts are still in development stage

Image

Download code: zip
Try it online.


animate-class-prop

Demonstrates how to change the class property.

Image

Download code: zip
Try it online.

WARNING This example doesn't supports teleportation.


animate-colors

Demonstrates how to change the color by selecting one from a list.
In this example, “text” uses a valueText to change the color property.

Image

Download code: zip
Try it online.

WARNING This example doesn't supports teleportation.


animate-counter

Demonstrates how to create a counter.
In this example, “text” is interpolated from valueStart to value and then formatted using valueFormat.
It also uses vars, factories and expressions.

Image

Download code: zip
Try it online.


animate-decipher-text

Demonstrates how to use the decipher text task.
In this example, decipher generates a random list of texts that gradually reveal the hidden text.

Image

Download code: zip
Try it online.


animate-easings

Demonstrates how to use the different types of easing in an animation.

Image

Download code: zip
Try it online.


animate-factory

Demonstrates how to use a factory task.
In this example, a factory creates a list of images avoid cluttering the html file.
and then moves them upwards using expressions with random functions.

Image

Download code: zip
Try it online.


animate-flyovers

Demonstrates how to use a info flyover.
In this example, 2 info flyovers are added at the bottom of the image.

Image

Download code: zip
Try it online.


animate-images

Demonstrates how to animate images.
In this example, both a images and background images are animated.

Image

Download code: zip
Try it online.


animate-item-delay

Demonstrates how to use item-delay to delay the elements within a collection.
This example also uses factories, harmonic oscillation, disturbance and expressions and then uses an oscillator with disturbance

Image

Download code: zip
Try it online.


animate-localization

Demonstrates how to localize expression names into other languages.

Image

Download code: zip
Try it online.


animate-loop

Demonstrates how to simulate CSS property iteration-count and CSS property direction.

Image

Download code: zip
Try it online.


animate-oscillator

Demonstrates how to use oscillators.
In this example, uses an harmonic oscillator for flashing image and a damped oscillator for the text.
For pulsars, see animate-pulsar.

Image

Download code: zip
Try it online.


animate-paths

Demonstrates how to use path to create a 2D movement.
In this example, it moves the vegetables using lines, ellipses and rectangles.

Image

Download code: zip
Try it online.


animate-pixels

Demonstrates how to use move elements.
In this example, it moves images and text by modifying the left and top property.

Image

Download code: zip
Try it online.


animate-plot

Demonstrates how to use charts to plot math functions

Image

Download code: zip
Try it online.


animate-pulsar

Demonstrates how to use a pulsar.
A pulsar is an oscillator that is at rest part of the time and then carries energy other part of the time.
for other types of oscillators, see animate-oscillator.

Image

Download code: zip
Try it online.


animate-rec-high-res

This example is built only too simulate recording at 4k

Image

Download code: zip
Try it online.


animate-shapes

Demonstrates how to use the shapes task.
The shapes plugin is still in a phase of improvement.

Image

Download code: zip
Try it online.


animate-speech

Demonstrates how to use speech shape.
This example shape has many configurations, and it's expected to improved soon

Image

Download code: zip
Try it online.


animate-support

This example is the ABeamer support image.
This example uses CSS transforms and ABeamer a counter, typewriter and pixel motion

Image

Download code: zip
Try it online.


animate-text-tasks

Demonstrates how to use typewriter and text-split tasks.

Image

Download code: zip
Try it online.


animate-transitions

Demonstrates how to use scene transitions.
This example shows how to use transitions in the multiple forms.

Image

Download code: zip
Try it online.


animate-video-sync

EXPERIMENTAL: Demonstrates how to sync a background video with an animation.
WARNING Due Chrome 'autoplay-policy', it's not possible to 'safely' use Chrome to sync with videos, In order to overcome this limitation:

  1. Use Firefox to test the animation with a background video.
  2. Set serverRender: false to prevent abeamer render from attempting to sync the video while server render.
  3. When using abeamer movie, set --bkg-movie parameter with the video filename to use a background video.

Image

Download code: zip
Try it online.


animate-virtual

Demonstrates how to use ABeamer to animate Canvas and Virtual Scenes.
ABeamer uses adaptor to decouple from HTMLElements, allowing to animate anything.

Image

Download code: zip
Try it online.

WARNING This example doesn't supports teleportation.


animate-with-less

Demonstrates how to use LESS instead of SCSS.
Animates using easings and oscillators.
Also uses expressions for conditions.

Image

Download code: zip
Try it online.


animate-workbench

This is an workbench to test easings and oscillators.

Image

Download code: zip
Try it online.


animate-wrappers

Demonstrates how to use wrapper tasks instead of ABeamer commands.
Wrapper tasks unlike commands can be loaded from file.

Image

Download code: zip
Try it online.


This is a chart gallery. You can view it online
Download code: zip
Try it online.


This is a gallery of all the easings. You can view it online
Download code: zip
Try it online.


remote-server

This is skeleton to received either locally stored stories or teleported stories
Download code: zip
Try it online.