tl.play() does not work inside an IntersectionObserver

[Guest]

I created an animation and I am trying to make make it run using an observer but it does not work and I don't know why. Can you please tell me what I am doing wrong?

I added the text to simulate the content on my project

See the Pen powjqyg by raul-rogojan (@raul-rogojan) on CodePen

[nico fonseca]

Hey @CodyHill, first you need to declare your timelines outside the observer, otherwise every time it is activated you will have a new timeline
and then you set pause as default property in the first timeline, so all the timeline tweens are paused.

See the Pen 443a63d77367c077e1e674c7d3726834 by nicofonseca (@nicofonseca) on CodePen

[PointC]

Hi @CodyHill 

 

Welcome to the forum.

 

I'd also point out that GreenSock's ScrollTrigger plugin makes this type of animation much easier.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Here's your demo with a quick conversion to ScrollTrigger.

See the Pen 5403206d8e9e3b3b87e18a9eafe1810e by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening and welcome aboard.

 

[Guest]

Thank you! But it seems like the skeleton animation does not work.

  tl.from("#skeleton", {
    y: "20%",
    duration: 1
  })

EDITE:  My bad, it works! but starts on refresh not when the intersection is true

[Guest]

Hi @PointC This is awesome! Thank you!