Why does image paralax not work in this demo and how to enable it?

[MarkTan]

I would like to enable parallax for my images and have smooth scrolling using Locomotive.

 

Please tell me what is wrong with my example and how can I add a parallax there?

 

...

P.S. Open the full screen version to display the images correctly.

 

[akapowl]

Hey @MarkTan

 

It probably doesn't work, because you are doing nothing to your images with that ScrollTrigger-tween.

 

I applied a translation on the y-axis to the images on scroll (and changed the tween to a .from() tween) for example, and it seeems to do what it's supposed to.

 

See the Pen 23814605940ae3c51ef1476bdd30ca53 by akapowl (@akapowl) on CodePen

 

 

 

Also, codepen told me to pinch you in the leg, when I couldn't view your pen in fullpage view  ...so consider this done.

And btw, welcome to the forums  

 

Hope this helps.

Cheers

[MarkTan]

11 minutes ago, akapowl said:

Hey @MarkTan

...

 

Excuse me, I inserted an old example.
I will now add a new codepen and rewrite my question.
 

[MarkTan]

I managed to make, as it seems to me, quite a good image parallax together with a smooth Locomotive scroll:

See the Pen eYzVGjY?editors=0110 by MarkTan (@MarkTan) on CodePen

 

If someone has optimization tips, I would be happy to hear them 😃