Jump to content
Search Community

.call being skipped when timeScale is very high

avancamp test
Moderator Tag

Recommended Posts

One more edge case, I think this may be the last one:

 

import { gsap } from './package/index.js';

const header = document.createElement('h1');
header.textContent = 'Hello world.';
document.body.appendChild(header);
let called = false;

// On a timer because I'm not sure that putting this in
// an onComplete does the right thing in this test case.
setTimeout(report, 1000);

const parent = gsap.timeline({ autoRemoveChildren: true });
parent.add(makeChildA());
parent.progress(1);
setTimeout(() => {
	parent.add(makeChildB());
	parent.progress(1);
}, 100);

function makeChildA() {
	const tl = gsap.timeline();

	tl.to(header, 0.2, {
		x: 0,
		y: 150
	});

	return tl;
}

function makeChildB() {
	const tl = gsap.timeline();

	tl.to(header, 0.2, {
		x: 150,
		y: 0
	});

	tl.call(() => {
		called = true;
	});

	return tl;
}

function report() {
	if (called) {
		console.log('Success!');
	} else {
		console.log('Failed, callback skipped.');
	}
}

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Wow, you have some serious talent! :) Can I have you do all future testing for us, at least for timelines?

 

That'd only happen if you added a child with exactly the same duration to a timeline that had already rendered at a particular spot, in a way that wouldn't extend the duration of the parent timeline at all...and then tried to render again at the same spot. Nice find. I think it's resolved in the latest release. 

 

FYI, I'm boiling these edge cases down into individual test functions that I can run automatically on future releases to flag things if they fail. 

  • Like 3
Link to comment
Share on other sites

The new build does fix that case, but seems to have regressed in another area and caused this case to fail:

 

import { gsap } from './package/index.js';

const header = document.createElement('h1');
header.textContent = 'Hello world.';
document.body.appendChild(header);
let called = false;

// On a timer because I'm not sure that putting this in
// an onComplete does the right thing in this test case.
setTimeout(report, 1000);

const tl = gsap.timeline();

// Everything in here is skipped.
setTimeout(() => {
	tl.to(header, {
		duration: 0.2,
		x: 100
	});

	tl.call(() => {
		called = true;
	});
}, 100);

function report() {
	if (called) {
		console.log('Success!');
	} else {
		console.log('Failed, callback skipped.');
	}
}

 

  • Thanks 1
Link to comment
Share on other sites

4 minutes ago, avancamp said:

I think I'm all set now. I just ran my test suite 10 times and had zero failures. Thank you very much for accommodating my niche use case and being so responsive.

No problem. It was helpful to work through this stuff anyway. Part of what makes GSAP popular is not just because it's robust but because it's been hammered on so much and we squash any bugs that come up. In the end, it helps us deliver on our goal of earning a reputation for building tools that "just work" no matter what you throw at them. 

 

Anyway, thanks again. Let us know if you run into anything else. 🙌

Link to comment
Share on other sites

  • 2 weeks later...

Hi again, here's another repro with the release build of 3.2.0. I didn't make a codepen because the starter codepen is still using 3.1.1 it seems:

 

Things to note:

  • If the .call is removed, then the .to plays as expected.
  • If autoRemoveChildren is set to false, the .call is fired but the .to doesn't play. Again, commenting out the .call makes the .to play as expected.

 

import { gsap } from './esm/index.js';

const header = document.createElement('h1');
header.textContent = 'Hello world.';
document.body.appendChild(header);
let called = false;

// On a timer because I'm not sure that putting this in
// an onComplete does the right thing in this test case.
setTimeout(report, 1000);

const tl = gsap.timeline({autoRemoveChildren: true});

// Everything in here is skipped.
setTimeout(() => {
	tl.call(() => {
		called = true;
	});

	tl.to(header, {
		duration: 0.2,
		y: 100
	});
}, 500); // Seems to start failing around 300ms.

function report() {
	if (called) {
		console.log('Success!');
	} else {
		console.log('Failed, callback skipped.');
	}
}

 

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