Skip to content

Commit eb0a8e5

Browse files
committed
refactor(cards): remove animejs
1 parent 75a5fee commit eb0a8e5

File tree

1 file changed

+12
-19
lines changed

1 file changed

+12
-19
lines changed

src/cards.ts

+12-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import anim from "animejs";
2-
31
export class Cards {
42

53
static Init() {
@@ -18,16 +16,13 @@ export class Cards {
1816
// Close Card
1917
const closeArea = cardReveal.querySelector('.card-reveal .card-title');
2018
if (trigger === closeArea || closeArea.contains(trigger)) {
21-
anim({
22-
targets: cardReveal,
23-
translateY: 0,
24-
duration: 225,
25-
easing: 'easeInOutQuad',
26-
complete: (anim) => {
27-
cardReveal.style.display = 'none';
28-
card.style.overflow = initialOverflow;
29-
}
30-
});
19+
const duration = 225;
20+
cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
21+
cardReveal.style.transform = 'translateY(0)';
22+
setTimeout(() => {
23+
cardReveal.style.display = 'none';
24+
card.style.overflow = initialOverflow;
25+
}, duration);
3126
};
3227

3328
// Reveal Card
@@ -36,16 +31,14 @@ export class Cards {
3631
if (trigger === activator || activator.contains(trigger)) {
3732
card.style.overflow = 'hidden';
3833
cardReveal.style.display = 'block';
39-
anim({
40-
targets: cardReveal,
41-
translateY: '-100%',
42-
duration: 300,
43-
easing: 'easeInOutQuad'
44-
});
34+
setTimeout(() => {
35+
const duration = 300;
36+
cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
37+
cardReveal.style.transform = 'translateY(-100%)';
38+
}, 1);
4539
}
4640
});
4741

48-
4942
});
5043
});
5144

0 commit comments

Comments
 (0)