ThreeJS Scene Builder
Animations

Common Concepts

Triggers

Animations can be triggered at a specified location of the page described in terms of the percentage of the page height.

The page height is the total height of all of your sections and header/footer combined, a range of 0% to 100% is created from it and you can specify where to run your animations within this range.

Target ID

The target ID is the unique ID of the shape you wish to target with the animation.

For every shape you create, you can give it a Unique ID so it can be referenced within the scene by other components.

Animation Property

The type of property that you want to animate.

You can choose between ( Position, Rotation, Scale ) properties and selectively choose which axis ( X, Y, Z ) to animate.

SCROLL Animation

With Scroll animations, You can linearly animate an object between a start trigger and an end trigger on scroll.

 

Linear Only

Though you will see easing functions for all animation types, they do not apply to Scroll Animations.

You Can use a smooth scroll plugin to ease the general scroll which will in turn apply a smoothing effect to your scroll animations.

Reversable

The animations will automatically play in reverse when scrolling up past the specified triggers.

IE: If the current page scroll is within the specified trigger range then the animation will play in either direction.

Chainable

You can have several animations targeting the same object with different triggers and different properties.

However, if you have more than 1 animation, targeting the same object and the same properties The last animation in the sequence will be applied.

ONCE Animation

With Once animations, You can animate an object for a given duration and start the animation at a given location in the page.

Easings

You can apply several easings for each property axis and direction separately, giving you a number of possibilities when animating your objects.

Optionally Reversable

You can specify whether the animation should play in reverse when scrolling back up.

Chainable

You can have several animations targeting the same object with different triggers and different properties.

However, if you have more than 1 animation, targeting the same object and the same properties The last animation in the sequence will be applied.

LOOP Animation

Loop animations will increment the chosen property with the given value between a start and end trigger.

Infinite

The animation loops over the specified condition forever. This type of animation is useful for continuous rotation or if you need an object to change position or scale gradually until it disappears from the screen at some point etc

Non-Directional

The animation will play the same way based on the given values irrespective of the scrolling direction

Chainable

You can have several animations targeting the same object with different triggers and different properties.

However, if you have more than 1 animation, targeting the same object and the same properties The last animation in the sequence will be applied.