Louv is a JavaScript treeshakable library that simplifies production of image or text complex transformations that can be animated and chained while ensuring they are smooth, responsive and cross-browser. Library consists of several modules: gallery (default import), scenarios, morphs and for advanced users: morphFactory, pictureFactory. In most simple words louv presents and hides sliced pictures (image or text) with certain scenarios that consisit of morphs. Louv's morphFactory takes complicated things out of developers head while giving space to concentrate on the art of geometrical and time aspects. Louv's pictureFactory is standalone module that will slice any image or text into molecules with usefull selectors that enable styling with css.
- design complex animated transformations: thanks to its built in morphs and morphFactory tool for new morphs creation louv is comfortable tool to design any kind of injected css based transformations, including ones that seems to be impossible.
- create gallery: louv has build in a gallery mechanism with methods: presentPicture, hidePicture, next, loop
- slice image or text into molecules: louv's picture factory is a tool to split html img element into canvas molecules or split html text into span elements containing words or chars.
- Smooth, efficient, optimized: Louv is written performance-wise - it uses hardware acceleration, injected single-class css and frame-q tasks scheduler to minimize repaints and reflows during animations which overal gives smooth framerate results.
- Developer friendly API: Louv delivers asynchronous control over animations progress at any stage, cross-instances state managment, window size recalculations, preloading styles options, lazy-loading with srcset or src detection, pausing add continuing, looping, breaking asynchronous processes and other. With morphFactory on the other hand write your own image or text morphing functions, take advantage of its built in options, and don't bother with any aspect of styles, html or event listeners injecting, awaiting animations, iterating thru particles, which all will be done for you.
- User friendly: Just write your scenario and Louv will play it.
- Ultimately asynchronous: In Louv everything is a promise that awaits asynchronous events like loading or animating.
- Several loading options: Louv is lazy-loading images by its own. But there is more to load and yuser can choos not to preload anything, to preload just pictures, to preload all calculated css for certain picture or to preload all items and all calculated css for them.
- Multi-instance: louvState is a single word of truth for all Louv instances in aspects where collisions are possible.
- Component-Based: Use components you wish: Louv, pictureFactory, morphFactory to create anything you wish.
- Cross-browser: Louv is compatibile even with IE11 when used with polyfills and consciousness of some css limitations. All major latest browsers are covered: Chrome, Safari, Edge, Firefox.
- Responsive: when window size changes louv recalculates pictures and css even when in the middle of asynchronous process.
Scenario object:
Scenario is core concept of the api simplification idea. It consits of 4 phases: 'present', 'wait', 'hide', 'waitAfter'. Each phase is an array of morphs which are implemented in given order - waiting one for another or in parallel.
Scenarios is an array of object that is obliatory part of LouvGallery (default import from louv) config but defaults to 'example' from scenarios.
Morph object:
Morph is an object to has 'duration' property and 'action' method which is some kind of transformation of the LouvPicture (image or text) which is using the fact that the content is splitted into molecules. Morph is made with morphFactory. Morph takes as first argument duration and as second one config object that can have many properties among which are those supplied by morphFactory (delay, parallel, oneByOne, to name a few) and those supplied by morphConfig feeding morphFactory function.
- LouvGallery (default import): the heart of louv - the engine that takes full advantage of all components to present images or texts. You can have many instances and nest one gallery inside of another.
- morphFactory: a factory function that lets you produce custom morph transforming LouvImage or LouvText. It has built in options like 'one-by-one' or 'line-by-line' transitions delay but also controlls injecting css, transition stack for every possible target (gallery, picture, molecule), morphs processing scope, listening to transitionend or alternatively setTimeout and calculating overall duration.
- pictureFactory: creates LouvPicture of certain type (image or text) with optionally sliced element derived from given source. Can be used as standalone to lazy-load and/or split source into molecules.
