3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix viewer background visible on transition between frames

Browse source
This commit is contained in:
Aitor 2024-03-12 15:18:42 +01:00 • committed by Alonso Torres
parent 3b0148046b
commit 8ee79e5d7c
1 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -316,18 +316,37 @@
[animation current-viewport orig-viewport current-size orig-size wrapper-size] [animation current-viewport orig-viewport current-size orig-size wrapper-size]
(case (:animation-type animation) (case (:animation-type animation)
;; Why use three keyframes instead of two?
;; If we use two keyframes, the first frame
;; will disappear while the second frame
;; is still appearing.
;; ___ ___
;; \/
;; ___/\___
;; ^ in here we have 50% opacity of both frames so the background
;; is visible.
;;
;; This solution waits until the second frame
;; has appeared to disappear the first one.
;; ________
;; /\
;; _/ \___
;; ^ in here we have 100% opacity of the first frame and 0% opacity.
:dissolve :dissolve
(do (dom/animate! orig-viewport (do (dom/animate! orig-viewport
[#js {:opacity "100%"} [#js {:opacity "100%"}
#js {:opacity "0"}] #js {:opacity "0%"}
#js {:duration (:duration animation) #js {:opacity "0%"}]
:easing (name (:easing animation))} #js {:delay (/ (:duration animation) 3)
#(st/emit! (dv/complete-animation))) :duration (/ (* 2 (:duration animation)) 3)
:easing (name (:easing animation))})
(dom/animate! current-viewport (dom/animate! current-viewport
[#js {:opacity "0"} [#js {:opacity "0%"}
#js {:opacity "100%"}
#js {:opacity "100%"}] #js {:opacity "100%"}]
#js {:duration (:duration animation) #js {:duration (:duration animation)
:easing (name (:easing animation))})) :easing (name (:easing animation))}
#(st/emit! (dv/complete-animation))))
:slide :slide
(case (:way animation) (case (:way animation)