From 8b78c83b6cd967ca0909ac838d405bc4c7fd7fe6 Mon Sep 17 00:00:00 2001 From: Coby Benveniste Date: Thu, 9 Jan 2025 19:43:51 +0200 Subject: [PATCH] README --- README.md | 17 ++++++++++++++++- mix.exs | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ea09cc8..487d2f0 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,21 @@ A component and hook for FLIP animations of elements within LiveView. +## How To Use + +A demo project is provided here in the demo folder, it is a simple demo app to display the capability that the component provides. You can visit [live-flip.fly.dev](https://live-flip.fly.dev) to see it in action. The animations are fully automated by the wrapper, and the class changes are fully driven by the server. + +The easiest way to start is to install (see the below Installation section), and add the Flip hook to your hooks in your app's `app.js` file. Once you have that, you can wrap any element in the `flip_wrap` component and receive all the animations for free! + +### Caveats + +As of now (version 0.1.0), animations and FLIPs are implemented for the following: +- Position changes +- Width changes +- Height changes + +However, since the hook utilizes the Web Animations API and transforms, it is unable to handle if the element has transforms applied on it (yet). This is something that I want to tackle in following releases, as I get a better handle of how to compose transforms that are already on an element, with incoming transforms during an update and the transforms necessary for the FLIP to work. + ## Installation If [available in Hex](https://hex.pm/docs/publish), the package can be installed @@ -12,7 +27,7 @@ by adding `live_flip` to your list of dependencies in `mix.exs`: ```elixir def deps do [ - {:live_flip, ">= 0.0.0"} + {:live_flip, "~> 0.1.0"} ] end ``` diff --git a/mix.exs b/mix.exs index fe0b30e..56b4e00 100644 --- a/mix.exs +++ b/mix.exs @@ -1,7 +1,7 @@ defmodule LiveFlip.MixProject do use Mix.Project - @version "0.1.0" + @version "0.1.0-rc.1" def project do [