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

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

Share this post


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

Share this post


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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×