43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
// Features Scroll Animation
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const featureContainer = document.querySelector(".features_animation");
|
|
|
|
if (featureContainer) {
|
|
const cards = document.querySelectorAll(".features_animation .feature_item_inner");
|
|
|
|
// Set initial top positions like jQuery did
|
|
cards.forEach((card, index) => {
|
|
card.style.top = `${50 + index * 15}px`;
|
|
});
|
|
|
|
// Convert NodeList to an array for GSAP utilities
|
|
const cardArray = Array.from(cards);
|
|
|
|
cardArray.forEach((card, index) => {
|
|
gsap.to(card, {
|
|
scrollTrigger: {
|
|
trigger: card,
|
|
start: "top bottom-=100",
|
|
end: "top top+=40",
|
|
scrub: true,
|
|
markers: false,
|
|
invalidateOnRefresh: true,
|
|
},
|
|
ease: "none",
|
|
scale: () => 1 - (cardArray.length - index) * 0.025,
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: card,
|
|
start: "top top",
|
|
pin: true,
|
|
pinSpacing: false,
|
|
markers: false,
|
|
id: "pin",
|
|
end: "max",
|
|
invalidateOnRefresh: true,
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|