Vasanth

You are correct @ZachSaucier, its the rendering issue with my chrome browser. There is no issue when it runs in firefox browser. Thanks for helping me out and answering all my questions.

Thank you very much @ZachSaucier, I am able to create my first animation using scroll trigger. I have created another new scroll trigger. Animation is working fine but i am facing one issue. While scrolling down, i am able to see white border line over the image while animation is running. To view the border line appearing over the image, i have increased the duration of animation in the codepen. I have attached an image and my new code pen. can you please help me in fixing this issue? https://codepen.io/Vasanthsteel91/pen/LYRzBWZ

Thanks @ZachSaucierand i have updated the code by identifying specific item under each section. But now the animation is not working. Can you please let me know where i am going wrong? Attached my updated code pen: https://codepen.io/Vasanthsteel91/pen/LYRzBWZ

Hi, I started using gsap scroll trigger and i have some confusions on using it when there a multiple elements. In my case there are three div with same class name " wrap-container". Inside each wrap container there are one div with class "reveal-img" and "reveal-text". Attached my codepen link Can you please help me on triggering timeline when user scrolls to each wrap container div? I have tried and they are all executing at once. Using scroll magic and gsap they have achieved this, but i am not able to do it using scroll trigger Attached the code of scrollmagic and gsap <let controller; let slideScene; function animateSlides() { //Init Controller controller = new ScrollMagic.Controller(); //Select some things const sliders = document.querySelectorAll(".wrap-container"); const nav = document.querySelector("nav"); //Loop over each sllide sliders.forEach((slide, index, slides) => { const revealImg = slide.querySelector(".reveal-img"); const img = slide.querySelector("img"); const revealText = slide.querySelector(".reveal-text"); //GSAP const slideTl = gsap.timeline({ defaults: { duration: 1, ease: "power2.inOut" } }); slideTl.fromTo(revealImg, { x: "0%" }, { x: "100%" }); slideTl.fromTo(img, { scale: 2 }, { scale: 1 }, "-=1"); slideTl.fromTo(revealText, { x: "0%" }, { x: "100%" }, "-=0.75"); //Create Scene slideScene = new ScrollMagic.Scene({ triggerElement: slide, triggerHook: 0.25, reverse: false }) .setTween(slideTl) // .addIndicators({ // colorStart: "white", // colorTrigger: "white", // name: "slide" // }) .addTo(controller); }); } animateSlides();>