Menu
back
github
download icon
Pages
Attributes
Animation Types

ADD ANIMATIONS AND TRANSTIONS WITH EASE.
DEVELOP YOUR WEBSITE LIKE NEVER BEFORE

Dom Flowt is a lightweight JavaScript Library for performing animations on elements as they appear into a users view

Get Started

Download

Download Dom Flowt now and get started making your website more fun and interactive!

download
Bolt v1.0
2024 Oct 22
Introducing Dom Flowt Bolt also known as version “1” is just the beginning of a simpler world of animations. Packed with a good starter of animation types and functionality.

There are no new versions of Dom Flowt in development at the moment. Please visit us often for updates.

Get Started

Before you start, make sure you have downloaded the ZIP folder and added the files to your project.

  1. Make sure you have referenced the CSS file.

  2. Make sure you have referenced the JS file.

  3. Add the watch method inside the "scroll" event listener on the element of your choice. Normally you would add the watch method to your window element.

And there you go, Dom Flowt should work on your application.

Documentation

Attributes

View all attributes used in the latest version of the Dom Flowt library.

Is Visible
dom-flowt-is-visible

Dom Flowt uses the "is visible" attribute to determine whether the element is visible on screen or not.

This attribute is required for all elements and must be given the value of false.

Type
dom-flowt-type

The type attribute is used to specify what type of animation should be used when the element animates on screen.

Default Value: "fade"

Duration
dom-flowt-duration

The duration attribute is used to specify the duration of the animation.

The time is measured in milliseconds

Default Value: "500"

Delay
dom-flowt-delay

The delay attribute is used to specify the duration of the delay the animation must have.

The time is measured in milliseconds

Default Value: "0"

Repeat
dom-flowt-repeat

The repeat attribute is used to specify whether the animation should happen again when the element appears on screen more than once.

To prevent repeat behaviour, add the repeat attribute and give it the value of "no-repeat"

Default Value: "repeat"

Animation Types

View all animation types used in the latest version of the Dom Flowt library

download
Fade

The "fade" type currently does not have any variants.

download
Pop

The "pop" type currently supports 2 variants

  • "pop-up"
  • "pop-down"
download
Float

The "float" type currently supports 4 variants

  • "float-up"
  • "float-down"
  • "float-right"
  • "float-left"
download
Flip

The "flip" type currently supports 2 variants

  • "flip-vertical"
  • "flip-horizontal"
download
Jump

The "jump" type currently does not have any variants.

Why Use Dom Flowt?

Dom Flowt was made for developers to easily use and extend or modify it.

download
Very easy to setup and use

The Dom Flowt library requires you to reference the JS and CSS files into your project and call one method for it to work!

download
Flexible and easy to extend or modify

Adding new animation types in Dom Flowt can be done with CSS alone! No need to edit any of the JavaScript!

download
Extremely lightweight

This library is specific to just animating elements when they come into a users view, it is not bloated with other functionalities!