benvp / live_motion Goto Github PK

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

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"""

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!