Jump to content
Search Community

Intersection Observer Parallax (Ticker)

Dmytro Troshchylo test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. 🤷

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...