Jump to content
Search Community

I made very simple codepen to demostrate Intersection Observer question I have...

kohlej test
Moderator Tag

Recommended Posts

Hi everyone, 

I attached a codepen demo that shows intersection observer with gsap animation.

Everything works as intended, but I ran into problem if I wanted to have completly different animations for each element.

I did this using multiple intersection observers (not shown in demo), but that I assume would be a hit on performance and also bad for DRY code. 

I made it very simple in demo, but the real examples would be animating different elements with different animations, 
so for sake of keeping it simple, let's say I want each box to be translated form different side.

What kind of approach would be needed to put everything in one intersection observer? Is there any codepen example I can try to savlage of?



 

See the Pen QWjOrvO?editors=1010 by artyor (@artyor) on CodePen

Link to comment
Share on other sites

Hey kohlej.

 

14 hours ago, kohlej said:

I did this using multiple intersection observers (not shown in demo), but that I assume would be a hit on performance and also bad for DRY code.

This isn't too bad for performance, though it's not optimal. And in terms of keeping things DRY, if it's in a loop or something it'd be okay.

 

14 hours ago, kohlej said:

What kind of approach would be needed to put everything in one intersection observer?

It's not clear exactly what sort of different values you're wanting. If you can use a formula based on the index then that's one way to do it. If you can't use a formula, I might use data attributes on each element to determine how it should be animated. Then inside of the intersection observer callback you get the animation values from those data attributes.

  • Like 2
Link to comment
Share on other sites

On 5/4/2020 at 2:55 PM, ZachSaucier said:

Hey kohlej.

 

This isn't too bad for performance, though it's not optimal. And in terms of keeping things DRY, if it's in a loop or something it'd be okay.

 

It's not clear exactly what sort of different values you're wanting. If you can use a formula based on the index then that's one way to do it. If you can't use a formula, I might use data attributes on each element to determine how it should be animated. Then inside of the intersection observer callback you get the animation values from those data attributes.

Hey,

Thank you for reply Zach.

I think index might not work as the layout is rather complex, but I will try with data attributes. 

Link to comment
Share on other sites

On 5/5/2020 at 5:56 AM, kohlej said:

I think index might not work as the layout is rather complex,

You can create the timelines ahead of time, push them all into an array and play the appropriate one based on the index of the observer. Just a thought. :)

 

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