Intersection Observer Parallax (Ticker)

[Dmytro Troshchylo 2 Likes (Newbie)]

Hello dear friends.

I try to use some parallax effects using Intersection Observer following this article: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa

---

When I set wrapper position to relative its elements which I want to animate are getting last stop of animation and don't listen to progress property.

---

Thank you in advance.

See the Pen gOaKjbw by DmytroSur (@DmytroSur) on CodePen

[Karliky 11 Likes (Newbie)]

I would say that it's not a GSAP issue but a HTML/CSS issue.

 

Anyway, I think you should wrap the HTML in a container whose position relative and remove the relative from the img-wrapper:

 

See the Pen eYpKLmY by karliky (@karliky) on CodePen

[Dmytro Troshchylo 2 Likes (Newbie)]

Thank you @Karliky

It works well.

But that needs one extra container. If I have a lot of targets on page I can easily lost one.

This is interesting for me how 'relative' affects on animation.

If we will use something like:

if (entry.isIntersecting) {
  gsap.to(target, { y: 100, duration: 10 })
} 

— it runs like we expect. Even if parent is relative. 🤷