Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues 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
Show stats 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]
(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
(do (dom/animate! orig-viewport
[#js {:opacity "100%"}
#js {:opacity "0"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation)))
#js {:opacity "0%"}
#js {:opacity "0%"}]
#js {:delay (/ (:duration animation) 3)
:duration (/ (* 2 (:duration animation)) 3)
:easing (name (:easing animation))})
(dom/animate! current-viewport
[#js {:opacity "0"}
[#js {:opacity "0%"}
#js {:opacity "100%"}
#js {:opacity "100%"}]
#js {:duration (:duration animation)
:easing (name (:easing animation))}))
:easing (name (:easing animation))}
#(st/emit! (dv/complete-animation))))
:slide
(case (:way animation)