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 uses a simple pixel 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 ABeamer charts plugin.
It displays the bar, line and area charts.

Image

Download code: zip.
Try it online.

animate-class-prop

Demonstrates how to animate the class property value.

Image

Download code: zip.
Try it online.

WARNING This example doesn't supports teleportation.

animate-colors

Demonstrates how to animate the color property by interpolating colors from a list.
In this example, “text” uses the ABeamer valueText property to change the CSS 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, expressions and the factory task.

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-delay-teleportation

Demonstrates how to delay the start of the teleportation.
By delaying the start, it allows to inject html/css code into the story and generated a teleported story with dynamic code.

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, 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.
This example uses an harmonic oscillator for the 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.
This example moves images and text by modifying the left and top properties.

Image

Download code: zip.
Try it online.

animate-plot

Demonstrates how to use charts to plot math functions.
This example instead of passing a data series, it passes a expression and the number of points to be plotted.

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 shape task.
The shape-tasks plugin is still in a phase of improvement.

Image

Download code: zip.
Try it online.

animate-simple-virtual-animator

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

Image

Download code: zip.
Try it online.

WARNING This example doesn't supports teleportation.

animate-speech

Demonstrates how to use the speech shape.
This shape task supports 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.
It uses CSS transforms and ABeamer 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 creates animations in multiple scenes and then different types of transition between them.

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 an adapter 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 a workbench to test easings and oscillators.

Image

Download code: zip.
Try it online.

animate-wrappers

Demonstrates how to use JQuery-like wrapper tasks instead of ABeamer commands.
Wrapper tasks unlike commands, it can't be loaded from file.

Image

Download code: zip.
Try it online.

datetime-workbench

This is a workbench to test time-date functions.

Image

Download code: zip.
Try it online.

remote-server

This is the skeleton code designed to server render locally stored stories or teleported stories.
Download code: zip.
Try it online.