Jump to content
GreenSock

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

Multi Callback Function to call different animation.

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

Hello there, I am trying to call 3 different functions to animate 3 different animation in one shot through init() function. How I can achieve this properly.

function init() {
   TweenMax.set("#object", {alpha: 0});
   a();
   b();
   c();
}

function a() {
   TweenMax.to("#object1", {x: "+=100px"});
}

function b() {
   TweenMax.to("#object2", {x: "+=200px"});
}

function c() {
   TweenMax.to("#objec3", {x: "+=300px"});
}

Hopefully I will know the solution as soon as possible thanks gsap masters!

Link to comment
Share on other sites

Hello Waren,

  • Do these tweens inside the functions a(), b(), and c() run after each other?
     
  • Or are they called at different times?
     
  • Or only called on page load?

:)

Link to comment
Share on other sites

Jonathan I need to call first the init function so that I will setup the positions of the elements and objects then it will call multiple functions with unique animations. I've tried to use onComplete event but it is only 1 function at time. I've tried this also...

TweenMax.set({onComplete: a});
TweenMax.set({onComplete: b});
TweenMax.set({onComplete: c});

But that's unprofessional.. is there any gsap method to call different animation at same time when the init functions is intialized.

Link to comment
Share on other sites

WarenGonzaga, you can use TimelineMax or TimelineLite and then you can use the position parameter.

 

TimelineMax.set() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

.set( target:Object, vars:Object, position:* )

Like this:

var tl = new TimelineMax();

tl
.set({onComplete: a}, 0)
.set({onComplete: b}, 0)
.set({onComplete: c}, 0);

// or give them the same label name for the position parameter
var tl = new TimelineMax();

tl
.set({onComplete: a}, "myfunctions")
.set({onComplete: b}, "myfunctions")
.set({onComplete: c}, "myfunctions");

Does that help? :)

Link to comment
Share on other sites

Hi Waren,

 

Like Jonathan, I'd be happy to help with this but I don't understand how the code you first provided doesn't work for you.

 

function init() {
   TweenMax.set("#object", {alpha: 0});
   a();
   b();
   c();
}

In that code you are calling a() b() and c() in the init function at the same time as quickly as possible. 

I'm just not seeing why you would need GSAP to call those 3 functions for you. Is there an animation in init() that needs to run first?

 

Perhaps if you moved over to a reduced Codepen demo we could better see and understand what isn't happening properly and suggest a good solution.

You can just fork this demo: http://codepen.io/GreenSock/pen/hbCir add very basic code and send us the link.

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