Parallax effect to Hero

[Trabajador]

Please help me make the correct parallax effect for hero, I can’t do it and I don’t understand how to implement it

ref - https://parallax-image-effect.webflow.io/

See the Pen qBgEyKQ by trabajador-the-flexboxer (@trabajador-the-flexboxer) on CodePen

[Rodrigo]

Hi,

 

@Carl response in this thread should be a good starting point:

 

The main issue in your code though seems to be related to using the same trigger element for both sections in your loop

const mediaWrap = document.querySelectorAll('.page-hero');

mediaWrap.forEach(media => {
  const mediaImgs = media.querySelectorAll('.page-hero__bg img');
  mediaImgs.forEach(img => {
    const heightDiff = img.offsetHeight - img.parentElement.offsetHeight;
    const parallaxComp = 140;
    gsap.to(img.parentElement, {
      y: -heightDiff + parallaxComp,
      scale: 1.1,
      scrollTrigger: {
        trigger: mediaWrap,
        start: `top top`,
        scrub: 1.5,
      },
    });
  });
});

In your code mediaWrap is just one element and your page-hero sections are two, so both start at the same time.

 

I made a fork of your codepen here:

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

 

Hopefully this helps.

Happy Tweening!

[Trabajador]

@Rodrigo Thanks a lot! Have a good weekends 🙃

Just one question, why doesn’t parallax work without a scale?

[Trabajador]

I need parallax like here I would appreciate your explanation and help! 

Edited October 28, 2023 by Trabajador

[Rodrigo]

Hi,

 

You just created an infinite loop! The link in your previous post points to this thread! 🫠

 

Please review it and update it.

 

Happy Tweening!

[Trabajador]

updated

[Rodrigo]

Hi 

 

I'm on my phone now so I can't really tinker with the code, but in my first post in this thread I linked to another thread where @Carlactually provides a working demo of that particular effect

 

Hopefully this helps

Happy Tweening!

 

[Trabajador]

@Rodrigo
How can I repeat this without backgound-img and changing background position ?

[Rodrigo]

Hi,

 

It shouldn't be more complicated than this:

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

 

Hopefully this helps.

Happy Tweening!

[Trabajador]

Hello @Rodrigo
Thank you a lot!