Animating with Intersection Observer and Timeline

[Its_Lefty]

Hi there!

I'm working on creating an animated timeline. At first I was using the Intersection Observer only but I've just added GSAP in order to have more control of the animations.

 

Below you can see my attempt. The issue is that the viewport is being ignored, all animations fire although they are not in the viewport

I have set a threshold of 1 but it looks like it is not helping.
 

What is the issue here? Thanks for any help!

edit: New CodePen below

[mikel]

Hey @Its_Lefty,

 

Most importantly: Don't mix css transforms with js.
Let GSAP do the job. 

And check the intersection tutorial 

 

See the Pen JjdOmZg by mikeK (@mikeK) on CodePen

 

 

Happy tweening ...

Mikel

[Its_Lefty]

Wow, thanks a lot! Especially with the animating border height. I was also planning to add this after fixing my issue.

So I guess my mistake was not using the timeline options at all, I need to get a closer look into the docs.
 

Unfortunately there is no more staggering of the items, if you see multiple sections at once in the viewport.

Is this possible or do I need something like ScrollMagic for that?

[mikel]

Hey @Its_Lefty,

 

For the demo (low height) the section height is only 400px, therefore the second section is already in the viewport at great heights.
It is up to you to change the height of the sections or set a higher threshold (target 'section' should be 60% visible and animation should run).

 

Play with this parameter and test different version.

 

Happy playing ...

Mikel

[ZachSaucier]

Alternatively, you could create a timeline with all the animations with labels between each section and then use .tweenFromTo() based on the section that's been intersected. That way it will play it sequentially if both are in view.

[Its_Lefty]

@mikel Thanks. I've tested it by forking your pen and setting a higher threshold but it won't help if multiple elements are in view. The animations all start at the same time. Unfortunately maxing up the heights of the sections is not an option.

So I guess I need to use the tweenFromTo option like @ZachSaucier suggested.
I've tried using it by forking mikels pen, see my result:

See the Pen yLNjONN by ItsLefty (@ItsLefty) on CodePen

There is something wrong but I don't know the issue. Thanks for any help!

 

[mikel]

Hey @Its_Lefty,

 

you could use rootMargin - for example

 

var options = {
threshold: 0.2, // target 'section' should be 20% visible
rootMargin: '0px 0px -50% 0px' // above half of windowHeight
};

This option doesn´t work in a CodePen ( why ??).

Tested on my computer - works / looks great.

You could usa a rootMargin only, without threshold.

 

Stay healthy ...

Mikel