benvp / live_motion Goto Github PK
View Code? Open in Web Editor NEWHigh performance animation library for Phoenix LiveView
License: MIT License
High performance animation library for Phoenix LiveView
License: MIT License
I'm having trouble following the README to add this to a project.
Example:
import { createLiveMotion } from 'live_motion';
const { hook: motionHook, handleMotionUpdates } = createLiveMotion();
let Hooks = Object.assign({},
SortableOption.hooks,
Scrolling.hooks,
AudioMp3.hooks,
...motionHook,
)
Errors on page load with JS console error: "Uncaught TypeError: Found non-callable @@iterator"
When I try expressing it more like how I expect it to be, it works.
let Hooks = Object.assign({},
SortableOption.hooks,
Scrolling.hooks,
AudioMp3.hooks,
motionHook
)
Just a simple update to README.md?
Hi,
First off, I love this effort to make animations easier in LiveView.
I wanted to ask if a feature to hook into animation lifecycle events is something that would be in scope of this library? I'm thinking an API that would look like the following:
<LiveMotion.motion id="popcorn" on_animation_end="popcorn_animation_end" animate={[rotate: 360]}>
<span>๐ฟ</span>
</LiveMotion.motion>
Then in your LiveView you can define an event handler for "popcorn_animation_end":
def handle_event("popcorn_animation_end", _params, socket) do
# LiveView code that removes the popcorn element
end
One challenge with this is probably going to be making it flexible to use from within live components, where you would need to specify phx-target={@myself}
in the eex to get handle_event
messages passed to your component.
Would be happy to try to contribute this change if you could point me in the right direction
live_motion/priv/static/live_motion.js
Line 881 in d9f5616
When settings a server-side attribute such as rotate: @rotate
, upon update the updated
function is called and the js throws an error:
Uncaught TypeError: this.animate is not a function
.
animate()
does not exist. Changing animate()
to maybeAnimate()
seems to work.
Elixir 1.14
Phoenix 1.7.2
Im following all the instructions from README but library does not seem to work correctly.
Im trying to use Popcorn share example and on first page render the animation is triggered but then no effect when clicking on button.
No JS console warnings nor in Elixir console.
How can I debug it ?
I have done the setup as instructed in the readme, but I am unable to test any of the examples provided, in my application. I am getting this error on the console:
[LiveMotion] Motion element not found. Did you forget to make your target a LiveMotion.motion component?
This is my code in the LiveView Component:
`
import LiveMotion, only: [motion: 1]
def render(assigns) do
~H"""
<button type="button" phx-click={LiveMotion.JS.hide(to: "#popcorn")}> Eat popcorn
const { hook: motionHook, handleMotionUpdates } = createLiveMotion();
const Hooks = {_, _, motionHook};
`
I've noticed that the animations I've implemented would flash like a regular div on static rendering, before the socket is connected. I solved this by interpolating invisible
into class if socket is not connected. But I feel this is a hackish solution. I'm wondering is this normal and expected? Am I doing something wrong?
Hey again!
I was wondering if it was possible to style the wrapper div rendered by the LiveMotion.motion
component via class selectors. The example below isn't working but I was imagining something like this:
<LiveMotion.motion
class="absolute w-full z-10"
...
/>
Or a solution to be more generic than just supporting class
:
<LiveMotion.motion
opts={[class: "absolute w-full z-10", "some-other-attribute": "some-attribute-value"]}
...
/>
I want to collaborate with the presence branch
. I want to use this for page transitions, and I love what I see on the Elixir forum.
I tried using live motion on phoenix 1.7 and there was compatibility issues, so I forked the repo and updated phoenix. It worked.
Will this repo be updated for new phoenix?
Hi!
Sorry for the barrage of issues, but I was wondering if there is a way to trigger the exit animation of a component via toggling a prop on the LiveMotion.motion
component?
The docs outline a way to do trigger exit animations via a LiveMotion.JS
call, but I can't seem to find a prop that will allow me trigger the exit animation by toggling the value of a prop.
Looking for something along the lines of:
<LiveMotion.motion
id="foo"
show={@some_state_on_my_socket}
animate={[y: 20, opacity: [0, 1]]}
exit={[y: 0, opacity: [1, 0]]}
transition={[duration: 1.5]}
>
where toggling @some_state_on_my_socket
to true or false would trigger the animate and exit animations respectively.
Is this supported? Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.