Etheryo/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Footer: Animation depend on the direction.

Browse source
This commit is contained in:
Yohan Boujon 2024-08-11 21:57:09 +01:00
parent a68ba0aa74
commit 870b6dbdfb
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/lib/components/footer.svelte
View file

@ -14,17 +14,18 @@
function slideText(event) { function slideText(event) {
const id = event.detail.id; const id = event.detail.id;
const width = window.innerWidth; const width = window.innerWidth/2;
const animTranslate = active > id ? [width, -width] : [-width, width];
anime({ anime({
targets: pageDiv, targets: pageDiv,
translateX: width / 2, translateX: animTranslate[0],
opacity: 0, opacity: 0,
duration: 300, duration: 300,
easing: 'easeInQuad', easing: 'easeInQuad',
complete: function () { complete: function () {
active = id; active = id;
pageDiv.style.transform = `translateX(-${width}px)`; pageDiv.style.transform = `translateX(${animTranslate[1]}px)`;
anime({ anime({
targets: pageDiv, targets: pageDiv,
translateX: 0, translateX: 0,