diff --git a/src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss b/src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss index bc4498f56..89cfb5217 100644 --- a/src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss +++ b/src/components/pager/deckdeckgo-pager/deckdeckgo-pager.scss @@ -16,6 +16,7 @@ fill: none; stroke-width: var(--pager-stroke-inner-width, 1.8); stroke-linecap: round; + transition: stroke-dasharray 500ms cubic-bezier(0.23, 1, 0.320, 1); } .deckgo-pager-percentage { diff --git a/src/components/slides/deckdeckgo-slide.scss b/src/components/slides/deckdeckgo-slide.scss index 56d534efc..c88b79615 100644 --- a/src/components/slides/deckdeckgo-slide.scss +++ b/src/components/slides/deckdeckgo-slide.scss @@ -10,6 +10,9 @@ --slide-padding-bottom-default: 64px; --slide-padding-start-default: 64px; + --slide-reveal-transform: translateX(-4px); + --slide-reveal-duration: 200ms; + @media screen and (max-width: 1024px) { --slide-padding-top-default: 16px; --slide-padding-end-default: 32px; diff --git a/src/components/slides/deckdeckgo-slide.tsx b/src/components/slides/deckdeckgo-slide.tsx index acb3b0aa4..4183d9ab8 100644 --- a/src/components/slides/deckdeckgo-slide.tsx +++ b/src/components/slides/deckdeckgo-slide.tsx @@ -26,7 +26,12 @@ export class DeckdeckgoSlideUtils { } else { Array.from(elements).forEach((element: HTMLElement) => { element.style.setProperty('visibility', 'hidden'); + element.style.setProperty('transform', 'var(--slide-reveal-transform)'); + element.style.setProperty('opacity', '0'); + element.classList.add('deckgo-reveal'); + element.style.setProperty('transition', 'all var(--slide-reveal-duration) cubic-bezier(0.23, 1, 0.320, 1)'); + }); } }); @@ -45,6 +50,8 @@ export class DeckdeckgoSlideUtils { if (nextElement) { nextElement.style.setProperty('visibility', 'initial'); + nextElement.style.setProperty('opacity', '1'); + nextElement.style.setProperty('transform', 'none'); couldSwipe = false; } } @@ -67,6 +74,8 @@ export class DeckdeckgoSlideUtils { if (nextElement) { nextElement.style.setProperty('visibility', 'hidden'); + nextElement.style.setProperty('transform', 'var(--slide-reveal-transform)'); + nextElement.style.setProperty('opacity', '0'); couldSwipe = false; } }