.call being skipped when timeScale is very high

[avancamp 19 Likes (Newbie)]

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.');
	}
}

 

[GreenSock 18,592 Likes (Superhero)]

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. 

[avancamp 19 Likes (Newbie)]

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.');
	}
}

 

[Shrug ¯\_(ツ)_/¯ 947 Likes (Leader)]

11 hours ago, GreenSock said:

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

 

@avancamp & @GreenSock Must be something about you Chicagoans. 😝 

[GreenSock 18,592 Likes (Superhero)]

Thanks for the reduced test case(s). Should be resolved now. 👍

[avancamp 19 Likes (Newbie)]

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.

[GreenSock 18,592 Likes (Superhero)]

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

[avancamp 19 Likes (Newbie)]

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.');
	}
}

 

[GreenSock 18,592 Likes (Superhero)]

Another gem That'd only happen if you place it EXACTLY at the start of the timeline AND the timeline had already completed AND you had autoRemoveChildren: true. Should be resolved in the next release: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

Better? 

[avancamp 19 Likes (Newbie)]

Thanks @GreenSock -- any chance I could get this in npm tarball form to verify the fix in my real-world app?

[GreenSock 18,592 Likes (Superhero)]

Sure, here you go: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-beta.tgz

[avancamp 19 Likes (Newbie)]

Seems to be fixed, thanks!