').parent();
var $aipInner = $aipWrap.find(".anim-image-parallax-inner");
// Parallax
gsap.to($animImageParallax, {
yPercent: yPercent,
ease: "none",
scrollTrigger: {
trigger: $aipWrap,
start: startTrigger,
end: "bottom top",
scrub: true,
markers: false,
},
});
// Zoom in
let tl_aipZoomIn = gsap.timeline({
scrollTrigger: {
trigger: $aipWrap,
start: "top 90%",
markers: false,
},
});
tl_aipZoomIn.from($aipInner, {
duration: 1.5,
autoAlpha: 0,
scale: 1.4,
ease: Power2.easeOut,
clearProps: "all",
});
});
}
}
// Call the function for the first set of elements
handleParallaxZoom($(".anim-image-parallax"), 80, "top bottom");
// Call the function for the second set of elements
handleParallaxZoom($(".anim-image-parallax-2"), 20, "top bottom");
//Style 2 anim-image-parallax Code
let parallaxElements = document.getElementsByClassName('anim-image-parallax');
if (parallaxElements.length) {
Array.from(parallaxElements).forEach((element) => {
// Wrap the element with the necessary divs.
let wrapperDiv = document.createElement('div');
wrapperDiv.className = 'anim-image-parallax-wrap';
let innerDiv = document.createElement('div');
innerDiv.className = 'anim-image-parallax-inner';
element.parentNode.insertBefore(wrapperDiv, element);
wrapperDiv.appendChild(innerDiv);
innerDiv.appendChild(element);
// Add overflow hidden to the wrapper div.
wrapperDiv.style.overflow = 'hidden';
// Get the references to the elements.
let animImageParallax = gsap.utils.wrap(element);
let aipWrap = wrapperDiv;
let aipInner = innerDiv;
// Parallax
gsap.to(animImageParallax, {
yPercent: 80,
ease: 'none',
scrollTrigger: {
trigger: aipWrap,
start: 'top bottom',
end: 'bottom top',
scrub: true,
markers: false,
},
});
// Zoom in
let tl_aipZoomIn = gsap.timeline({
scrollTrigger: {
trigger: aipWrap,
start: 'top 90%',
markers: false,
},
});
tl_aipZoomIn.from(aipInner, {
duration: 1.5,
autoAlpha: 0,
scale: 1.4,
ease: 'power2.out',
clearProps: 'all',
});
});
}
});







