Jump to content
Search Community

callback.call is not a function

mrbdigital 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

I have a function that I would like to call after a staggerTo in a TimelineMax is called but am getting the error that 'callback.call is not a function'.

 

I am pretty sure my initial call is correct:

 

const heroTimeline = new TimelineLite({delay:'1'});

heroTimeline
    .add('start')
    .staggerTo([stage1_h1, stage1_h2], 1, {opacity:1}, 0.25, 0, '+=0', stage2);

 

And my reference to the second function is correct....here is the second function:

 

function stage2(){
    heroTimeline
        .add('stage2')
        .staggerTo([stage1_h1_highlight_1, stage1_h1_highlight_2], 1, {width:'100%'}, 0.5);
}

 

But I don't think that is the problem....at least not what is in the second function. As it doesn't even seem to be getting in there.

 

The variables in the array(s) have been defined and are working fine.

Link to comment
Share on other sites

  • 2 months later...

I'm having the same issue using create-react-app, not sure if I made the same/similar  error? I tried to move some things around in my staggerTo methods but still getting the error...any ideas? Not sure if this is a react-thing, or a google chrome thing, but I do suspect a syntax error?

 

Per the timelineMax staggerTo docs, is it necessary to add an onCompleteAll callback, or some way to let the animations know when the animation is complete? I get this error at the end of the timeline, and sometimes during if I scrub too quickly through the timeline. I am using this for a data visualization so the timeline will be up to 15 minutes long!

 

The error:

image.thumb.png.c0702c2d8feac63fccfb718f84b5ade5.png

 

So the note about speed optimization could suggest a browser issue? But I get the same thing in Firefox too.

 

Here is my animation code, which lives in react's componentDidMount method - any suggestions are appreciated!

	updateSlider() {
		this.setState({
			sliderValue: Math.round(this.tl.progress() * bookingData.length)
		});
	}

	componentDidMount() {
		//Animations with GSAP

		this.tl = new TimelineMax({
			onUpdate: this.updateSlider,
			repeat: -1
		});
		//controls time in seconds in between booking cycles
		var next = 3;
		//controls fadeout
		var nextOpacity = 5;
		var opacity0 = 10;
		var fadeOutDelay = 10; //how long markers and lines remain on screen prior to fadeout
		var fadeOutDuration = 3; //how long it takes bookings to fadeout

		this.tl
			.staggerFrom(
				".animatedTick",
				7,
				{
					ease: Power3.easeInOut,
					y: 1000,
					opacity: 1
				},
				next
			)
			.staggerTo(
				".custMarkers",
				0.3,
				{
					autoAlpha: 1,
					ease: Elastic.easeOut.config(0.2, 1.5),
					opacity: 1,
					scale: 5,
					force3D: false,
					yoyo: true,
					repeat: 1
				},
				next,
				1
			)
			.staggerTo(
				".clientMarkers",
				0.3,
				{
					autoAlpha: 1,
					ease: Elastic.easeOut.config(0.2, 1.5),
					opacity: 1,
					scale: 5,
					force3D: false,
					yoyo: true,
					repeat: 1
				},
				next,
				1.5
			)
			.staggerTo(
				".lineAmation",
				1.5,

				{
					visibility: "visible",
					ease: Power3.easeOut,
					autoAlpha: 1,
					opacity: 1,

					strokeWidth: 2
				},
				next,
				2
			) //FadeOut animations are chained to the original timeline, with a new set of animations for each target

			.staggerTo(
				".animatedTick",
				fadeOutDuration,
				{
					delay: fadeOutDelay,
					autoAlpha: 0,
					y: -200,
					x: 100,
					scale: 0,
					rotationY: -360,
					display: "none",
					ease: SlowMo.easeOut
				},
				nextOpacity,
				opacity0
				//2
			)
			.staggerTo(
				".custMarkers",
				fadeOutDuration,
				{ delay: fadeOutDelay, autoAlpha: 0 },
				nextOpacity,
				opacity0,
				1
			)
			.staggerTo(
				".clientMarkers",
				fadeOutDuration,
				{ delay: fadeOutDelay, autoAlpha: 0 },
				nextOpacity,
				opacity0,
				1.5
			)
			.staggerTo(
				".lineAmation",
				fadeOutDuration,
				{ delay: fadeOutDelay, autoAlpha: 0 },
				nextOpacity,
				opacity0,
				2
			);
	}

 

 

To get an idea of the larger project, Here's two other threads I've initiated...sorry for being 'that guy' that does not post  a codepen, but this is a large full stack application with a lot of moving parts. Reduced case codepen is coming soon, possibly this weekend!

 

This one tells you a bit more what I'm up to - bigUps to Mikel!

 

And in this one Rodrigo helped out big time getting the range slider working!

 

Thanks all for the help!

Link to comment
Share on other sites

It looks like your last 3 staggerTo() calls have a NUMBER as a parameter where a callback function is expected. Like: 

 

.staggerTo(
                ".custMarkers",
                fadeOutDuration,
                { delay: fadeOutDelay, autoAlpha: 0 },
                nextOpacity,
                opacity0,
                1 // <-- BAD!!! Should be an onCompleteAll function. 
            )

 

See the docs: https://greensock.com/docs/TimelineLite/staggerTo()

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

Thanks! For now I just added a simple function to log that the animation is complete, and the animation restarts as expected with no errors (because of the repeat: -1 passed in as params to this.tl = new TimelineMax(....). Always a nice when it's an easy fix!

 

A quick note for posterity...depending on how you do this, especially with react, you may need to add 'this' in front of the onCompleteAll callback. Here's the WALL of code again:

 

	onCompleteAll() {
		console.log("Animation complete");
	}
	updateSlider() {
		this.setState({
			sliderValue: Math.round(this.tl.progress() * bookingData.length)
		});
	}

	componentDidMount() {
		bookingInterval();
		//animateBookings();

		//Animations with GSAP

		this.tl = new TimelineMax({
			onUpdate: this.updateSlider,
			repeat: -1
		});
		//controls time in seconds in between booking cycles
		var next = 3;
		//controls fadeout
		var nextOpacity = 5;
		var opacity0 = 10;
		var fadeOutDelay = 10; //how long markers and lines remain on screen prior to fadeout
		var fadeOutDuration = 3; //how long it takes bookings to fadeout

		this.tl
			.staggerFrom(
				".animatedTick",
				7,
				{
					ease: Power3.easeInOut,
					y: 1000,
					opacity: 1
				},
				next
			)
			.staggerTo(
				".custMarkers",
				0.3,
				{
					autoAlpha: 1,
					ease: Elastic.easeOut.config(0.2, 1.5),
					opacity: 1,
					scale: 5,
					force3D: false,
					yoyo: true,
					repeat: 1
				},
				next,
				1
			)
			.staggerTo(
				".clientMarkers",
				0.3,
				{
					autoAlpha: 1,
					ease: Elastic.easeOut.config(0.2, 1.5),
					opacity: 1,
					scale: 5,
					force3D: false,
					yoyo: true,
					repeat: 1
				},
				next,
				1.5
			)
			.staggerTo(
				".lineAmation",
				1.5,

				{
					visibility: "visible",
					ease: Power3.easeOut,
					autoAlpha: 1,
					opacity: 1,

					strokeWidth: 2
				},
				next,
				2
			) //FadeOut animations are chained to the original timeline, with a new set of animations for each target

			.staggerTo(
				".animatedTick",
				fadeOutDuration,
				{
					delay: fadeOutDelay,
					autoAlpha: 0,
					y: -200,
					x: 100,
					scale: 0,
					rotationY: -360,
					display: "none",
					ease: SlowMo.easeOut
				},
				nextOpacity,
				opacity0,
				this.onCompleteAll
			)
			.staggerTo(
				".custMarkers",
				fadeOutDuration,
				{ delay: fadeOutDelay, autoAlpha: 0 },
				nextOpacity,
				opacity0,
				this.onCompleteAll
			)
			.staggerTo(
				".clientMarkers",
				fadeOutDuration,
				{ delay: fadeOutDelay, autoAlpha: 0 },
				nextOpacity,
				opacity0,
				this.onCompleteAll
			)
			.staggerTo(
				".lineAmation",
				fadeOutDuration,
				{ delay: fadeOutDelay, autoAlpha: 0 },
				nextOpacity,
				opacity0,
				this.onCompleteAll
			);
	}

 

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