Gilou06
JS.transition blocks Liveview until time has elapsed
Hi there,
I’m adding an animation to an existing DOM object. To do so I use JS.transition to add a temp CSS class, the call is initiated from the server with a push_event.
Everything looked fine at first, with default 200ms transition time.
But it was not long enough since the animation lasts several seconds.
It needs 4s to complete the animation.
So I bumped the transition time to 4000.
It is all nice now, only Liveview is frozen during 4s. It will buffer user clicks for that duration and then will proceed.
I can’t have a frozen UI for 4s of course.
Do you know if there is a way around this behavior without breaking the “DOM awareness” of JS.transition ?
Thanks
Jean-yves
Marked As Solved
Gilou06
Hi,
I ended up using greensock GSAP libraries. They play along well with LiveView and handle well animation interruptions.
I basically fire event from server with push_event, catch on the client with code declared in app.ps
Example :
window.addEventListener("phx:gsap", ({ detail }) => {
var tl = gsap.timeline();
tl.from(detail.zoom, { scale: 1, duration: 0.7 })
tl.fromTo(detail.zoom, { scale: 1.3 }, { scale: 1, duration: 1 })
tl.fromTo(detail.wiggle, { opacity: 0, scale: 2 }, { opacity: 1, scale: 1, duration: 0.5, repeat: 1 });
})
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"