chore(components): update slide animations (#4241)

swisspost · Dec 13, 2024 · 0368b84 · 0368b84
1 parent 140ba57
commit 0368b84
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/components/src/animations/slide.ts b/packages/components/src/animations/slide.ts
@@ -2,10 +2,10 @@ const easing: string = 'ease';
 const duration: number = 500;
 const fill: FillMode = 'forwards';
 
-export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animation => {
+export const slideUp = (el: HTMLElement, translateSize: string = '100%'): Animation => {
   return el.animate(
     [
-      { transform: `translateY(-${translateSize})` }, // Starting position (no translation)
+      { transform: `translateY(${translateSize})` }, // Starting position (no translation)
       { transform: 'translateY(0)' }, // End position
     ],
     {
@@ -16,11 +16,11 @@ export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animat
   );
 };
 
-export const slideDown = (el: HTMLElement, translateSize: string = '8rem'): Animation => {
+export const slideDown = (el: HTMLElement, translateSize: string = '100%'): Animation => {
   return el.animate(
     [
       { transform: 'translateY(0)' }, // Starting position (no translation)
-      { transform: `translateY(-${translateSize})` }, // End position
+      { transform: `translateY(${translateSize})` }, // End position
     ],
     {
       duration: duration,

diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.scss b/packages/components/src/components/post-back-to-top/post-back-to-top.scss
@@ -8,7 +8,7 @@
 tokens.$default-map: components.$post-floating-button;
 
 :host {
-  --post-floating-button-translate-y: #{tokens.get('post-floating-button-translate-y')};
+  --post-floating-button-translate-y: calc(-1 * #{tokens.get('post-floating-button-translate-y')});
   position: fixed;
   top: tokens.get('post-floating-button-position-top');
   right: tokens.get('post-floating-button-position-right');

diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.tsx b/packages/components/src/components/post-back-to-top/post-back-to-top.tsx
@@ -21,11 +21,11 @@ export class PostBackToTop {
 
   private translateY: string;
 
-  isBelowFold(): boolean {
+  private isBelowFold(): boolean {
     return window.scrollY > window.innerHeight;
   }
 
-  handleScroll = () => {
+  private handleScroll = () => {
     this.belowFold = this.isBelowFold();
   };
 
@@ -39,7 +39,7 @@ export class PostBackToTop {
     }
   }
 
-  scrollToTop() {
+  private scrollToTop() {
     window.scrollTo({
       top: 0,
     });
@@ -72,7 +72,7 @@ export class PostBackToTop {
       .getPropertyValue('--post-floating-button-translate-y');
 
     if (!this.belowFold) {
-      this.el.style.transform = `translateY(-${this.translateY})`;
+      this.el.style.transform = `translateY(${this.translateY})`;
     }
 
     // Initial load