Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lexbi

Getting a couple of console errors when using onStart & onComplete

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

Hi GreenSockers,

 

Can someone tell me where I'm going wrong here? I've added a codepen url to the post.

 

Basically I'm getting a couple of errors on click on the links in my example, I want to use display:none; & display:block; to show/hide because I want "active" elements to take the space of the ones that have been hidden.

 

It currently works exactly how I want, though I'm concerned about the errors I get in the console upon activating these elements:

 

Uncaught TypeError: this.vars[r].apply is not a function

Uncaught TypeError: this.vars.onStart.apply is not a function

 

Thanks,

Joe

See the Pen YXyaLa by lexbi (@lexbi) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

The issue here is that you're calling a jQuery object and method in the callback. GSAP callbacks reference a defined function or method. For example:

function myFunction(){
  console.log("foo");
}

TweenLite.to(element, time,{
  x:100,y:100,
  onComplete: myFunction//foo
});

What you could do is set up a couple of functions to show/hide the elements or call anonymous functions in the event callbacks:

// anonymous function
TweenLite.to(element, 0.3, {
  opacity: 1,
  y: '0%',
  force3D: true,
  delay: i,
  ease: Back.easeOut,
  onStart: function(){$(element).show()}
});

// defined function
function showElement(target){

  target.show();// target must be a jQuery object

}

TweenLite.to(element, 0.3, {
  opacity: 1,
  y: '0%',
  force3D: true,
  delay: i,
  ease: Back.easeOut,
  onStart: showElement,
  onStartParams:[$(element)]// GSAP handles the function arguments for you
});

Finally GSAP is smart enough to take care of using display along with opacity and visibility at the right time. You could try something like this:

//hide element
TweenLite.to(element, time,{
  autoAlpha:0, //sets opacity to 0 and visibility to hidden
  display: "none"// once the tween is completed changes the display to none
});

// show element
TweenLite.to(element, time,{
  autoAlpha:1, //sets opacity to 1 and visibility to visible
  display: "block"// once the tween is completed changes the display to block
});
  • Like 2
Link to post
Share on other sites

Great thanks for this!

 

Thanks for the heads up on the "display" options too.

 

I'll give this a go tomorrow, though for now it's home time :)

Link to post
Share on other sites
  • 2 months later...

Super!, it works for me too!

 

I am doing something like this

 

var tl = new TimelineLite();
 
    tl.to( $chevronIcon, 0.1, { rotation:90 } )
     .to( $childs, 0, { height: 0 }, "-=0.1" )
     .to( $childs, 0.3, { height: 35, onComplete: function(){ $childs.find("td").show() } }, "-=0.1" )
     .to( $childs, 0.3, { opacity:1 } );
 
By adding function(){  ... } on the "onComplete", solve my issue "Uncaught TypeError: this.vars[r].apply is not a function"
 
 
Thank you
Link to post
Share on other sites
  • 1 year later...

old threat but wondering if there is an option for this to use for stagger? obviously I want all of my duplicate classes to run before it hides! (onComplete)

Link to post
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.

×