Jump to content
Search Community

Callback function with GSAP not working in Meteor

theller5567 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 am unable to get the callback functionality to work while using Meteor framework. I have copied functions straight from the GSAP docs and i still get type error: this._callback is not a function. I have tried everything and looked everywhere for a solution but no dice. Please, any help would be greatly appreciated. If callbacks don't work with Meteor or i am just flat out doing something wrong please let me know.

 

I would add a codepen but i don't believe they have a Meteor framework to use.

 

Template.home.rendered = function(){
    TweenMax.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5, myCompleteAll );
    function myCompleteAll() {
       console.log("all tweens complete");
      }
}
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

I'm not familiar with Meteor, however we haven't heard any complaints about anything like this.

It looks to me that your syntax is valid and should not be throwing errors. 

 

Perhaps if you post a link to a live Meteor example that only has enough code to show the error it will help us see what's wrong. 

Link to comment
Share on other sites

Thank you, here is a brief codepen that shows the error i am getting as of now. 

See the Pen GZWdoq?editors=1011 by theller5567 (@theller5567) on CodePen

 

Console error: invalid onCompleteAll tween value: undefined

 

Basically i am trying to get each icon to animate in and as soon the animation is done per image i want to it to fadeout(opacity:0). Didn't think doing so would be too hard but i am losing hair over it.

 

I was finally able to get a callback to work but now when the first image is done animating it makes all the images fadeOut to opacity:0. So you basically only get to see about half of the images now cause their opacity is  set to 0 before they even animate in.

Link to comment
Share on other sites

Thanks for the demo. Very helpful.

 

The syntax changed quite a bit from what you originally posted.

 

This should work fine:

 

 

$(document).ready(function(){
  var myCompleteAll = function() {
 console.log("all tweens complete");
}
  TweenMax.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1},  0.5, myCompleteAll);
   
});

 

http://codepen.io/GreenSock/pen/BKWxpZ?editors=1111

 

FWIW this would work too

 

$(document).ready(function(){
  
  TweenMax.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1},  0.5, myCompleteAll);
function myCompleteAll() {
    console.log("all done");
  }   
});
  • Like 1
Link to comment
Share on other sites

Hi theller5567  :)

 

I'll throw my 2 cents worth out there for you. 

 

You could also accomplish this without an additional function. Creating a timeline and adding a second stagger that starts a second later can make this pretty simple.

var tl = new TimelineMax();
tl.staggerTo(".img", 1, {rotation:360, y:100, opacity: 1}, 0.5)
  .staggerTo(".img", 1, {autoAlpha: 0}, 0.5, 1);

See the Pen oxZdaL by PointC (@PointC) on CodePen

 

Hopefully that gives you another idea and helps a bit.

 

Happy tweening. 

:)

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