pinned container images swap

[rahul dev]

Hi guys!

  

     I want to change images on right side depend on the content scroll on left side ,

     PLEASE HELP!!

    

See the Pen eYgdgZG by rahuldev39 (@rahuldev39) on CodePen

[akapowl]

 

Hey @rahul dev - welcome to the forums.

 

You could simply adjust the position that is being checked upon

 

  //const currScroll = scrollY;
  const currScroll = scrollY - window.innerHeight;

 

Does that work better for you?

 

See the Pen 72a03c1bf7ebcc15bffd94a75d7e213f by akapowl (@akapowl) on CodePen

 

 

[rahul dev]

Thanks akapowl  , yes it work for me

Thanks a lot..........

[UserX]

On 3/29/2021 at 10:02 PM, akapowl said:

 

Hey @rahul dev - welcome to the forums.

 

You could simply adjust the position that is being checked upon

 

  //const currScroll = scrollY;
  const currScroll = scrollY - window.innerHeight;

 

Does that work better for you?

 

 

 

 

 

Hello Mate above example creating issue while in reverse scroll.

=> when we scroll in reverse the  image before image (image - 1) is show without even text change
=> tried to change the code but didn't get well result. 
=> when we try to integrate the above codepen code into any webpage above code is breaking i don't know why ?

[akapowl]

2 hours ago, UserX said:

Hello Mate above example creating issue while in reverse scroll.

 

I wouldn't exactly call that an issue - according to the logic provided that is what is supposed to be happening in that case.

 

If you don't want to use a diferent approach from the ground up but still want things to trigger differently when scrolling back up in comparison to when scrolling down (which would be the consequence of what you described as the 'issue') you will have to expand the logic a fair bit.

 

Usually figuring out logic like that is not what is provided as free support on these forums, but for your convenience, here is one possible example of how to get it working - what I added first and foremost  is a check on the scroll-direction (which I get via the onUpdate of the ScrollTrigger).

 

Depending on wether scrolling up or down, the currScroll will be either what was provided in the original demo of the OP or what I suggested in my reply. When approaching it like this though, there is another check neccessary to make sure the image doesn't change to the 'wrong' one midst scroll when changing direction - done in this following example by an extra check on added nextContent and respective marker.next/marker.previous variables.

 

I can not give you any guarantee that this is the best way to do it or aven a bulletproof solution but it works for me at this point. 

Hope this at least helps you head in the right direction with this.

 

See the Pen 9d0d9e474a12885298166cac5d1aa134 by akapowl (@akapowl) on CodePen

 

 

 

2 hours ago, UserX said:

when we try to integrate the above codepen code into any webpage above code is breaking i don't know why ?

 

I'm afraid I can not help you much with that one - if it works in codepen but doesn't work on your website, it is very likely that it is related to the setup of your website somewhere.

[UserX]

 

21 hours ago, akapowl said:

 

I wouldn't exactly call that an issue - according to the logic provided that is what is supposed to be happening in that case.

 

If you don't want to use a diferent approach from the ground up but still want things to trigger differently when scrolling back up in comparison to when scrolling down (which would be the consequence of what you described as the 'issue') you will have to expand the logic a fair bit.

 

Usually figuring out logic like that is not what is provided as free support on these forums, but for your convenience, here is one possible example of how to get it working - what I added first and foremost  is a check on the scroll-direction (which I get via the onUpdate of the ScrollTrigger).

 

Depending on wether scrolling up or down, the currScroll will be either what was provided in the original demo of the OP or what I suggested in my reply. When approaching it like this though, there is another check neccessary to make sure the image doesn't change to the 'wrong' one midst scroll when changing direction - done in this following example by an extra check on added nextContent and respective marker.next/marker.previous variables.

 

I can not give you any guarantee that this is the best way to do it or aven a bulletproof solution but it works for me at this point. 

Hope this at least helps you head in the right direction with this.

 

 

 

 

 

 

 

I'm afraid I can not help you much with that one - if it works in codepen but doesn't work on your website, it is very likely that it is related to the setup of your website somewhere.

Thanks for the quick support

Hello GSAP scrolltrigger community
=> i am facing the issue while working with above example in mobile screen (iphoneX) i really tried to implement with several ways but the above code but didnt get the result from this could you please help me in this example.

 

[Cassie]

Hi @UserX

I'm not really sure how to help above and beyond the help @akapowl has provided.

If you're still struggling maybe the freelance forums can offer some help?

[akapowl]

29 minutes ago, Cassie said:

I'm not really sure how to help above and beyond the help @akapowl has provided.

 

I'm not either - thought it might be something mobile related in general, so I just tested across several different browsers (on Android).

 

No issues to be seen on any of those.

[Its_Lefty]

On 8/11/2021 at 3:30 PM, akapowl said:

 

 

 

 

Hi there!
I hope you guys don't mind commenting on an old post. I really like this example, nice work!
However I am struggling to understand the code. What I am trying to modify is this: In the example the pinned image is going to change as soon the new 100vh section is completely visible in the viewport. But I need the image swapping earlier. So for example as soon the headline of the new section is entering the viewport, the image will swap. Is the correct approach to change the trigger to h1 within the ScrollTrigger (I guess I need a loop for each section then?) or should I just modify the start and end values? So far I've tried both without luck so if you could guide me into the right correction, it would be awesome.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅