Hi, akapowl
Thanks for your reply, currently I'm working on my localhost. Basically I use this reference codepen https://codepen.io/GreenSock/pen/JjYPQpN?editors=1010
Here is the full code, hope this will help you to find problem. I will really appreciate your effort if found solution, I struggling with animation from 2 days. Or can you refer me same animation?
<section class="bossage position-relative pSection">
<div class="container-fluid p-0 pcontainer">
<div class="image-1 pContent">
<img src="img/bossage-1.png" class="pImage img-fluid one" alt="">
<img src="img/bossage-2.png" class="pImage img-fluid two" alt="">
</div>
</div>
</section>
<script>
gsap.to(".image-1", {
yPercent: (Math.random() * -150),
ease: "none",
scrollTrigger: {
trigger: ".bossage",
start: "top 10px", // the default values
end: "center 20%",
scrub: true
},
});
gsap.to(".pImage", {
yPercent:(Math.random() * 200),
ease: "none",
scrollTrigger: {
trigger: ".bossage",
start: "top 10px", // the default values
end: "center 20%",
scrub: true
},
});
</script>