docs: update styles and doc

apps/docs/src/app/core/collapsible/collapsible.directive.spec.ts

@@ -0,0 +1,8 @@
+import { CollapsibleDirective } from './collapsible.directive';
+
+describe('CollapsibleDirective', () => {
+  it('should create an instance', () => {
+    const directive = new CollapsibleDirective();
+    expect(directive).toBeTruthy();
+  });
+});

apps/docs/src/app/core/collapsible/collapsible.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, model, output } from '@angular/core';
+
+@Directive({
+  selector: '[appCollapsible]',
+  host: {
+    '(click)': 'onClick()',
+    '[attr.data-expanded]': 'expanded()',
+    '[attr.data-collapsed]': '!expanded()',
+  },
+  exportAs: 'appCollapsible',
+})
+export class CollapsibleDirective {
+  expanded = model(false);
+
+  expand = output();
+
+  collapse = output();
+
+  onClick() {
+    const nextValue = !this.expanded();
+    this.expanded.set(nextValue);
+    if (nextValue) {
+      this.expand.emit();
+    } else {
+      this.collapse.emit();
+    }
+  }
+}

apps/docs/src/app/core/header/header.component.html

@@ -12,7 +12,7 @@
     </a>
   </div>
 
-  <a href="https://github.com/ngverse/ui" target="_blank" class="ml-auto">
+  <a href="https://github.com/ngverse/motion" target="_blank" class="ml-auto">
     <button
       appButton
       icon

apps/docs/src/app/core/sidebar/sidebar.component.html

@@ -2,28 +2,47 @@
   <nav>
     @for (route of routes; track $index) {
       <ul class="list-none pl-0">
-        <li class="mb-3 font-medium">{{ route.name }}</li>
-        @if (route.children) {
-          @for (link of route.children; track $index) {
-            <li>
-              <app-sidebar-link [link]="link"></app-sidebar-link>
-            </li>
-          }
-        }
-        @if (route.groups) {
-          @for (group of route.groups; track $index) {
-            <li class="pl-4">
-              <ul class="list-none pl-0">
-                <li class="mb-3 font-medium">{{ group.name }}</li>
-                @for (link of group.children; track $index) {
+        <li class="mb-3">
+          <button
+            appCollapsible
+            #collapsible="appCollapsible"
+            class="flex w-full cursor-pointer items-center justify-between border-b border-slate-300 pb-3 font-medium"
+          >
+            {{ route.name }}
+            <ng-icon
+              [class.rotate-180]="collapsible.expanded()"
+              [svg]="ARROW_DOWN"
+              size="24"
+              class="transition-transform"
+            ></ng-icon>
+          </button>
+
+          @if (!collapsible.expanded()) {
+            <ul @collapseOnLeave @expandOnEnter>
+              @if (route.children) {
+                @for (link of route.children; track $index) {
                   <li>
                     <app-sidebar-link [link]="link"></app-sidebar-link>
                   </li>
                 }
-              </ul>
-            </li>
+              }
+              @if (route.groups) {
+                @for (group of route.groups; track $index) {
+                  <li class="pl-4">
+                    <ul class="list-none pl-0">
+                      <li class="mb-3 mt-4 font-medium">{{ group.name }}</li>
+                      @for (link of group.children; track $index) {
+                        <li>
+                          <app-sidebar-link [link]="link"></app-sidebar-link>
+                        </li>
+                      }
+                    </ul>
+                  </li>
+                }
+              }
+            </ul>
           }
-        }
+        </li>
       </ul>
     }
   </nav>

apps/docs/src/app/core/sidebar/sidebar.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+import { matKeyboardArrowDown } from '@ng-icons/material-icons/baseline';
+import { collapseOnLeave, expandOnEnter } from '@ngverse/motion/generalcss';
+import { CollapsibleDirective } from '../collapsible/collapsible.directive';
 import { SidebarLinkComponent } from './sidebar-link/sidebar-link.component';
 
 interface SidebarRoot {
@@ -245,10 +249,12 @@ export function getAllSidebarLinks() {
 
 @Component({
   selector: 'app-sidebar',
-  imports: [SidebarLinkComponent],
+  imports: [SidebarLinkComponent, NgIcon, CollapsibleDirective],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.css',
+  animations: [collapseOnLeave(), expandOnEnter()],
 })
 export class SidebarComponent {
   routes: SidebarRoot[] = SIDEBAR_ROUTES;
+  ARROW_DOWN = matKeyboardArrowDown;
 }

apps/docs/src/app/core/source-code/source-code.component.html

@@ -6,7 +6,7 @@
     <button
       [cdkCopyToClipboard]="code()"
       (click)="copy()"
-      class="absolute right-1 top-2 cursor-pointer text-slate-500"
+      class="absolute right-1 top-2 hidden cursor-pointer text-slate-500 lg:block"
     >
       @if (copied()) {
         <svg

apps/docs/src/app/pages/home-page/home-page.ts

@@ -1,5 +1,6 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
 import { RouterLink } from '@angular/router';
 import { twisterInDownOnEnter } from '@ngverse/motion/magiccss';
 import { ProjectNameComponent } from '../../core/project-name/project-name.component';
@@ -15,4 +16,34 @@ import { ProjectNameComponent } from '../../core/project-name/project-name.compo
     }),
   ],
 })
-export class HomePageComponent {}
+export class HomePageComponent {
+  private _document = inject(DOCUMENT);
+  title = inject(Title);
+  meta = inject(Meta);
+
+  constructor() {
+    const title = `Home | @ngverse/motion`;
+    const description = `home page for angular animations library  @ngverse/motion`;
+    this.title.setTitle(title);
+
+    this.meta.updateTag({
+      name: 'description',
+      content: description,
+    });
+
+    this.meta.addTags([
+      { property: 'og:title', content: title },
+      {
+        property: 'og:description',
+        content: description,
+      },
+      {
+        property: 'og:image',
+        content: 'https://motion.ngverse.dev/logo.png',
+      },
+      { property: 'og:image:alt', content: '@ngverse/motion logo' },
+      { property: 'og:url', content: this._document.location.href },
+      { property: 'og:type', content: 'website' },
+    ]);
+  }
+}

apps/docs/src/app/pages/motion-page/motion-page.html

@@ -1,6 +1,6 @@
-<div class="container mx-auto w-[1204px]">
+<div class="container mx-auto px-5">
   @if(motion();as motion){
-  <h1 class="mb-3 text-7xl">{{motion.name}}</h1>
+  <h1 class="mb-3 text-5xl lg:text-7xl">{{motion.name}}</h1>
   @if(motion.href){
   <a
     target="_blank"
@@ -41,19 +41,23 @@ <h1 class="mb-3 text-7xl">{{motion.name}}</h1>
   <h2 class="mt-8 border-b border-b-slate-300 pb-2 text-3xl">Triggers</h2>
   @for (trigger of triggers; track $index) {
   <div class="my-6">
-    <p class="mb-2 text-xl">
+    <div
+      class="mb-2 flex flex-col flex-wrap gap-2 text-xl lg:flex-row lg:items-center"
+    >
       {{triggerImportName(trigger)}}
-      <span
-        class="rounded-xl border border-slate-400 px-3 text-base text-slate-700"
-      >
-        {{triggerAnimateType(trigger)}}</span
-      >
-      <span
-        class="ml-1 rounded-xl border border-slate-400 px-3 text-base text-slate-700"
-      >
-        {{triggerUsageName(trigger)}}</span
-      >
-    </p>
+      <div class="flex items-center">
+        <span
+          class="rounded-xl border border-slate-400 px-3 text-base text-slate-700"
+        >
+          {{triggerAnimateType(trigger)}}</span
+        >
+        <span
+          class="ml-1 rounded-xl border border-slate-400 px-3 text-base text-slate-700"
+        >
+          {{triggerUsageName(trigger)}}</span
+        >
+      </div>
+    </div>
     <app-source-code [code]="triggerImportCode(trigger)"></app-source-code>
   </div>
   } } }

apps/docs/src/app/pages/motion-page/motion-page.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 
 import { Platform } from '@angular/cdk/platform';
+import { Meta, Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { NgIcon } from '@ng-icons/core';
 import { matOpenInNew, matReplay } from '@ng-icons/material-icons/baseline';
@@ -37,6 +38,8 @@ export class MotionPageComponent implements AfterViewInit {
   REPLAY_ICON = matReplay;
   EXTERNAL_LINK = matOpenInNew;
   private _document = inject(DOCUMENT);
+  title = inject(Title);
+  meta = inject(Meta);
 
   private _activatedRoute = inject(ActivatedRoute);
 
@@ -74,6 +77,32 @@ export class MotionPageComponent implements AfterViewInit {
     return triggers;
   });
 
+  updateMeta(motionName: string, libraryName: string) {
+    const title = `${motionName} ${libraryName} | @ngverse/motion`;
+    const description = `${motionName} animation from ${libraryName} library in @ngverse/motion`;
+    this.title.setTitle(title);
+    if (motionName) {
+      this.meta.updateTag({
+        name: 'description',
+        content: description,
+      });
+    }
+    this.meta.addTags([
+      { property: 'og:title', content: title },
+      {
+        property: 'og:description',
+        content: description,
+      },
+      {
+        property: 'og:image',
+        content: 'https://motion.ngverse.dev/logo.png',
+      },
+      { property: 'og:image:alt', content: '@ngverse/motion logo' },
+      { property: 'og:url', content: this._document.location.href },
+      { property: 'og:type', content: 'website' },
+    ]);
+  }
+
   triggerImportCode(type: TRIGGER_TYPES) {
     return `import { ${this.triggerImportName(
       type
@@ -110,6 +139,7 @@ export class MotionPageComponent implements AfterViewInit {
       const playable = this.playable()?.nativeElement;
       if (libraryName && motionName && playable) {
         this.fillMotion(libraryName, motionName, playable);
+        this.updateMeta(motionName, libraryName);
       }
     });
   }
@@ -120,6 +150,7 @@ export class MotionPageComponent implements AfterViewInit {
       const motion = library.motions.find((m) => m.name === motionName);
       if (motion) {
         this.motion.set(motion);
+        this.libraryName.set(libraryName);
         const animationFactory = this.animationBuilder.build(motion.motion());
         // this.animationPlaher?.destroy();
         this.animationPlaher = animationFactory?.create(playable);

libs/motion/animatecss/src/lib/fading_entrances/fade-in-down.ts

@@ -23,7 +23,12 @@ const name = `fadeInDown`;
  */
 export const fadeInDown = createMotionFromAnimate<fadeInDownMotionOptions>(
   keyframes([
-    style({ opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0 }),
+    style({
+      visibility: 'visible',
+      opacity: 0,
+      transform: 'translate3d(0, -100%, 0)',
+      offset: 0,
+    }),
     style({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 }),
   ]),
   defaults,

libs/motion/generalcss/src/lib/expand.ts

@@ -30,17 +30,14 @@ export const expand = createMotionFromAnimate<expandMotionOptions>(
   keyframes([
     style({
       height: '{{startHeight}}',
-      visibility: 'hidden',
-      overflow: 'hidden',
-      easing: 'ease-out',
       offset: 0,
+      overflow: 'hidden',
     }),
     style({
       height: AUTO_STYLE,
       visibility: AUTO_STYLE,
-      overflow: 'hidden',
-      easing: 'ease-out',
       offset: 1,
+      overflow: 'hidden',
     }),
   ]),
   defaults,