Why do you use offsetHeight in one of the parallax examples?

[Nickicool]

This is not exactly a GSAP question. Why in one of the parallax examples do you use offsetHeight, instead of a fixed value like this:

const movement = (1000 * depth)If use offsetHeight, elements with different heights and the same depth will move at different speeds.

 

I want to figure out whether I need it or not.

 

I also found that the images added by the ajax method do not work parallax animation, because for some reason they have zero height (or something that).

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

[Visual-Q]

The hero container and layers all share the same height, using their height gives you common baseline to multiply the parallax movement ratio against. 

If you use 800 * depth (the height of the elements) it produces the same result. offsetHeight just gets that value for you. 

 

You don't have to use this calculation, in this case it's convenient because the items are the same height, and the parallax movements are all relative to that height and Scrolltrigger also uses the hero element as a trigger so the scrub through is also relative to this height.

 

Synergy...

 

 

[ZachSaucier]

1 hour ago, Nickicool said:

I also found that the images added by the ajax method do not work parallax animation, because for some reason they have zero height (or something that).

You should set things up after they're loaded so that they have widths and heights that are measurable