Getting a couple of console errors when using onStart & onComplete

[lexbi 0 Likes (Newbie)]

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

[Rodrigo 5,895 Likes (Superhero)]

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

[lexbi 0 Likes (Newbie)]

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

[lexbi 0 Likes (Newbie)]

worked a treat thank you!

[Klerith 0 Likes (Newbie)]

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

[Eugene Rayner 25 Likes (Newbie)]

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)