[What is the best way to create an effect of a section where the image on the left stay fixed and change, and the text on the right scrolls?]

Hello

 

Here is the codepen: 

See the Pen JjXMwyp by daviddemri (@daviddemri) on CodePen

 

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

[What is the best way to create an effect of a section where the image on the left stay fixed and change, and the text on the right scrolls?]

Thanks Zach

 

I started back from the beginning with the example above

 

I still get some issues, i send a codepen soon

 

David

[What is the best way to create an effect of a section where the image on the left stay fixed and change, and the text on the right scrolls?]

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 !