Parallax effect - have content in original position in the center of the screen

[pixelarchitect]

I am working on a very basic parallax effect and it works great so far, the only thing I would like to achieve is that the content block is actually in its "original" position once it is in the center of the screen. (So in my example the text should be vertical aligned with the other once it reaches the center of the screen)

/// CODEPEN IS REMOVED

Old javascript:
const parallax50 = gsap.utils.toArray('.parallax50');
parallax50.forEach(lax50 => {
  gsap.to(lax50, { 
    yPercent: -50,
    scrollTrigger: {
      trigger: lax50,
      start: "top 100%",
      end: "top 0%",
      scrub: true
    }
  })
});

Of course I could change the start to: top 50% but then there is no parallax effect for the first part.. I hope somebody can help!

Edited February 25, 2023 by pixelarchitect
Codepen is removed

[elegantseagulls]

6 minutes ago, pixelarchitect said:

So in my example the text should be vertical aligned with the other once it reaches the center of the screen

Try this:

 

gsap.fromTo(lax50, { 
  yPercent: 50,
}, {
  yPercent: -50,
  ease: 'none',
  scrollTrigger: {
    trigger: lax50,
    start: "top bottom", //top of element, bottom of viewport
    end: "bottom top",  //bottom of element, top of viewport
    scrub: true,
    markers: true,
  }
})

 

[pixelarchitect]

@elegantseagulls unfortunately im getting a 'Uncaught ReferenceError: lax50 is not defined'

[elegantseagulls]

8 minutes ago, pixelarchitect said:

lax50 is not defined

You'll need to keep that in your original .forEach() loop.

[pixelarchitect]

@elegantseagulls

Thank you so much for you time, so I updated the code to this:

///
OLD CODEPEN
///

And it does seem to work a little bit better but once I change the values behind the yPercent to higher values it still is not vertically aligned with the text on the right when the blocks are in the center of the screen  (the 50 value is also not fully vertical centered)

 

Edited February 25, 2023 by pixelarchitect
Codepen is removed

[elegantseagulls]

11 minutes ago, pixelarchitect said:

yPercent to higher values it still is not vertically aligned

Ah yes, that's cause it's taking the transformed position of the element.

 

const parallax50 = gsap.utils.toArray('.parallax50');
parallax50.forEach(lax50 => {
  gsap.fromTo(lax50, {
    yPercent: 50,
  }, {
    yPercent: -50,
    ease: 'none',
    scrollTrigger: {
      trigger: lax50,
      start: "-50% bottom", //top of element (offsetting 50% "from" transform), bottom of viewport
      end: "50% top",  //bottom of element (offsetting -50% "to" transform), top of viewport
      scrub: true,
      markers: true,
    }
  });
});

 

[pixelarchitect]

2 hours ago, elegantseagulls said:

Ah yes, that's cause it's taking the transformed position of the element.

 

const parallax50 = gsap.utils.toArray('.parallax50');
parallax50.forEach(lax50 => {
  gsap.fromTo(lax50, {
    yPercent: 50,
  }, {
    yPercent: -50,
    ease: 'none',
    scrollTrigger: {
      trigger: lax50,
      start: "-50% bottom", //top of element (offsetting 50% "from" transform), bottom of viewport
      end: "50% top",  //bottom of element (offsetting -50% "to" transform), top of viewport
      scrub: true,
      markers: true,
    }
  });
});

 

That did the trick, thank you!

See the Pen dyqprYJ by pixelarchitect (@pixelarchitect) on CodePen