david demri

Hello Here is the codepen: https://codepen.io/daviddemri/pen/JjXMwyp I try to get the first image showing before the scroll, the images must change when the text on the right enter the screen, instead of when it's in the middle and get a smoother fading effect, without the stretching Thanks for your help David

Thanks Zach I started back from the beginning with the example above I still get some issues, i send a codepen soon David

I’m trying to reproduce an effect i saw on this website : https://stuart.com/delivery-express-courier/ Just after the section with this title : Eco-friendly courier service, go green with us You can see the result on the temp website: https://swoopin.webflow.io/ There is 3 sections, and on the scroll, the image on the left stay fixed then fade to each other, while the text on the right continue to scroll normally I started workin on it, i got essential but it's buggy How could i fix that ? <script> gsap.to('#IMAGE-ELEMENT', { scrollTrigger: { trigger: '#IMAGE-ELEMENT', start: 'top top', pinReparent: true, pin: '#IMAGE-ELEMENT', endTrigger: '#LAST-SCROLLABLE-CONTENT', end: 'top top', } }); gsap.to('#CONTENT-ELEMENT-2', { scrollTrigger: { trigger: '#CONTENT-ELEMENT-2', start: 'top center', onEnter: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c8947f9d2f61724d0_shutterstock_447317020.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(1); }, onEnterBack: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c8947f9d2f61724d0_shutterstock_447317020.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(2); } } }); gsap.to('#LAST-SCROLLABLE-CONTENT', { scrollTrigger: { trigger: '#LAST-SCROLLABLE-CONTENT', start: 'top center', onEnter: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3fde6487584b24a32bac96_shutterstock_254033086-901x644.jpg'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(3); }, onEnterBack: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3fde6487584b24a32bac96_shutterstock_254033086-901x644.jpg'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(4); } } }); gsap.to('#CONTENT-ELEMENT-1', { scrollTrigger: { trigger: '#CONTENT-ELEMENT-1', start: 'top center', /* onEnter: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c2c39379303de0a17_camion%20poster.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(5); }, */ onEnterBack: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c2c39379303de0a17_camion%20poster.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(6); } } }); </script> Thank you !