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

Hi all. Just wanted to share "final" version

 

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

 

Thank you all

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

Thank you so much for the reply.

 

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

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

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

 

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

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.

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

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 😀

 

 

 

 

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

Duplicate pen to see the image jump on first run

 

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

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

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