Skip to content

Commit f851297

Browse files
Ali-CheikhAli-Cheikh
committed
smooth landing animation
1 parent 6595779 commit f851297

4 files changed

Lines changed: 139 additions & 2 deletions

File tree

‎plans/basic/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -771,10 +771,13 @@
771771
color: #fff;
772772
background: rgba(255, 255, 255, 0.05);
773773
}
774+
.fade-in {
775+
animation: fadeIn 0.5s ease forwards;
776+
}
774777
</style>
775778
</head>
776779

777-
<body>
780+
<body class="bg-gray-900 text-white fade-in">
778781

779782
<!-- ─── MAIN NAVIGATION ─── -->
780783
<nav class="nav-container" id="mainNav" role="navigation" aria-label="Main navigation">

‎plans/basic/main.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,50 @@
11
// main.js
22
import { CONFIG, stylePresets } from "./config.js";
33

4+
// smooth landing animation on page loading/opening
5+
const fadeInElements = document.querySelectorAll('.fade-in');
6+
const FADE_IN_DURATION = '0.5s';
7+
const FADE_OUT_DURATION = '0.3s';
8+
const TRANSITION_TIMING = 'ease-in-out';
9+
const NAVIGATION_DELAY = 500;
10+
11+
// Initial setup - hide elements before animation
12+
fadeInElements.forEach(element => {
13+
element.style.opacity = '0';
14+
element.style.transition = `opacity ${FADE_IN_DURATION} ${TRANSITION_TIMING}`;
15+
});
16+
17+
// Fade in elements when DOM is ready
18+
document.addEventListener('DOMContentLoaded', () => {
19+
requestAnimationFrame(() => {
20+
fadeInElements.forEach(element => {
21+
element.style.opacity = '1';
22+
});
23+
});
24+
});
25+
26+
// Handle link transitions
27+
document.addEventListener('click', e => {
28+
const link = e.target.closest('a');
29+
if (!link) return;
30+
31+
// Check if link is external or internal route
32+
const href = link.getAttribute('href');
33+
if (!href.startsWith('http') && !href.startsWith('/')) return;
34+
35+
e.preventDefault();
36+
37+
// Fade out smoothly
38+
fadeInElements.forEach(element => {
39+
element.style.transition = `opacity ${FADE_OUT_DURATION} ${TRANSITION_TIMING}`;
40+
element.style.opacity = '0';
41+
});
42+
43+
// Navigate after fade completes
44+
setTimeout(() => {
45+
window.location.href = href;
46+
}, NAVIGATION_DELAY);
47+
});
448
document.addEventListener("DOMContentLoaded", () => {
549
// ─── Element references ────────────────────────────────────
650
const elements = {

‎plans/free/main.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,50 @@
11
// main.js – Free Plan
22
import { CONFIG, stylePresets } from "./config.js";
33

4+
// smooth landing animation on page loading/opening
5+
const fadeInElements = document.querySelectorAll('.fade-in');
6+
const FADE_IN_DURATION = '0.5s';
7+
const FADE_OUT_DURATION = '0.3s';
8+
const TRANSITION_TIMING = 'ease-in-out';
9+
const NAVIGATION_DELAY = 500;
10+
11+
// Initial setup - hide elements before animation
12+
fadeInElements.forEach(element => {
13+
element.style.opacity = '0';
14+
element.style.transition = `opacity ${FADE_IN_DURATION} ${TRANSITION_TIMING}`;
15+
});
16+
17+
// Fade in elements when DOM is ready
18+
document.addEventListener('DOMContentLoaded', () => {
19+
requestAnimationFrame(() => {
20+
fadeInElements.forEach(element => {
21+
element.style.opacity = '1';
22+
});
23+
});
24+
});
25+
26+
// Handle link transitions
27+
document.addEventListener('click', e => {
28+
const link = e.target.closest('a');
29+
if (!link) return;
30+
31+
// Check if link is external or internal route
32+
const href = link.getAttribute('href');
33+
if (!href.startsWith('http') && !href.startsWith('/')) return;
34+
35+
e.preventDefault();
36+
37+
// Fade out smoothly
38+
fadeInElements.forEach(element => {
39+
element.style.transition = `opacity ${FADE_OUT_DURATION} ${TRANSITION_TIMING}`;
40+
element.style.opacity = '0';
41+
});
42+
43+
// Navigate after fade completes
44+
setTimeout(() => {
45+
window.location.href = href;
46+
}, NAVIGATION_DELAY);
47+
});
448
document.addEventListener("DOMContentLoaded", () => {
549
// ─── Element references ────────────────────────────────────
650
const elements = {

‎plans/script.js‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,4 +253,50 @@
253253
setupNavigation();
254254
});
255255

256-
})();
256+
})();
257+
258+
259+
// smooth landing animation on page loading/opening
260+
const fadeInElements = document.querySelectorAll('.fade-in');
261+
const FADE_IN_DURATION = '0.5s';
262+
const FADE_OUT_DURATION = '0.3s';
263+
const TRANSITION_TIMING = 'ease-in-out';
264+
const NAVIGATION_DELAY = 500;
265+
266+
// Initial setup - hide elements before animation
267+
fadeInElements.forEach(element => {
268+
element.style.opacity = '0';
269+
element.style.transition = `opacity ${FADE_IN_DURATION} ${TRANSITION_TIMING}`;
270+
});
271+
272+
// Fade in elements when DOM is ready
273+
document.addEventListener('DOMContentLoaded', () => {
274+
requestAnimationFrame(() => {
275+
fadeInElements.forEach(element => {
276+
element.style.opacity = '1';
277+
});
278+
});
279+
});
280+
281+
// Handle link transitions
282+
document.addEventListener('click', e => {
283+
const link = e.target.closest('a');
284+
if (!link) return;
285+
286+
// Check if link is external or internal route
287+
const href = link.getAttribute('href');
288+
if (!href.startsWith('http') && !href.startsWith('/')) return;
289+
290+
e.preventDefault();
291+
292+
// Fade out smoothly
293+
fadeInElements.forEach(element => {
294+
element.style.transition = `opacity ${FADE_OUT_DURATION} ${TRANSITION_TIMING}`;
295+
element.style.opacity = '0';
296+
});
297+
298+
// Navigate after fade completes
299+
setTimeout(() => {
300+
window.location.href = href;
301+
}, NAVIGATION_DELAY);
302+
});

0 commit comments

Comments
 (0)