{"id":26674827,"url":"https://github.com/intersel/ifsmanimation","last_synced_at":"2025-07-27T20:42:06.536Z","repository":{"id":25095900,"uuid":"28516929","full_name":"intersel/iFSMAnimation","owner":"intersel","description":"iFSMAnimation allows to create simple HTML5 animations in responsive design easily","archived":false,"fork":false,"pushed_at":"2021-12-29T01:05:36.000Z","size":4595,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T02:41:25.492Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"stil4m/elm-analyse","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intersel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-12-26T17:34:18.000Z","updated_at":"2023-06-10T11:04:06.000Z","dependencies_parsed_at":"2022-08-23T17:51:02.817Z","dependency_job_id":null,"html_url":"https://github.com/intersel/iFSMAnimation","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/intersel/iFSMAnimation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersel%2FiFSMAnimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersel%2FiFSMAnimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersel%2FiFSMAnimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersel%2FiFSMAnimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intersel","download_url":"https://codeload.github.com/intersel/iFSMAnimation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersel%2FiFSMAnimation/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266081240,"owners_count":23873511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-26T02:39:24.909Z","updated_at":"2025-07-20T07:05:14.931Z","avatar_url":"https://github.com/intersel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"iFSMAnimation\n=============\n\nCreate elegant HTML5 animations in responsive design easily and quickly, with only one line of javascript code!\n\nYou describe the DOM objects that you want to animate, attached them to the animation machine, and let's animate!\n\nTo use it, have a look on the examples provided...\n\nWhat is iFSMAnimation ?\n=======================\n\niFSMAnimation is javascript library that allows to create animations from an html description.\n\nDemos\n=====\n\n* http://www.macofi.fr/en/approach/\n* https://www.intersel.fr/projects/franceurbaine/\n* https://www.intersel.fr/projects/voeux2017/\n* https://www.intersel.fr/en/other-pages/github/ifsm-animation-jquery-plugin.html - demos of the \"examples\" directory\n\n\nGetting started\n===============\n\nMainly, you need to create:\n* 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.\n* at the end, add a little script to start the animation...\n* that's it! You've got an animation that is RESPONSIVE ! Without having to know how to write javascript code lines...\n\nFirst Example\n=============\n\nThe following example is a full animation that displays four pictures where different animations are applied. You could use this example as a starter template...\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n        \u003chead\u003e\n                \u003cscript src=\"../extlib/jquery-3.2.0.min.js\"\u003e\u003c/script\u003e\n                \u003cscript src=\"../extlib/iFSM/iFSM.compressed.js\"\u003e\u003c/script\u003e\n                \u003cscript src=\"../iFSMAnimation.js\"\u003e\u003c/script\u003e\n                \u003cstyle\u003e\n                        article {opacity:0;}\n                \u003c/style\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n                \u003cdiv id=\"animation\"\u003e\n\n                \u003csection id=\"animation-objects\"\n                        data-delay-before-restart=\"1000\"\n                        data-box-responsive=\"true\"\n                        data-box-size-reference=\"700,700\"\n                                data-div-class=\"animationDiv\"\n                                data-loader-class=\"animationLoader\"\n                \u003e\n                        \u003carticle id=\"HappyNewYear_B\"\n                                data-animation=\"animate,300,90,220\"\n                                data-enter-animation=\"display, 1000, 90, 104, 90, 104\"\n                                data-exit-animation=\"smoothHide,500,90,350\"\n                        \u003e\n                                \u003cimg src=\"images/B.png\"\u003e\n                        \u003c/article\u003e\n                        \u003carticle id=\"HappyNewYear_O\"\n                                data-animation=\"specialAnimate,300,{left:150;top:150;width:100}\"\n                                data-enter-animation=\"display,200,170,104,170,104,easeInOutElastic\"\n                                data-exit-animation=\"specialAnimate,300,{left:150;top:270;opacity:0;width:50}\"\n                        \u003e\n                                \u003cimg src=\"images/O.png\"\u003e\n                        \u003c/article\u003e\n                        \u003carticle id=\"HappyNewYear_N3\"\n                                data-animation=\"dummy\"\n                                data-enter-animation=\"display,200,262,220,262,220\"\n                                data-exit-animation=\"smoothHide,100,262,350\"\n                        \u003e\n                                \u003cimg src=\"images/N.png\"\u003e\n                        \u003c/article\u003e\n                        \u003carticle id=\"HappyNewYear_star\"\n                                data-animation=\"rotateNoWait,2000,3060\"\n                                data-enter-animation=\"display,1000,160,190,160,90,easeOutBounce\"\n                                data-exit-animation=\"smoothHide,100,160,260\"\n                        \u003e\n                                \u003cimg src=\"images/etoile.png\"\u003e\n                        \u003c/article\u003e\n                \u003c/section\u003e\n                \u003c/div\u003e\n                \u003cscript\u003e\n                        $(document).ready(function() {\n                                //initialize and start the general animation\n                                $('#animation-objects').iFSMAnimation();\n                        });\n                \u003c/script\u003e\n        \u003c/body\u003e\n\u003c/html\u003e\n```\n\nGeneral process\n===============\n\nAn animation is defined by a main animation object attached to a container such a 'section'.\n\nWithin the container, you define the different animated objects attached/described by a subcontainer that is by default an 'article'.\n\nTake care to **give an id to each object you will animate**.\n\nThe animation starts by calling each animated objects using the 'data-enter-animation' and just after 'data-animation' attributes to animate them.\n\nWhen all objects were animated, the animation applies the 'data-exit-animation' definition of every animated objects to ending their animations, and then loops back.\n\nAttributes on the main container\n===============================\ndata-delay-before-restart\n-------------------------\nThe 'data-delay-before-restart' attribute allows to define the delay before the animation restarts.\n\nExample:\n```html\n\u003csection id=\"animation-objects\" data-delay-before-restart=\"10000\"\u003e\n```\n\ndata-box-responsive\n-------------------\nBoolean, if 'true', the animation will be 'responsive'.\nLimitations known with using 'specialAnimate'.\n\nExample:\n```html\n\u003csection id=\"animation-objects\" data-box-responsive=\"true\"\u003e\n```\n\n\ndata-box-size-reference\n-----------------------\n\n\"BoxWidth,BoxHeight\" give the used dimensions as reference for the position of the animated objects. Useful in Responsive mode.\n\nExample:\n```html\n\u003csection id=\"animation-objects\" data-box-size-reference=\"551,551\" \u003e\n```\n\ndata-keep-height-visible\n------------------------\nBoolean, if 'true', the width and height will be fixed in order that the animation is fully shown on the window display.\nExample:\n```html\n\u003csection id=\"animation-objects\" data-keep-height-visible=\"true\"\u003e\n```\n\n\ndata-div-class\n--------------\nActually, a 'div' embeds the animation. It is possible to define the class that should be used on this div.\n\nExample:\n```html\n\u003csection id=\"animation-objects\" data-div-class=\"animation\"\u003e\n```\n\ndata-loader-class\n-----------------\n\nA loader may be set during initialization.\n\nTo display a loader, just indicate the class to use with the data-loader-class attribute.\n\nExample:\n```html\n\u003csection id=\"animation-objects\" data-loader-class=\"myLoaderClass\"\u003e\n```\n\n\nAttributes on a sub container\n=============================\n\ndata-enter-animation / data-animation / data-exit-animation\n-----------------------------------------------------------\n\n  These attributes define the animation of the object.\n\n  The available animation are:\n   * dummy - non animation\n   * animate - animate article from current position or startposition to destination\n     *  duration\n     *  destination-left\n     *  destination-top\n     *  startposition-left - optional\n     *  startposition-top - optional\n     *  easing function - see http://easings.net/fr - optional\n   * display - display article (opacity set to 1) with animation from current position or startposition to destination\n     *  duration\n     *  destination-left\n     *  destination-top\n     *  startposition-left - optional\n     *  startposition-top - optional\n     *  easing function - see http://easings.net/fr - optional\n   * smoothHide - display article (opacity set to 0) with animation from current position or startposition to destination\n     *  duration\n     *  destination-left\n     *  destination-top\n     *  startposition-left - optional\n     *  startposition-top - optional\n     *  easing function - see http://easings.net/fr - optional\n   * rotate - rotate article\n     *  duration\n     *  angle\n   * loop - loop animation\n     *  duration\n     *  destination-left\n     *  destination-top\n     *  startposition-left - optional\n     *  startposition-top - optional\n     *  loops number - optional default:infinite - give the number of loops\n     *  loop back delay - optional default: duration - give the delay to go to the initial position\n   * specialAnimate, specialAnimateNoWait\n     *  duration\n     *  animation description object as in jQuery. ex: {left: 20;top:100;width:300}\n     *  void\n     *  void\n     *  void\n     *  easing function - see http://easings.net/fr - optional\n   * animateNoWait - same as animate but does not wait the end of animation to start the next animation\n   * displayNoWait - same as display but does not wait the end of animation to start the next animation\n   * smoothHideNoWait - same as smoothHide but does not wait the end of animation to start the next animation\n   * rotateNoWait - same as rotate but does not wait the end of animation to start the next animation\n\nStart the animation with javascript\n===================================\nTo start the animation, you will need to add this script:\n```javascript\n\u003cscript\u003e\n$(document).ready(function() {\n\t//initialize and start the general animation\n\t$('section').iFSMAnimation();\n)};\n\u003c/script\u003e\n```\n\nYou can define some options:\nanimationSequence\n-----------------\narray, defines the order of animation of the objects. By default, the order is the one found in the DOM.\n\nanimatedObjectDefinition\n------------------------\nstring, gives the HTML tag to find the animated objects (in css/jquery format).\n\nexamples:\n---------\n```javascript\nvar myAnimationSequence=['#myAnimObj2','#myAnimObj1'];\n$('#animation-objects').iFSMAnimation({animationSequence:myAnimationSequence})\n$('#animation2').iFSMAnimation({animatedObjectDefinition:'div',debug:true});\n```\n\n\nCSS\n===\n\nIn order to have the animation playing correctly, you can use the following css as a start:\n\n```css\nbody {\n\tmargin\t\t: 0px;\n\tpadding\t\t: 0px;\n\ttext-align\t: center;\n\t}\n/*for the div that embeds your animation section, will center it*/\n#animation, .animation {\n\tmargin : 0 20% 30px 20%;\n}\n/*for the main animation section container, let's have a background*/\n#animation-objects,.animated_section {\n\tbackground-color:\t#1c3970;\n}\n/*for the animated objects (here, all objects will start as hidden at beginning - opacity=0)*/\nsection#animation-objects article {\n\topacity\t\t: 0;\n}\n```\n\n\nExamples\n========\n\nThe 'examples' folder gives you some examples on how to animate your DOM objects with iFSMAnimation...\n\nLIBRARY DEPENDENCIES\n====================\nTo work properly, you need to include the following javascript library:\n* jQuery (\u003e= 3.2) `\u003cscript type=\"text/javascript\" src=\"extlib/jquery-1.10.2.min.js\"\u003e\u003c/script\u003e`\n* [iFSM by intersel](https://github.com/intersel/iFSM/)\n  * this library manages finite state machines and needs these libraries:\n    * doTimeout by [\"Cowboy\" Ben Alman](http://benalman.com/projects/jquery-dotimeout-plugin/)\n\t  * this library brings some very usefull feature on the usual javascript setTimeout function like Debouncing, Delays \u0026 Polling Loops, Hover Intent...\n\t  * `\u003cscript type=\"text/javascript\" src=\"extlib/jquery.dotimeout.js\"\u003e\u003c/script\u003e`\n    * attrchange by Selvakumar Arumugam](http://meetselva.github.io/attrchange/)\n\t  * a simple jQuery function to bind a listener function to any HTML element on attribute change\n\t  * `\u003cscript type=\"text/javascript\" src=\"extlib/jquery.attrchange.js\"\u003e\u003c/script\u003e`\n* [waitForImages](http://github.com/alexanderdickson/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.\n* [jQuery UI](http://api.jqueryui.com/easings/) may be used to apply some effect on the animated objects as swing, easing, ...\n* [jquery.path](https://github.com/weepy/jquery.path) may be used to defined arc and bezier for the path of animated objects.\n* [FitText.js](http://fittextjs.com/) may be used to have 'responsive' texts\n\nIf you need to do some specific animations, these libraries may be useful:\n  * [jquery.path](https://github.com/weepy/jquery.path) - allows to animate objects following a path as an arc or a curve\n\nFAQ\n===\n\n* my objects don't seem to be correctly positionned on the Y axe.\n  * Did you correctly set the \"`\u003c!DOCTYPE html\u003e`\" at the beginning of your file? without it, strange behaviour occurs!\n* iFSMAnimation loads all its jquery libraries... but they are still loaded...\n  * you can empty the list of the libraries to load using the option 'ANIMATION_NEEDED_SCRIPTS':\n\n```javascript\n$('#myAnimation').iFSMAnimation({\t \n    ANIMATION_NEEDED_SCRIPTS:[]\n});\n```\n\nStill some questions?\n=====================\nIf you have questions or unsolved problems, you can have a look on the our [FAQs](https://github.com/intersel/iFSMAnimation/wiki)\nor leave a message on the [Issue board](https://github.com/intersel/iFSMAnimation/issues).\n\n\nContact\n=======\nIf you have any ideas, feedback, requests or bug reports, you can reach me at github@intersel.org,\nor via my website: http://www.intersel.fr\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintersel%2Fifsmanimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintersel%2Fifsmanimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintersel%2Fifsmanimation/lists"}