Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
david demri

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?

Recommended Posts

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 !

 

 

Link to post
Share on other sites

Hey David and welcome to the GreenSock forums. There's a demo of how to do this sort of effect listed in the ScrollTrigger demos in the docs:

See the Pen YzyqVNe by GreenSock (@GreenSock) on CodePen

 

If you'd like help debugging your code, please recreate the issue in minimal form using something like CodePen:

Also note that we don't recommend jQuery animations - just use GSAP instead :) 

Link to post
Share on other sites

Thanks Zach

 

I started back from the beginning with the example above

 

I still get some issues, i send a codepen soon

 

David

Link to post
Share on other sites

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

Link to post
Share on other sites
2 hours ago, david demri said:

I try to get the first image showing before the scroll

Just change the initial CSS so it's not hidden then. Something like:

.left-content > *:not(:first-child) {
  opacity: 0;
  visibility: hidden;
}

Optionally also change the getCurrentSection to not do any animation when the first section is entered from the top.

 

2 hours ago, david demri said:

the images must change when the text on the right enter the screen, instead of when it's in the middle

You'll need to change the position detection in the getCurrentSection function then. Currently it's currScroll > marker.offsetTop - you'll need to add some to the left side or subtract from the right side. 

 

2 hours ago, david demri said:

get a smoother fading effect, without the stretching

Remove the rotateY part of the tweens then :) 

  • Like 1
  • Thanks 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×