Jump to content
Search Community

adnan70

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by adnan70

  1. 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>
  2. 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>
×
×
  • Create New...