53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { Injectable } from '@angular/core';
|
|
import gsap from 'gsap';
|
|
|
|
@Injectable({
|
|
providedIn: 'root',
|
|
})
|
|
export class ModalAnimationService {
|
|
private readonly defaultDuration = 0.3;
|
|
private readonly defaultEase = 'power2.out';
|
|
|
|
openModal(modalElement: HTMLElement, overlayElement: HTMLElement) {
|
|
gsap.set(overlayElement, { opacity: 0, display: 'block' });
|
|
gsap.set(modalElement, {
|
|
opacity: 0,
|
|
scale: 0.95,
|
|
y: 20,
|
|
display: 'block',
|
|
});
|
|
|
|
gsap.to(overlayElement, {
|
|
opacity: 1,
|
|
duration: this.defaultDuration,
|
|
ease: this.defaultEase,
|
|
});
|
|
|
|
gsap.to(modalElement, {
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
duration: this.defaultDuration,
|
|
ease: this.defaultEase,
|
|
});
|
|
}
|
|
|
|
closeModal(modalElement: HTMLElement, overlayElement: HTMLElement, onComplete?: () => void) {
|
|
gsap.to([overlayElement, modalElement], {
|
|
opacity: 0,
|
|
duration: this.defaultDuration,
|
|
ease: this.defaultEase,
|
|
onComplete: () => {
|
|
gsap.set([overlayElement, modalElement], { display: 'none' });
|
|
onComplete?.();
|
|
},
|
|
});
|
|
|
|
gsap.to(modalElement, {
|
|
scale: 0.95,
|
|
y: 20,
|
|
duration: this.defaultDuration,
|
|
ease: this.defaultEase,
|
|
});
|
|
}
|
|
}
|