iFSM Animation: Animate elements with parameters from attributes

Recommend this page to a friend!
  Info   View files Example   Demos   View files View files (121)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2021-12-29 (11 months ago) RSS 2.0 feedNot yet rated by the usersTotal: 74 All time: 467 This week: 3Up
Version License JavaScript version Categories
ifsmanimation 1.0MIT/X Consortium ...5Animation, HTML
Description Author

This package can animate elements with parameters from attributes.

It can parse page elements data attributes that define how each page element is animated and when.

The main class object can animate the specified elements using a finite state machine to keep track of the animation state of each element.

Innovation Award
JavaScript Programming Innovation award nominee
August 2017
Number 2
State machines can be used to keep track of the state of elements of information that change over time according to sequences of events.

This package uses state machines to manage the state of complex animations of Web page elements according to configurable sequences of events.

Manuel Lemos
Picture of Emmanuel Podvin
  Performance   Level  
Name: Emmanuel Podvin <contact>
Classes: 5 packages by
Country: France France
Age: 57
All time rank: 634 in France France
Week rank: 6 Up2 in France France Up
Innovation award
Innovation award
Nominee: 5x

Winner: 4x

Details

iFSMAnimation

Create elegant HTML5 animations in responsive design easily and quickly, with only one line of javascript code!

You describe the DOM objects that you want to animate, attached them to the animation machine, and let's animate!

To use it, have a look on the examples provided...

What is iFSMAnimation ?

iFSMAnimation is javascript library that allows to create animations from an html description.

Demos

  • http://www.macofi.fr/en/approach/
  • https://www.intersel.fr/projects/franceurbaine/
  • https://www.intersel.fr/projects/voeux2017/
  • https://www.intersel.fr/en/other-pages/github/ifsm-animation-jquery-plugin.html - demos of the "examples" directory

Getting started

Mainly, you need to create: * a HTML 'section' (or whatever) that will define where is defined the animation and HTML 'articles' to define the different objects that must be animated. * at the end, add a little script to start the animation... * that's it! You've got an animation that is RESPONSIVE ! Without having to know how to write javascript code lines...

First Example

The following example is a full animation that displays four pictures where different animations are applied. You could use this example as a starter template...

<!DOCTYPE html>
<html>
        <head>
                <script src="../extlib/jquery-3.2.0.min.js"></script>
                <script src="../extlib/iFSM/iFSM.compressed.js"></script>
                <script src="../iFSMAnimation.js"></script>
                <style>
                        article {opacity:0;}
                </style>
        </head>
        <body>
                <div id="animation">

                <section id="animation-objects"
                        data-delay-before-restart="1000"
                        data-box-responsive="true"
                        data-box-size-reference="700,700"
                                data-div-class="animationDiv"
                                data-loader-class="animationLoader"
                >
                        <article id="HappyNewYear_B"
                                data-animation="animate,300,90,220"
                                data-enter-animation="display, 1000, 90, 104, 90, 104"
                                data-exit-animation="smoothHide,500,90,350"
                        >
                                <img src="images/B.png">
                        </article>
                        <article id="HappyNewYear_O"
                                data-animation="specialAnimate,300,{left:150;top:150;width:100}"
                                data-enter-animation="display,200,170,104,170,104,easeInOutElastic"
                                data-exit-animation="specialAnimate,300,{left:150;top:270;opacity:0;width:50}"
                        >
                                <img src="images/O.png">
                        </article>
                        <article id="HappyNewYear_N3"
                                data-animation="dummy"
                                data-enter-animation="display,200,262,220,262,220"
                                data-exit-animation="smoothHide,100,262,350"
                        >
                                <img src="images/N.png">
                        </article>
                        <article id="HappyNewYear_star"
                                data-animation="rotateNoWait,2000,3060"
                                data-enter-animation="display,1000,160,190,160,90,easeOutBounce"
                                data-exit-animation="smoothHide,100,160,260"
                        >
                                <img src="images/etoile.png">
                        </article>
                </section>
                </div>
                <script>
                        $(document).ready(function() {
                                //initialize and start the general animation
                                $('#animation-objects').iFSMAnimation();
                        });
                </script>
        </body>
</html>

General process

An animation is defined by a main animation object attached to a container such a 'section'.

Within the container, you define the different animated objects attached/described by a subcontainer that is by default an 'article'.

Take care to give an id to each object you will animate.

The animation starts by calling each animated objects using the 'data-enter-animation' and just after 'data-animation' attributes to animate them.

When all objects were animated, the animation applies the 'data-exit-animation' definition of every animated objects to ending their animations, and then loops back.

Attributes on the main container

data-delay-before-restart

The 'data-delay-before-restart' attribute allows to define the delay before the animation restarts.

Example:

<section id="animation-objects" data-delay-before-restart="10000">

data-box-responsive

Boolean, if 'true', the animation will be 'responsive'. Limitations known with using 'specialAnimate'.

Example:

<section id="animation-objects" data-box-responsive="true">

data-box-size-reference

"BoxWidth,BoxHeight" give the used dimensions as reference for the position of the animated objects. Useful in Responsive mode.

Example:

<section id="animation-objects" data-box-size-reference="551,551" >

data-keep-height-visible

Boolean, if 'true', the width and height will be fixed in order that the animation is fully shown on the window display. Example:

<section id="animation-objects" data-keep-height-visible="true">

data-div-class

Actually, a 'div' embeds the animation. It is possible to define the class that should be used on this div.

Example:

<section id="animation-objects" data-div-class="animation">

data-loader-class

A loader may be set during initialization.

To display a loader, just indicate the class to use with the data-loader-class attribute.

Example:

<section id="animation-objects" data-loader-class="myLoaderClass">

Attributes on a sub container

data-enter-animation / data-animation / data-exit-animation

These attributes define the animation of the object.

The available animation are: * dummy - non animation * animate - animate article from current position or startposition to destination

 *  duration
 *  destination-left
 *  destination-top
 *  startposition-left - optional
 *  startposition-top - optional
 *  easing function - see http://easings.net/fr - optional

* display - display article (opacity set to 1) with animation from current position or startposition to destination

 *  duration
 *  destination-left
 *  destination-top
 *  startposition-left - optional
 *  startposition-top - optional
 *  easing function - see http://easings.net/fr - optional

* smoothHide - display article (opacity set to 0) with animation from current position or startposition to destination

 *  duration
 *  destination-left
 *  destination-top
 *  startposition-left - optional
 *  startposition-top - optional
 *  easing function - see http://easings.net/fr - optional

* rotate - rotate article

 *  duration
 *  angle

* loop - loop animation

 *  duration
 *  destination-left
 *  destination-top
 *  startposition-left - optional
 *  startposition-top - optional
 *  loops number - optional default:infinite - give the number of loops
 *  loop back delay - optional default: duration - give the delay to go to the initial position

* specialAnimate, specialAnimateNoWait

 *  duration
 *  animation description object as in jQuery. ex: {left: 20;top:100;width:300}
 *  void
 *  void
 *  void
 *  easing function - see http://easings.net/fr - optional

* animateNoWait - same as animate but does not wait the end of animation to start the next animation * displayNoWait - same as display but does not wait the end of animation to start the next animation * smoothHideNoWait - same as smoothHide but does not wait the end of animation to start the next animation * rotateNoWait - same as rotate but does not wait the end of animation to start the next animation

Start the animation with javascript

To start the animation, you will need to add this script:

<script>
$(document).ready(function() {
	//initialize and start the general animation
	$('section').iFSMAnimation();
)};
</script>

You can define some options: animationSequence

array, defines the order of animation of the objects. By default, the order is the one found in the DOM.

animatedObjectDefinition

string, gives the HTML tag to find the animated objects (in css/jquery format).

examples:

var myAnimationSequence=['#myAnimObj2','#myAnimObj1'];
$('#animation-objects').iFSMAnimation({animationSequence:myAnimationSequence})
$('#animation2').iFSMAnimation({animatedObjectDefinition:'div',debug:true});

CSS

In order to have the animation playing correctly, you can use the following css as a start:

body {
	margin		: 0px;
	padding		: 0px;
	text-align	: center;
	}
/for the div that embeds your animation section, will center it/
#animation, .animation {
	margin : 0 20% 30px 20%;
}
/for the main animation section container, let's have a background/
#animation-objects,.animated_section {
	background-color:	#1c3970;
}
/for the animated objects (here, all objects will start as hidden at beginning - opacity=0)/
section#animation-objects article {
	opacity		: 0;
}

Examples

The 'examples' folder gives you some examples on how to animate your DOM objects with iFSMAnimation...

LIBRARY DEPENDENCIES

To work properly, you need to include the following javascript library: * jQuery (>= 3.2) <script type="text/javascript" src="extlib/jquery-1.10.2.min.js"></script> * iFSM by intersel * this library manages finite state machines and needs these libraries:

* doTimeout by "Cowboy" Ben Alman
  * this library brings some very usefull feature on the usual javascript setTimeout function like Debouncing, Delays & Polling Loops, Hover Intent...
  * `<script type="text/javascript" src="extlib/jquery.dotimeout.js"></script>`
* attrchange by Selvakumar Arumugam](http://meetselva.github.io/attrchange/)
  * a simple jQuery function to bind a listener function to any HTML element on attribute change
  * `<script type="text/javascript" src="extlib/jquery.attrchange.js"></script>`
  • waitForImages by Alexander Dickson, in order to garantee that all images of the animation are downloaded and ready. This library is automatically loaded by iFSMAnimation.
  • jQuery UI may be used to apply some effect on the animated objects as swing, easing, ...
  • jquery.path may be used to defined arc and bezier for the path of animated objects.
  • FitText.js may be used to have 'responsive' texts

If you need to do some specific animations, these libraries may be useful: * jquery.path - allows to animate objects following a path as an arc or a curve

FAQ

  • my objects don't seem to be correctly positionned on the Y axe. * Did you correctly set the "`<!DOCTYPE html>`" at the beginning of your file? without it, strange behaviour occurs!
  • iFSMAnimation loads all its jquery libraries... but they are still loaded... * you can empty the list of the libraries to load using the option 'ANIMATION_NEEDED_SCRIPTS':
$('#myAnimation').iFSMAnimation({	 
    ANIMATION_NEEDED_SCRIPTS:[]
});

Still some questions?

If you have questions or unsolved problems, you can have a look on the our FAQs or leave a message on the Issue board.

Contact

If you have any ideas, feedback, requests or bug reports, you can reach me at github@intersel.org, or via my website: http://www.intersel.fr

  animations of html textsExternal page   happy new yearExternal page  
  Files folder image Files  
File Role Description
Files folder imageexamples (6 files, 2 directories)
Files folder imageextlib (2 files, 5 directories)
Plain text file iFSMAnimation.js Class Class source
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  examples  
File Role Description
Files folder imageimages (24 files)
Files folder imagemusique (1 file)
  Accessible without login Plain text file index-animation-following-path.html Example Example script
  Accessible without login Plain text file index-sliders.html Example Example script
  Accessible without login Plain text file index.html Example Example script
  Accessible without login Plain text file index2.html Example Example script
  Accessible without login Plain text file structure-sliders.css Data Auxiliary data
  Accessible without login Plain text file structure.css Data Auxiliary data

  Files folder image Files  /  examples  /  images  
File Role Description
  Accessible without login Image file A.png Icon Icon image
  Accessible without login Image file ajax-loader.gif Icon Icon image
  Accessible without login Image file B.png Icon Icon image
  Accessible without login Image file best_wishes_2015.png Data Auxiliary data
  Accessible without login Image file bulles1.png Data Auxiliary data
  Accessible without login Image file bulles2.png Data Auxiliary data
  Accessible without login Image file cinq.png Icon Icon image
  Accessible without login Image file deux.png Icon Icon image
  Accessible without login Image file E.png Icon Icon image
  Accessible without login Image file Eaccent.png Icon Icon image
  Accessible without login Image file etoile.png Icon Icon image
  Accessible without login Image file exclamation.png Icon Icon image
  Accessible without login Image file logo-intersel.png Icon Icon image
  Accessible without login Image file logo_intersel.png Icon Icon image
  Accessible without login Image file N.png Icon Icon image
  Accessible without login Image file O.png Icon Icon image
  Accessible without login Image file petal-vert-605-871.png Icon Icon image
  Accessible without login Image file petale-bleu-605-1032.png Icon Icon image
  Accessible without login Image file petale-jaune-700-871.png Icon Icon image
  Accessible without login Image file petale-violet-766-965.png Icon Icon image
  Accessible without login Image file petales.png Icon Icon image
  Accessible without login Image file snow.png Data Auxiliary data
  Accessible without login Image file un.png Icon Icon image
  Accessible without login Image file zero.png Icon Icon image

  Files folder image Files  /  examples  /  musique  
File Role Description
  Accessible without login Plain text file musique_credits.txt Data Auxiliary data

  Files folder image Files  /  extlib  
File Role Description
Files folder imageFitText (5 files)
Files folder imageiFSM (7 files, 3 directories)
Files folder imagejquery-ui (11 files, 2 directories)
Files folder imagejquery.path (4 files, 1 directory)
Files folder imagewaitForImages (7 files, 4 directories)
  Plain text file jquery-2.2.4.js Class Class source
  Plain text file jquery-3.2.0.min.js Class Class source

  Files folder image Files  /  extlib  /  FitText  
File Role Description
  Accessible without login Plain text file bower.json Data Auxiliary data
  Accessible without login Plain text file CONTRIBUTING.md Data Auxiliary data
  Accessible without login Plain text file example.html Example Example script
  Plain text file jquery.fittext.js Class Class source
  Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  extlib  /  iFSM  
File Role Description
Files folder imageExamples (17 files)
Files folder imageextlib (8 files)
Files folder imageimg (8 files)
  Accessible without login Plain text file .project Data Auxiliary data
  Plain text file iFSM.compressed.js Class Class source
  Accessible without login Plain text file iFSM.jquery.json Data Auxiliary data
  Plain text file iFSM.js Class Class source
  Accessible without login Plain text file LICENSE Lic. License text
  Accessible without login Plain text file package.json Data Auxiliary data
  Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  extlib  /  iFSM  /  Examples  
File Role Description
  Accessible without login Plain text file Example_0.html Example Example script
  Accessible without login Plain text file Example_1.html Example Example script
  Accessible without login Plain text file Example_2.html Example Example script
  Accessible without login Plain text file Example_AnalyseString.html Example Example script
  Accessible without login Plain text file Example_Basic.html Example Example script
  Accessible without login Plain text file Example_BouncingBall.html Example Example script
  Accessible without login Plain text file Example_BouncingBa...cting_to_mouse.html Example Example script
  Accessible without login Plain text file Example_Checkbox.html Example Example script
  Accessible without login Plain text file Example_DropdownMenu.html Example Example script
  Accessible without login Plain text file Example_HSM_calculator.html Example Example script
  Accessible without login Plain text file Example_PushPopState.html Example Example script
  Accessible without login Plain text file Example_Request.html Example Example script
  Accessible without login Plain text file Example_Rulers.html Example Example script
  Accessible without login Plain text file Example_Slideshow.html Example Example script
  Accessible without login Plain text file Example_StimultatorSimulator.html Example Example script
  Accessible without login Plain text file Example_Test_Bubbling.html Example Example script
  Accessible without login Plain text file Mastermind.html Example Example script

  Files folder image Files  /  extlib  /  iFSM  /  extlib  
File Role Description
  Plain text file jcanvas.min.js Class Class source
  Plain text file jquery-1.10.2.min.js Class Class source
  Plain text file jquery-1.11.1.min.js Class Class source
  Plain text file jquery.attrchange.js Class Class source
  Accessible without login Plain text file jquery.dorequesttimeout.js Example Example script
  Accessible without login Plain text file jquery.dotimeout.js Aux. Auxiliary script
  Plain text file jquery.touchSwipe.js Class Class source
  Plain text file Vector2.js Class Class source

  Files folder image Files  /  extlib  /  iFSM  /  img  
File Role Description
  Accessible without login Image file EnhancementRequest_closed.jpg Data Auxiliary data
  Accessible without login Image file EnhancementRequest_duplicate.jpg Data Auxiliary data
  Accessible without login Image file EnhancementRequest_opened.jpg Data Auxiliary data
  Accessible without login Image file EnhancementRequest_original.jpg Data Auxiliary data
  Accessible without login Image file EnhancementRequest_submitted.jpg Data Auxiliary data
  Accessible without login Image file image1.jpg Icon Icon image
  Accessible without login Image file image2.jpg Icon Icon image
  Accessible without login Image file image3.jpg Icon Icon image

  Files folder image Files  /  extlib  /  jquery-ui  
File Role Description
Files folder imageexternal (1 directory)
Files folder imageimages (6 files)
  Accessible without login Plain text file AUTHORS.txt Data Auxiliary data
  Accessible without login Plain text file index.html Example Example script
  Accessible without login Plain text file jquery-ui.css Data Auxiliary data
  Plain text file jquery-ui.js Class Class source
  Accessible without login Plain text file jquery-ui.min.css Data Auxiliary data
  Plain text file jquery-ui.min.js Class Class source
  Accessible without login Plain text file jquery-ui.structure.css Data Auxiliary data
  Accessible without login Plain text file jquery-ui.structure.min.css Data Auxiliary data
  Accessible without login Plain text file jquery-ui.theme.css Data Auxiliary data
  Accessible without login Plain text file jquery-ui.theme.min.css Data Auxiliary data
  Accessible without login Plain text file LICENSE.txt Doc. Documentation

  Files folder image Files  /  extlib  /  jquery-ui  /  external  
File Role Description
Files folder imagejquery (1 file)

  Files folder image Files  /  extlib  /  jquery-ui  /  external  /  jquery  
File Role Description
  Plain text file jquery.js Class Class source

  Files folder image Files  /  extlib  /  jquery-ui  /  images  
File Role Description
  Accessible without login Image file ui-icons_444444_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_555555_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_777620_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_777777_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_cc0000_256x240.png Icon Icon image
  Accessible without login Image file ui-icons_ffffff_256x240.png Icon Icon image

  Files folder image Files  /  extlib  /  jquery.path  
File Role Description
Files folder imagetest (2 files)
  Accessible without login Plain text file jquery.cssHooks.transform.js Aux. Auxiliary script
  Plain text file jquery.path.js Class Class source
  Accessible without login Plain text file README.markdown Doc. Documentation
  Plain text file Vector2.js Class Class source

  Files folder image Files  /  extlib  /  jquery.path  /  test  
File Role Description
  Accessible without login Plain text file .sprocket.js Aux. Auxiliary script
  Accessible without login Plain text file test.html Example Example script

  Files folder image Files  /  extlib  /  waitForImages  
File Role Description
Files folder imagedist (2 files)
Files folder imagelibs (1 file, 2 directories)
Files folder imagesrc (1 file)
Files folder imagetest (2 files)
  Accessible without login Plain text file .travis.yml Data Auxiliary data
  Accessible without login Plain text file bower.json Data Auxiliary data
  Accessible without login Plain text file CONTRIBUTING.md Data Auxiliary data
  Plain text file Gruntfile.js Class Class source
  Accessible without login Plain text file LICENSE-MIT Lic. License text
  Accessible without login Plain text file package.json Data Auxiliary data
  Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  extlib  /  waitForImages  /  dist  
File Role Description
  Plain text file jquery.waitforimages.js Class Class source
  Plain text file jquery.waitforimages.min.js Class Class source

  Files folder image Files  /  extlib  /  waitForImages  /  libs  
File Role Description
Files folder imagejquery (1 file)
Files folder imagequnit (2 files)
  Accessible without login Plain text file jquery-loader.js Aux. Auxiliary script

  Files folder image Files  /  extlib  /  waitForImages  /  libs  /  jquery  
File Role Description
  Plain text file jquery.js Class Class source

  Files folder image Files  /  extlib  /  waitForImages  /  libs  /  qunit  
File Role Description
  Accessible without login Plain text file qunit.css Data Auxiliary data
  Plain text file qunit.js Class Class source

  Files folder image Files  /  extlib  /  waitForImages  /  src  
File Role Description
  Plain text file jquery.waitforimages.js Class Class source

  Files folder image Files  /  extlib  /  waitForImages  /  test  
File Role Description
  Plain text file jquery.waitforimages_test.js Class Class source
  Accessible without login Plain text file waitforimages.html Example Example script

 Version Control Unique User Downloads Download Rankings  
 100%
Total:74
This week:0
All time:467
This week:3Up