Animate items in hero section onload and then parallax this items on scroll

[sleepmanserg]

Hi. I want to do an animation when page loaded with multiple items, and then parallax them on scroll different speed and direction, and parallax to top effect for second section on scroll. I don't understand why it's not working.

Thanks in advance.

See the Pen BawMdpK by sergey-sleepman (@sergey-sleepman) on CodePen

[OSUblake]

Welcome to the forums @sleepmanserg

 

You're going to need to fix some issues with your demo first. If you console.log out depth and movement, you'll see that they are invalid.

gsap.utils.toArray(".parallax").forEach(layer => {
	const depth = layer.dataset.depth;
	const movement = -(layer.offsetHeight * depth)
  console.log("depth", depth)
  console.log("movement", movement)
	tl.to(layer, {y: movement, ease: "none"}, 0)
});

 

 

That's because your elements don't have a depth data attribute. Only a speed one.

 

 

[sleepmanserg]

1 hour ago, OSUblake said:

Welcome to the forums @sleepmanserg

That's bcause your elements don't have a depth data attribute. Only a speed one

 

 

OMG, that was stupid of me. Apparently I need a rest...

Thank a lot!!!!