<![CDATA[<style>
body, html {
position: relative;
overflow-x: hidden;
margin: 0;
background-color: #111111;
}
.container {
position: relative;
display: grid;
justify-content: center;
place-items: center;
gap: 1.5rem;
}
.cards {
position: relative;
height: 250px;
display: flex;
justify-content: center;
--card-width: 200px;
--spacing: calc(var(--card-width) / 2);
opacity: 0;
}
.card {
width: var(--card-width);
height: var(--card-width);
position: absolute;
top: 0;
left: 50%;
border-radius: 1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
/* CSS transforms for different states */
transform: translateX(-50%);
/* Add smooth transition for transform changes */
transform-origin: center center;
/* background-image: url("../img/Espresso\ on\ Drip\ Tray.png"); */
background-size: cover;
}
.cards.spread .card {
transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* bg image */
.cards .card:nth-child(1) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/3-1.jpg");
}
.cards .card:nth-child(2) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/9-e1753965396328.webp");
}
.cards .card:nth-child(3) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/2-1-e1753963866836.jpg");
}
.cards .card:nth-child(4) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/7-1.jpg");
}
.cards .card:nth-child(5) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/1-e1753965118363.jpg");
}
.cards .card:nth-child(6) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/6-e1753965295131.jpg");
}
.cards .card:nth-child(7) {
background-image: url("https://lightsteelblue-raccoon-767783.hostingersite.com/wp-content/uploads/2025/07/4-1.jpg");
object-fit: cover;
}
/* Stacked state transforms */
.cards.stacked .card:nth-child(1) {
transform: translateX(-50%) rotate(-10deg);
}
.cards.stacked .card:nth-child(2) {
transform: translateX(-50%) rotate(-10deg);
}
.cards.stacked .card:nth-child(3) {
transform: translateX(-50%) rotate(-10deg);
}
.cards.stacked .card:nth-child(4) {
transform: translateX(-50%) rotate(-10deg);
}
.cards.stacked .card:nth-child(5) {
transform: translateX(-50%) rotate(-10deg);
}
.cards.stacked .card:nth-child(6) {
transform: translateX(-50%) rotate(-10deg);
}
.cards.stacked .card:nth-child(7) {
transform: translateX(-50%) rotate(-10deg);
}
/* Spread state transforms */
.cards.spread .card:nth-child(1) {
transform: translate(calc(-50% - var(--spacing) * 3.6), 40px) rotate(-12deg);
}
.cards.spread .card:nth-child(2) {
transform: translate(calc(-50% - var(--spacing) * 2.4), -10px) rotate(-6deg);
}
.cards.spread .card:nth-child(3) {
transform: translate(calc(-50% - var(--spacing) * 1.3), 10px) rotate(-4deg);
}
.cards.spread .card:nth-child(4) {
transform: translate(calc(-50% + 0px), 10px) rotate(0deg);
}
.cards.spread .card:nth-child(5) {
transform: translate(calc(-50% + var(--spacing) * 1.3), 10px) rotate(4deg);
}
.cards.spread .card:nth-child(6) {
transform: translate(calc(-50% + var(--spacing) * 2.4), 20px) rotate(8deg);
}
.cards.spread .card:nth-child(7) {
transform: translate(calc(-50% + var(--spacing) * 3.6), 10px) rotate(12deg);
}
/* vertical stacking */
.cards.verticalspread .card:nth-child(1) {
transform: translate(0%, 0%) scale(1);
}
.cards.verticalspread .card:nth-child(2) {
transform: translate(45%, 25%) scale(0.97);
}
.cards.verticalspread .card:nth-child(3) {
transform: translate(90%, 50%) scale(0.94);
}
.cards.verticalspread .card:nth-child(4) {
transform: translate(135%, 75%) scale(0.91);
}
.cards.verticalspread .card:nth-child(5) {
transform: translate(180%, 100%) scale(0.88);
}
.cards.verticalspread .card:nth-child(6) {
transform: translate(225%, 125%) scale(0.85);
}
/* Popup styles */
.popup,
.popup-showcase {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%) scale(0);
background: #333;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
font-family: "DM Sans", Sans-serif;
white-space: nowrap;
opacity: 0;
z-index: 10;
pointer-events: none;
}
.popup::after,
.popup-showcase::after {
content: '';
position: absolute;
top: 100%;
left: 70%;
transform: translateX(-50%);
border: 6px solid transparent;
}
.popup.one {
background-color: #FE891D;
}
.popup.one::after {
border-top-color: #FE891D;
}
.popup.two {
background-color: #A104CA;
}
.popup.two::after {
border-top-color: #A104CA;
}
.popup-showcase.one {
background-color: #FD871A;
}
.popup-showcase.one::after {
border-top-color: #FD871A;
}
.popup-showcase.two {
background-color: #A31A9C;
}
.popup-showcase.two::after {
border-top-color: #A31A9C;
}
/* Popup visible state */
.popup.show {
transform: translateX(-50%) scale(1);
opacity: 1;
}
.text-landing {
text-align: center;
}
.text-landing {
position: relative;
z-index: -1;
}
.card {
will-change: transform;
}
/* Tablet - Hide cards 4, 5, 6, 7 - only show first 3 cards */
@media (max-width: 768px) {
.card:nth-child(1),
.card:nth-child(2),
.card:nth-child(6),
.card:nth-child(7) {
display: none;
}
.container {
height: 80vh;
align-content: center;
gap: 2.5rem;
}
.cards {
position: relative;
width: auto;
height: 200px;
display: flex;
justify-content: center;
--card-width: 150px;
--spacing: calc(var(--card-width) / 2);
opacity: 0;
}
}
}
</style>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.12.2/gsap.min.js?ver=1773388797"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/npm/gsap@3.13.0/dist/ScrollTrigger.min.js?ver=1773388797"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/npm/gsap@3.13.0/dist/SplitText.min.js?ver=1773388797"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/lenis@1.3.8/dist/lenis.min.js?ver=1773388797"></script>
<script>
// Initialize a new Lenis instance for smooth scrolling
// Initialize Lenis
const lenis = new Lenis({
autoRaf: true,
});
// Listen for the scroll event and log the event data
lenis.on('scroll', (e) => {
});
</script>
<script>
gsap.registerPlugin(SplitText)
gsap.registerPlugin(ScrollTrigger)
// GSAP Timeline for professional header entrance animation
// GSAP Timeline for professional header entrance animation
function initHeaderAnimation() {
// Create master timeline
const tl = gsap.timeline();
// Set initial states - fade in from below with blur
gsap.set(".logo-container img", {
opacity: 0,
y: 50,
filter: "blur(10px)"
});
gsap.set(".links-wrapper .hfe-nav-menu li", {
opacity: 0,
y: 50,
filter: "blur(10px)"
});
gsap.set(".hfe-nav-menu__toggle", {
opacity: 0,
y: 50,
filter: "blur(10px)"
});
// Animate logo entrance
tl.to(".logo-container img", {
duration: 1,
opacity: 1,
y: 0,
filter: "blur(0px)",
ease: "power2.out"
})
// Animate navigation items with reverse stagger (last item first)
.to(".links-wrapper .hfe-nav-menu li", {
duration: 0.8,
opacity: 1,
y: 0,
filter: "blur(0px)",
stagger: {
each: 0.15,
from: "end"
},
ease: "power2.out"
}, "-=0.6")
// Animate mobile toggle
.to(".hfe-nav-menu__toggle", {
duration: 0.7,
opacity: 1,
y: 0,
filter: "blur(0px)",
ease: "power2.out"
}, "-=0.4");
return tl;
}
// Function to replay animation
function replayAnimation() {
initHeaderAnimation();
}
// Initialize when page loads
document.addEventListener('DOMContentLoaded', () => {
initHeaderAnimation();
});
// function lockScroll(duration = 4000) {
// const scrollY = window.scrollY;
// document.body.style.position = 'fixed';
// document.body.style.top = `-${scrollY}px`;
// document.body.style.left = '0';
// document.body.style.right = '0';
// document.body.style.width = '100%';
// document.body.style.overflow = 'hidden';
// setTimeout(() => {
// document.body.style.position = '';
// document.body.style.top = '';
// document.body.style.left = '';
// document.body.style.right = '';
// document.body.style.width = '';
// document.body.style.overflow = '';
// window.scrollTo(0, scrollY);
// }, duration);
// }
// Always scroll to top on reload
// if ('scrollRestoration' in history) {
// history.scrollRestoration = 'manual'; // Disable auto scroll restore
// }
// window.addEventListener('beforeunload', () => {
// window.scrollTo(0, 0); // Ensures it's at the top before leaving
// });
window.addEventListener('load', () => {
window.scrollTo(0, 0); // Forces top scroll on load
});
const cards = document.querySelector('.cards');
const toggleBtn = document.getElementById('spreadToggle');
const popups = document.querySelectorAll('.popup');
const cardsElement = document.querySelector('.card');
const computedStyles = getComputedStyle(cardsElement);
const cardWidth = parseInt(computedStyles.getPropertyValue('--card-width'));
const spacing = cardWidth / 2;
gsap.set(popups, {
scale: 0,
opacity: 0,
transformOrigin: "center bottom"
});
// GSAP Timeline for spreading animation
function createSpreadTimeline() {
const tl = gsap.timeline();
const spreadData = [
{ x: -spacing * 3.6, y: 40, rotation: -12 },
{ x: -spacing * 2.4, y: -10, rotation: -6 },
{ x: -spacing * 1.3, y: 10, rotation: -4 },
{ x: 0, y: 10, rotation: 0 },
{ x: spacing * 1.3, y: 10, rotation: 4 },
{ x: spacing * 2.4, y: 20, rotation: 8 },
{ x: spacing * 3.6, y: 10, rotation: 12 }
];
tl.set('.cards', { opacity: 1 })
.from('.cards', { y: '50vh', rotate: -15, duration: 1.5 })
.call(() => {
spreadData.forEach((data, index) => {
gsap.to(`.card:nth-child(${index + 1})`, {
x: data.x,
y: data.y,
rotation: data.rotation,
duration: 1.2,
ease: "cubic-bezier(0.4, 0, 0.2, 1)"
});
});
})
.to(popups, {
scale: 1,
opacity: 1,
duration: 0.3,
ease: "back.out(1.7)"
}, 2.2);
return tl;
}
// Initialize GSAP transforms for popups
// Auto-start animation after page loads
window.addEventListener('load', () => {
// Add a small delay to ensure everything is fully loaded
setTimeout(() => {
createSpreadTimeline().play();
}, 500); // 500ms delay after page load
});
document.fonts.ready.then(() => {
// Create the main timeline
const mainTimeline = gsap.timeline({delay:1});
// Set initial states
gsap.set(".text-landing", { opacity: 1 });
gsap.set(".heading-split", { opacity: 1 });
gsap.set(".text-showcase", { opacity: 1 });
gsap.set(".heading-split-showcase", { opacity: 1 });
// Create SplitText for both elements
const splitTextLanding = SplitText.create(".text-landing", {
type: "words,lines",
linesClass: "line",
autoSplit: true
});
const splitHeading = SplitText.create(".heading-split", {
type: "words,lines",
linesClass: "line",
autoSplit: true
});
const splitTextShowcase = SplitText.create(".text-showcase", {
type: "words,lines",
linesClass: "line",
// autoSplit: true
});
const splitHeadingShowcase = SplitText.create(".heading-split-showcase", {
type: "words,lines",
linesClass: "line",
// autoSplit: true
});
const splitBadgeShowcase = SplitText.create(".badge-showcase", {
type: "words,lines",
linesClass: "line",
autoSplit: true
});
// Add animations to timeline
mainTimeline
.from(splitHeading.words, {
duration: 2,
filter: 'blur(5px)',
yPercent: 100,
opacity: 0,
stagger: 0.2,
ease: "expo.out"
}, 0) // Start immediately
.from(splitTextLanding.words, {
duration: 1.5,
filter: 'blur(5px)',
yPercent: 100,
opacity: 0,
stagger: 0.05,
ease: "expo.out"
}, 2.5) // Start at 3 seconds
.from('.button-landing-cta', {
autoAlpha: 0,
y: 40,
stagger: 0.2,
duration: 1
}, 3); // Start at 3.5 seconds
// Showcase section timeline (ScrollTrigger activated)
const showcaseTimeline = gsap.timeline({
scrollTrigger: {
trigger: ".showcase", // or use a wrapper element like ".showcase-section"
start: "clamp(top center)",
end: "bottom top",
//end: "bottom 65%",
toggleActions: "play none none none",
// scrub: true,
// markers: true // uncomment for debugging
}
});
showcaseTimeline
.from(splitBadgeShowcase.words, {
duration: 1.2,
filter: 'blur(5px)',
yPercent: 100,
opacity: 0,
ease: "expo.out"
})
.from(splitHeadingShowcase.words, {
duration: 1.5,
filter: 'blur(5px)',
yPercent: 100,
opacity: 0,
stagger: 0.2,
ease: "expo.out"
}, '-=1') // Start immediately when triggered
.from(splitTextShowcase.words, {
duration: 1.5,
filter: 'blur(5px)',
yPercent: 100,
opacity: 0,
stagger: 0.05,
ease: "expo.out"
}, 1.5) // Start 1 seconds after heading
.from('.button-showcase-cta', {
autoAlpha: 0,
y:40,
stagger: 0.2,
duration: 1
}, "-=1.3");
// Return both timelines for external control
return {
landing: mainTimeline,
showcase: showcaseTimeline
};
});
// Select the two elements
const showcase = document.querySelector('.showcase');
// Get the bottom position of the .showcase section
const showcaseBottom = showcase.offsetTop + showcase.offsetHeight;
// Get the top position of the .cards element
const cardsTop = cards.getBoundingClientRect().top + window.scrollY;
const cardsBottom = cards.offsetTop + cards.offsetHeight;
// Calculate the distance
let distance = showcaseBottom - cardsTop + 100;
let distanceMobile = showcaseBottom - cardsTop + 280;
// console.log('Distance between .cards and bottom of .showcase:', distance, 'px');
// 1. Wait a bit for the initial spread to happen
// Replace the existing scroll trigger section in your code with this:
// 1. Wait a bit for the initial spread to happen
setTimeout(() => {
const cards = document.querySelectorAll('.cards .card');
// Calculate spread positions from CSS custom properties
// const spreadData = [
// { x: -spacing * 3.6, y: 40, rotation: -12 },
// { x: -spacing * 2.4, y: -10, rotation: -6 },
// { x: -spacing * 1.3, y: 10, rotation: -4 },
// { x: 0, y: 10, rotation: 0 },
// { x: spacing * 1.3, y: 10, rotation: 4 },
// { x: spacing * 2.4, y: 20, rotation: 8 },
// { x: spacing * 3.6, y: 10, rotation: 12 }
// ];
// Remove all CSS classes to avoid conflicts
// document.querySelector('.cards').classList.remove('spread', 'stacked');
// Use fromTo instead of set + to for smoother animation
// cards.forEach((card, i) => {
// // Set initial spread position immediately without transition
// gsap.set(card, {
// x: spreadData[i].x,
// y: spreadData[i].y,
// rotation: spreadData[i].rotation,
// xPercent: -50,
// // Enable hardware acceleration
// });
// });
// remove the popup
gsap.to(popups, {
scrollTrigger: {
trigger: ".cards",
start: "bottom center",
// endTrigger: ".text-showcase",
// end: "bottom top",
toggleActions: "play none none reverse",
},
scale: 0,
// opacity: 1,
duration: 0.3,
ease: "back.in(1.7)"
});
// STEP 1: Animate cards from spread → stacked (with scrub)
cards.forEach((card, i) => {
gsap.to(card, {
scrollTrigger: {
trigger: ".cards",
start: "top 20%",
endTrigger: ".text-showcase",
end: "bottom bottom",
scrub: true,
},
x: 0,
y: 0,
rotation: 0,
ease: "none",
xPercent: -50
});
});
// STEP 2: Animate the whole wrapper down (this completes first)
gsap.to('.cards', {
scrollTrigger: {
trigger: ".cards",
start: "top 20%",
endTrigger: ".text-showcase",
end: "bottom center", // This completes at "bottom top"
scrub: true,
// markers: true,
id: '2',
},
y: distance,
ease: "none",
});
// popup showcase
gsap.to('.popup-showcase', {
scrollTrigger: {
trigger: ".text-showcase",
start: "bottom 55%",
endTrigger: ".text-showcase",
end: "bottom center",
toggleActions: "play none none reverse",
// markers:true,
},
scale: 1,
opacity: 1,
duration: 0.3,
rotate: -5,
delay: .5,
repeatDelay: .5,
ease: "back.out(1.7)"
});
// STEP 3: Vertical spread trigger - starts AFTER the y:distance is complete
const verticalSpreadData = [
{ xPercent: -50, yPercent: 0, scale: 1.2 }, // Card 1 - starting from -50
{ xPercent: 30, yPercent: 18, scale: 1.19 }, // Card 2 - maintained 80 unit increment
{ xPercent: 110, yPercent: 36, scale: 1.18 }, // Card 3 - maintained 80 unit increment
{ xPercent: 190, yPercent: 54, scale: 1.17 }, // Card 4 - maintained 80 unit increment
{ xPercent: 270, yPercent: 72, scale: 1.16 }, // Card 5 - maintained 80 unit increment
{ xPercent: 350, yPercent: 90, scale: 1.15 }, // Card 6 - maintained 80 unit increment
{ xPercent: 430, yPercent: 108, scale: 1.14 }, // Card 7 - maintained 80 unit increment
];
// Animate each card's vertical spread with scrub
cards.forEach((card, i) => {
gsap.to(card, {
scrollTrigger: {
trigger: ".text-showcase",
start: "bottom 60%",
endTrigger: ".text-showcase",
end: "bottom center", // This completes at "bottom top"
id: 'll',
toggleActions: "play none none reverse",
// markers: true
},
xPercent: verticalSpreadData[i].xPercent,
yPercent: verticalSpreadData[i].yPercent,
scale: verticalSpreadData[i].scale,
// duration:2,
ease: "none" // Use "none" for scrub animations
});
});
// Reset back to stacked positions (after y:distance movement)
gsap.matchMedia().add("(max-width: 768px)", () => {
ScrollTrigger.getAll().forEach(trigger => {
if (trigger.vars.id === '2' || trigger.vars.id === 'll' ||
trigger.trigger === document.querySelector('.cards') ||
trigger.trigger === document.querySelector('.text-showcase')) {
trigger.kill();
}
});
// Hide cards 1, 2, 6, 7 (indices 0, 1, 5, 6)
const cardsToHide = [0, 1, 5, 6];
cardsToHide.forEach(index => {
if (cards[index]) {
gsap.set(cards[index], { display: "none" });
}
});
// Show only cards 3, 4, 5 (indices 2, 3, 4) and apply vertical spread data
const visibleCards = [cards[2], cards[3], cards[4]]; // 3rd, 4th, 5th cards
const tabletSpreadData = [
{ xPercent: -50, yPercent: 0, scale: 1.16 }, // 3rd card (index 2) - repositioned as first
{ xPercent: 30, yPercent: 18, scale: 1.14 }, // 4th card (index 3) - repositioned as second
{ xPercent: 110, yPercent: 36, scale: 1.12 } // 5th card (index 4) - repositioned as third
];
// Remove popup animations for tablet
gsap.to(popups, {
scrollTrigger: {
trigger: ".cards",
start: "bottom center",
toggleActions: "play none none reverse",
},
scale: 0,
duration: 0.3,
ease: "back.in(1.7)"
});
// Animate visible cards from spread → stacked
visibleCards.forEach((card, i) => {
if (card) {
gsap.to(card, {
scrollTrigger: {
trigger: ".cards",
start: "top 25%",
endTrigger: ".text-showcase",
end: "bottom bottom",
scrub: true,
},
x: 0,
y: 0,
rotation: 0,
ease: "none",
xPercent: -50
});
}
});
// Animate the whole wrapper down
gsap.to('.cards', {
scrollTrigger: {
trigger: ".cards",
start: "top 25%",
endTrigger: ".text-showcase",
end: "bottom center",
scrub: true,
},
y: distanceMobile,
ease: "none",
});
// Popup showcase animation
gsap.to('.popup-showcase', {
scrollTrigger: {
trigger: ".text-showcase",
start: "bottom 55%",
endTrigger: ".text-showcase",
end: "bottom center",
toggleActions: "play none none reverse",
},
scale: 1,
opacity: 1,
duration: 0.3,
delay: .5,
repeatDelay: .5,
ease: "back.out(1.7)"
});
// Apply vertical spread to visible cards with tablet-specific data
visibleCards.forEach((card, i) => {
if (card) {
gsap.to(card, {
scrollTrigger: {
trigger: ".text-showcase",
start: "bottom 60%",
endTrigger: ".text-showcase",
end: "bottom center",
toggleActions: "play none none reverse",
},
xPercent: tabletSpreadData[i].xPercent,
yPercent: tabletSpreadData[i].yPercent,
scale: tabletSpreadData[i].scale,
ease: "none"
});
}
});
});
}, 4000);
// GSAP MatchMedia for tablet and below
// GSAP matchMedia for tablet and below
</script>]]>
