I've been trying to zoom an image by scaling it to 100% on a pinned element, that works fine but my element beneath this div are triggered at the same time. If i place the ".sticky-content" element above the ".zoomer" they both work fine.
Is there a solution for it?
Thanks already
HTML:
<div class="zoomer">
<div class="wrapper">
<div class="images">
<div class="clipper">
<img data-speed="0.5" src="/dist/img/large.png">
</div>
</div>
<div class="text" data-speed="0.1">
<div class="clipper">
<h2>Lorem ipsum</h2>
</div>
</div>
</div>
</div>
<div class="sticky-content">
<div class="wrapper">
<div class="text">
<div class="clipper">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum</p>
</div>
</div>
<div class="images">
<ul>
<li><img data-speed="0" src="/dist/img/1.png"></li>
<li><img data-speed="0.2" src="/dist/img/1.png"></li>
</ul>
</div>
</div>
</div>
Javascript:
var images = gsap.utils.toArray('.zoomer .wrapper .images')
images.forEach((image, i) => {
gsap.fromTo(image, {scale:0}, {scale:1, ease: "none", force3D:true,
scrollTrigger:({
pin:true,
trigger: jQuery(image).parent().parent(),
start: "top top",
end: "bottom top",
pinType: isTouch ? 'fixed' : 'transform',
scrub: true,
markers:true,
}),
});
})
var texts = gsap.utils.toArray('.sticky-content .text')
texts.forEach((text, i) => {
ScrollTrigger.create({
pin: text,
start: "top 40%",
endTrigger: jQuery(text).parent().parent(),
end: "bottom 40%+="+gsap.getProperty(text, "height"),
pinType: isTouch ? 'fixed' : 'transform',
markers:true,
})
});