gsap horizontal scroll with parallax. need to figure the first element parallax position before the scroller pins and animation starts

[Nuno Moreira]

Hi. First of all let me say how cool is gsap. Does amazing stuff. I am trying to learn and playing around with it.

 

Anyway, I am trying to create an horizontal scroller that pins and inside it has several elements with images inside that parallax in the x axis while we scroll.

 

My problem/ issue is with the first element that is 50% left of the left side of the viewport.

The parrallax effect works great after the scroll pin and animation is triggered. The issue is the x position of the first image inside first element before animation starts.

 

It jumps to the correct position on x axis only after the scroller pins and animation triggered . We can see it jumping to the correct position in the codepen example. if we play around with the first  .to() value of the "allImgs" elements.

 

Sorry if my explanation is confusing, maybe someone can understand it and help out.

 

Thank you all

 

NOTE:

Made the images transparent and removed the overflow:hidden from the .panel-wide container

 

See the Pen KKBMgZN by nmoreira (@nmoreira) on CodePen

[Nuno Moreira]

Duplicate pen to see the image jump on first run

 

See the Pen QWBKbBa by nmoreira (@nmoreira) on CodePen

[Rodrigo]

Hi @Nuno Moreira and welcome to the GreenSock forums!

 

This is a simple issue actually. If you check your markers you'll see that start-id-two is already passed the ScrollTrigger start point scroller-start-id-two, so when the first scroll that actually affects that section the image jumps because it goes from the initial natural position to the ScrollTrigger controlled position for that progress.

 

I've been trying to find a way to handle this for quite some time and a solution simply eludes me. Since the first scroll solves the issue I though about setting the progress of the first image's tween to one and then back to zero in order to force the rendering of the image, then I tried to scroll to the bottom and then back to the top in order to do the same. Then I tried a couple of other things that are a bit longer to explain and nothing worked, sorry.

 

I'll ping @GreenSock in order to see if He can come up with something or an official explanation about why is not working.

 

Please stand by.

[Nuno Moreira]

Thank you @Rodrigo. The first pen i try to fool the scrolltrigger by setting a first/inicial value of  x: "-10vw"

 

Doing some math i came up with that value. Seem about the right place in x axis of the image inside the container.

If i set it to 0 and remove the margins magic happens

 

Thank you again. I will wait for help 😀

 

 

 

 

[GreenSock]

The issue is that you've got the start value set up on that first on so that it's BEFORE the container animation's beginning. Don't worry, we can still solve it...

 

onRefresh: self => {
  if (self.start < 0) {
    self.animation.progress(gsap.utils.mapRange(self.start, self.end, 0, 1, 0));
  }
}

For ScrollTriggers that are attached to a containerAnimation, the start/end values are actually progress values (between 0 and 1, referring to the progress of that containerAnimation). So we can simply sense if the start value is NEGATIVE (meaning it's set to start before the containerAnimation's beginning), and adjust its progress accordingly. the gsap.utils.mapRange() is perfect for that. We're basically trying to figure out what the progress value of that tween would be at the 0 point of the containerAnimation. For example, if the start was -0.25 and end was 0.25, then 0 would fall right in the middle, thus its progress would be 0.5 (50%). 

 

Here's a fork: 

See the Pen LYBRbvE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[Nuno Moreira]

Amazing @GreenSock / Jack. Thank you so much for the help and explanation. I believe i understand now.

 

What a great tool this is. You made my day

 

Thank you and @Rodrigo once again.

[Mlbb lan]

On 1/4/2023 at 7:20 AM, GreenSock said:

The issue is that you've got the start value set up on that first on so that it's BEFORE the container animation's beginning. Don't worry, we can still solve it...

 

onRefresh: self => {
  if (self.start < 0) {
    self.animation.progress(gsap.utils.mapRange(self.start, self.end, 0, 1, 0));
  }
}

For ScrollTriggers that are attached to a containerAnimation, the start/end values are actually progress values (between 0 and 1, referring to the progress of that containerAnimation). So we can simply sense if the start value is NEGATIVE (meaning it's set to start before the containerAnimation's beginning), and adjust its progress accordingly. the gsap.utils.mapRange() is perfect for that. We're basically trying to figure out what the progress value of that tween would be at the 0 point of the containerAnimation. For example, if the start was -0.25 and end was 0.25, then 0 would fall right in the middle, thus its progress would be 0.5 (50%). 

 

Here's a fork: 

 

 

 

Does that clear things up? 

 

Hi! I would like to know why the picture has a blue background if the width of the picture is not set to 100vw, but for example 70vw? 
Is there any way to apply this script for small images that do not take up the whole width? 

I have attached a screenshot, you can see there. I just changed the width

.panel-wide {
  width: 70vw;
}

 

[GSAP Helper]

@GeorgeErshov I'm not sure exactly what you mean - can you please provide a minimal demo that clearly illustrates the issue? It's probably best for you to create a new topic rather than hijacking a very old one. 

 

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 dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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

 

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

[Rodrigo]

Hi,

 

Maybe something like this could be a good starting point:

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

 

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

 

Hopefully this helps.

Happy Tweening!

[Nuno Moreira]

Hello everyone.

 

Just got back to try finnish this gsap horizontal scroll. I would like to make "thumbs" clickable and scroll jump to the correct slider.

I've been looking for something similar in the forums but the way this horizontal scroll is done, i fried my brain trying to make it work

 

Is it possible to do it without anchors "#" because i using more than one horizontal scroll in the page.

 

Pen:

See the Pen mdavdEa by nmoreira (@nmoreira) on CodePen

 

If i am not making any sence, my sincere apologies

 

Thank you

Nuno

 

[Rodrigo]

Hi,

 

I don't have time to go through all the logic you have there, but normally this boils down to the calculations made in order to set the correct scroll point for each slide. For that is better to use the ScrollTrigger instance associated with the horizontal tween. Since that tween has ease: "none" that makes it super easy by using the number of panels and the scroll amount between the start and end points.

 

Here is a super simple example:

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

 

Hopefully this helps.

Happy Tweening!

[Nuno Moreira]

Thank you so much for the reply.

 

I'll check it out and see if i can get it to work

[Nuno Moreira]

Hi all. Just wanted to share "final" version

 

See the Pen ExMgLmE by nmoreira (@nmoreira) on CodePen

 

Thank you all

[Rodrigo]

Hey Nuno!

 

Thanks for reporting back and sharing your work, looks really amazing!  🥳

 

I really liked the effect in the second image, great job!! 👏👏

 

Happy Tweening!