timeline won't pause (nor pause() or paused(true)

[flowen 13 Likes (Newbie)]

So the codepen does work, silly enough. Surely there's a difference. I use a clickhandler in the codepen, but I use the intersection Observer to fire the pause event. 

 

When I log .paused() It always returns true (using the intersection observer). But visually I can see the animation hasn't paused (scrolling up and back down)

 

I tried setting it with both tl.pause() and tl.paused(true)

See the Pen xyMqaK?editors=1111 by flowen (@flowen) on CodePen

[Rodrigo 2,662 Likes (Superhero)]

This might be somewhere else in your app.

 

Can you create a simplified sample in https://stackblitz.com/ using just the sun component and all it's dependencies. It seems that you're not passing any props to it, so it shouldn't be a problem. Don't worry about the Morph SVG plugin, just use any other property like x, y, rotation, etc, so you don't expose your club member's plugin.

 

The main point is to find out what is happening in the component did mount hook and how the intersection observer package is working with the child being passed, because in theory your code looks good and it should work as it is in the codepen sample.

[GreenSock 8,117 Likes (Superhero)]

Howdy @flowen. Please follow @Rodrigo's advice and also we'd appreciate it if you didn't post the members-only plugins in public github repos because that makes it super easy for people to steal without getting the proper membership/license. Thanks a bunch!

 

You can use the special trial versions of the bonus plugins listed here: 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 and they'll work on stackblitz.com too. 

 

Happy tweening!

[flowen 13 Likes (Newbie)]

 

@GreenSock Ah apologies! Never thought of this. I removed the link in the first topic and will try to move the public repo (not sure if I can though, netlify seems to only work with github and not with bitbucket)

 

 

[flowen 13 Likes (Newbie)]

16 hours ago, Rodrigo said:

This might be somewhere else in your app.

 

Can you create a simplified sample in https://stackblitz.com/ using just the sun component and all it's dependencies. It seems that you're not passing any props to it, so it shouldn't be a problem. Don't worry about the Morph SVG plugin, just use any other property like x, y, rotation, etc, so you don't expose your club member's plugin.

 

The main point is to find out what is happening in the component did mount hook and how the intersection observer package is working with the child being passed, because in theory your code looks good and it should work as it is in the codepen sample.

 

Hi Rodigo,

 

Awesome, I posted the simplified sample here (can edit). 

 

So I noticed some interesting behaviour:

If you scroll down, the animation starts (all good). 

If you scroll up in the middle of the animation - easiest done with the 3rd step - and go back down, you see the animation has continued. 

But the logs (oncomplete) don't show that. 

 

Then the next iteration, the logs will accumulate. So if you wait for the timeline to play again, I can see tl3 logs 2x and this keeps adding up. 

 

I'm curious to see how you would debug it @Rodrigo. I logged the ref to the observer, but I'm not sure that's what I should be looking for. 

[Sahil 2,541 Likes (Superhero)]

12 minutes ago, flowen said:

netlify seems to only work with github and not with bitbucket

 

There is blog post saying netlify supports gitlab.

[Rodrigo 2,662 Likes (Superhero)]

@flowen There are components you're importing into the sample that are not present in the folder structure of your sample:

 

import Title from './Title'
import Description from './Description'
import NameDrawn from './NameDrawn'
import Sun from './Sun'

 

Stackblitz is returning an error during compiling:

 

Import error, can't find files:

./Title
./Description
./NameDrawn
./Sun

 

Please add those components and also the logs in order to see what's happening.

[flowen 13 Likes (Newbie)]

18 hours ago, Rodrigo said:

@flowen There are components you're importing into the sample that are not present in the folder structure of your sample:

 

import Title from './Title'
import Description from './Description'
import NameDrawn from './NameDrawn'
import Sun from './Sun'

 

Stackblitz is returning an error during compiling:

 

Import error, can't find files:

./Title
./Description
./NameDrawn
./Sun

 

Please add those components and also the logs in order to see what's happening.

I saw your reply and I knew something was wrong: somehow it didn't save the project. 

 

I created a new version, but it seems stackblitz has some problems. I have the sample ready, saved several times now and whenever I reopen the same url I get to see the old code. 

 

Strangely I can download the source code, with the correct code and files, so instead I'll attach it. 

 

Funny enough I also see different behaviour now  Now I wonder if this might be a stackblitz thing .. Anyways:

When I scroll up during TL-3, it does correctly pause and play when I scroll back down. 

 

But:

- on first view TL1+2 are immediately completed, without being played

 

This happens more randomly it seems:

- When I scroll down, seemingly randomly, the timeline gets stuck and 'TL-3 completed' is continuously being logged. 

or: 

- even stranger: the timeline pauses work fine. But TL-3 takes an awful lot of time to start playing again.

This is a sample log from this behaviour:

 

Quote

play
TL-3 completed
TL-1+2 completed
TL-3 completed
TL-3 completed
TL-3 completed
TL-1+2 completed
TL-3 completed
TL-3 completed
TL-3 completed

 

react-x8dna1.zip

[OSUblake 9,990 Likes (Superhero)]

An example of triggering animations with the Intersection Observer API.

 

See the Pen WaLjNL by osublake (@osublake) on CodePen

 

Notice how the handler only toggles the playback state of an animation. 

 

if (entry.isIntersecting) {
   // play animation
} else {
   // pause animation
} 

 

 

Your handler is adding the same animations to an already existing timeline, so it's getting longer and longer every time entry.isIntersecting is true. So maybe something like this.

 

inView(entry) {
  if (entry.isIntersecting) {

    if (!this.state.firstInview){
      TweenMax.to(this.sun, 4, {opacity: 1})
      this.setState({firstInview: true})
    }

    this.tl.play()
  } else {
    this.tl.pause();
  }
}

componentDidMount() {
  
  TweenMax.set(this.sun, {opacity: 0});
  
  this.tl = new TimelineMax({ yoyo: true, repeat: -1, paused: true })
    .to('.sun-flare--1a', 1, { x:50})
    .to('.sun-flare--2a', 1, { y:50, onComplete: () => console.log('TL-1+2 completed') }, 0)
    .to('.sun-flare--3a', 3.5, { y: 150, onComplete: () => console.log('TL-3 completed') });
}

 

 

And your click handler isn't working because of the parentheses. That will immediately execute the function.

 

// Bad
<svg onClick = {this.clickHander()}>
  
// Good
<svg onClick = {this.clickHander}>

 

[Rodrigo 2,662 Likes (Superhero)]

As Blake mentions, when creating timelines in React, always use the componentDidMount hook, because that is run only once in the component's lifecycle, thus creating the animation only once and after all the elements have been added to the DOM and the component has been rendered.

 

It seems to work as intended with the changes Blake pointed out:

 

https://stackblitz.com/edit/react-timeline-pause-flow?file=Sun.js

 

Also there is this sample from the GSAP-React guide:

 

https://stackblitz.com/edit/gsap-react-timeline-sequence

 

Happy Tweening!!

[flowen 13 Likes (Newbie)]

@OSUblake

nice! Thanks so much for figuring this out and explaining what I did wrong. This makes complete sense. I actually used this pattern in other components w the observer as well, but got away with it because I would unsubscribe after firing once ?

 

Also the example you shared looks great!