103 lines
1.9 KiB
JavaScript
103 lines
1.9 KiB
JavaScript
/*
|
|
Name: Demo Marketing 1
|
|
Written by: Okler Themes - (http://www.okler.net)
|
|
Theme Version: 12.1.0
|
|
*/
|
|
|
|
(($ => {
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
/*
|
|
Section Scale
|
|
*/
|
|
gsap.utils.toArray(".gsap-section-scale").forEach((section, index) => {
|
|
const tl1 = gsap.timeline({
|
|
scrollTrigger: {
|
|
trigger: section,
|
|
start: "100% 100%",
|
|
end: "bottom top",
|
|
scrub: true
|
|
},
|
|
});
|
|
|
|
tl1.fromTo(
|
|
section, {
|
|
scale: 1,
|
|
},
|
|
{
|
|
scale: 0.9,
|
|
duration: 1,
|
|
ease: "power2.out"
|
|
}
|
|
);
|
|
});
|
|
|
|
/*
|
|
Image Change
|
|
*/
|
|
gsap.defaults({ overwrite: 'auto'});
|
|
|
|
// Set up our scroll trigger
|
|
const ST = ScrollTrigger.create({
|
|
trigger: ".gsap-content-container",
|
|
start: "top top",
|
|
end: "bottom bottom",
|
|
onUpdate: getCurrentSection
|
|
});
|
|
|
|
const contentMarkers = gsap.utils.toArray(".gsap-content-marker");
|
|
|
|
// Set up our content behaviors
|
|
contentMarkers.forEach(marker => {
|
|
marker.content = document.querySelector(`#${marker.dataset.markerContent}`);
|
|
|
|
marker.content.enter = () => {
|
|
gsap.fromTo(marker.content, {
|
|
autoAlpha: 0
|
|
}, {
|
|
duration: 0.3,
|
|
autoAlpha: 1
|
|
});
|
|
}
|
|
|
|
marker.content.leave = () => {
|
|
gsap.to(marker.content, {
|
|
duration: 0.1,
|
|
autoAlpha: 0
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
// Handle the updated position
|
|
let lastContent;
|
|
|
|
function getCurrentSection() {
|
|
let newContent;
|
|
const currScroll = scrollY;
|
|
|
|
// Find the current section
|
|
contentMarkers.forEach(({offsetTop, content}) => {
|
|
if (currScroll > (offsetTop - 100)) {
|
|
newContent = content;
|
|
}
|
|
});
|
|
|
|
// If the current section is different than that last, animate in
|
|
if (newContent &&
|
|
(lastContent == null ||
|
|
!newContent.isSameNode(lastContent))) {
|
|
// Fade out last section
|
|
if (lastContent) {
|
|
lastContent.leave();
|
|
}
|
|
|
|
// Animate in new section
|
|
newContent.enter();
|
|
|
|
lastContent = newContent;
|
|
}
|
|
|
|
}
|
|
})).apply( this, [ jQuery ]);
|