Jump to content
Search Community

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?

david demri test
Moderator Tag

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 comment
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 comment
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 comment
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 comment
Share on other sites

  • 1 year later...

Hi,

 

On 9/7/2020 at 3:22 PM, ZachSaucier said:

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

How can I disable the animation from first section?

 

On 9/7/2020 at 3:22 PM, ZachSaucier said:

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. 

I tried, but not working well. Could you help me, please?

 

Thanks!

Link to comment
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.
×
×
  • Create New...