Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Dmytro Troshchylo

Intersection Observer Parallax (Ticker)

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

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

  • Like 3
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.