gsap Scrolltrigger Issue

[adnan70]

Hi, 
I do parallax animation for 2 images with scroll trigger , but when I apply it displace the images form their original place,
Here is the image before animation

 

 

and after animation.

 

Here is the code which I implemented

 

<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>

 

[akapowl]

 

Hey @adnan70

 

It is really tough to troubleshoot just from screenshots and a code-snippet - there are just too many unknown variables at play here that make it close to impossible to give you any proper advice.

 

To me it looks, like you are tweening your images to different positions on scroll - so I would expect those images to be in a different position than where they were when the animation started out - but I'm probably misunderstanding what you want to achieve.

 

So it would really be appreciated if you could include a minimal demo that showcases your issue (but is not bloated) and maybe alongside that also either explain what exactly you mean by 'parallax animation' for your images or show an example of your intended outcome. Thanks  

 

[adnan70]

Hi, akapowl

Thanks for your reply, currently I'm working on my localhost. Basically I use this reference codepen

See the Pen JjYPQpN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

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>

 

[akapowl]

 

Okay, so now I understand what parallax effect you want to achieve, but I'm still a bit fuzzy on what you expect to be the exact outcome in your case, sorry. Maybe it's the .random() you are using that is making things not work as you'd expect - maybe it's something different, though.

 

A complete minimal demo (including your HTML markup, CSS and JS - preferably in a codepen) of your scenario and an explanation of how exactly you want your images to behave would really clear things up for me. I'm afraid I can not tell you more than that at this point.