Jump to content
Search Community

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

flowen test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 6
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

@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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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}>

 

  • Like 8
Link to comment
Share on other sites

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!!

  • Like 5
Link to comment
Share on other sites

@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!

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