Jump to content
Search Community

Timeline - go to label and play ??

MGTH 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

Hey .. how's it going ??

 

I'm playing around with combining GS and Adobe Edge .. Trying to setup a simple timeline where you can jump to a specific label in the timeline.

 

CODE LIKE SO:

 

..

	 // GS TIMELINE ANIMS
  var tlMain = new TimelineMax({paused:true});
	 tlMain.timeScale(4);
	 // MAIN NAV
	 // Start ALL ALPHA 0
	 tlMain.appendMultiple(TweenMax.allTo([M1_H, M2_H, M3_H], 0, {css:{autoAlpha:0}}));
	 tlMain.append("Main_Start");

	 // M1_H
	 tlMain.append("M1_in");
	 tlMain.append(TweenMax.to([M1_H], 3, {css:{autoAlpha:1}, ease:Power3.easeInOut}), 1, "M1");
	 tlMain.append(pause);
	 tlMain.append("M1_out");
	 tlMain.append(TweenMax.to([M1_H], 2, {css:{autoAlpha:0}, ease:Power3.easeInOut}));
	 // M2_H
	 tlMain.append("M2_in");
	 tlMain.append(TweenMax.to([M2_H], 3, {css:{autoAlpha:1}, ease:Power3.easeInOut}), 1, "M2");
	 tlMain.append(pause);
	 tlMain.append("M2_out");
	 tlMain.append(TweenMax.to([M2_H], 2, {css:{autoAlpha:0}, ease:Power3.easeInOut}));
	 // M3_H
	 tlMain.append("M3_in");
	 tlMain.append(TweenMax.to([M3_H], 3, {css:{autoAlpha:1}, ease:Power3.easeInOut}), 1, "M3");
	 tlMain.append(pause);
	 tlMain.append("M3_out");
	 tlMain.append(TweenMax.to([M3_H], 2, {css:{autoAlpha:0}, ease:Power3.easeInOut}));
	 // MAIN RESTART
	 tlMain.append.play('Main_Start');

// BUTT SETUP

  // BUTT M1
   Symbol.bindElementAction(compId, symbolName, M1_Nav, "mouseover", function(sym, e) {
	 // insert code to be run when the mouse hovers over the object
	 tlMain.play("M1_in");
  });
  //Edge binding end
  // BUTT M2
   Symbol.bindElementAction(compId, symbolName, M2_Nav, "mouseover", function(sym, e) {
	 // insert code to be run when the mouse hovers over the object
	 tlMain.play("M2_in");
  });
  //Edge binding end
  // BUTT M3
   Symbol.bindElementAction(compId, symbolName, M3_Nav, "mouseover", function(sym, e) {
	 // insert code to be run when the mouse hovers over the object
	 tlMain.play("M3_in");
  });
  //Edge binding end

...

 

The bit thats messing up is .. tlMain.append(pause); .. when I try to go to a label in the timeline .. for example M3_in using .. tlMain.play("M3_in"); .. nothing happens it stays in the paused state ??

 

Not sure what I'm doing wrong

 

cheers

 

Rory

Link to comment
Share on other sites

Hi,

 

Sorry, this post escaped me yesterday.

 

Does it work if you remove the all the tlMain.append(pause) code?

 

Is pause a method that is defined somewhere?

 

 

function pause(){

tlMain.pause();

}

 

When you view the javascript console do you see an error along the lines of

 

Uncaught ReferenceError: pause is not defined

I myself had a bit of trouble integrating with Edge, but the rest of your code appears solid with the exception of

 

tlMain.append.play('Main_Start');

 

let us know if defining a pause function works.

 

-c

Link to comment
Share on other sites

Morning all .. Carl .. you got it !!

 

So do I have to define other properties ( i.e restart() .. reverse() .. resume() .. ) before they will work in my timeline ??

 

Sorry if thats something I should know already .. i'm new to this and just now it feels like its breaking my head !!

 

 

Wondering if your gonna re-do your legendary Bullet-Proof series in js for us .. thats what i'm playing around with just now .. If i manage to knock together a rough template of it working I'll post it for people to mess with !!

 

 

Cheers for all the support .. really appreciated !!

 

..

 

oh yeah .. there was no errors in the js console and forget about the:

 

tlMain.append.play('Main_Start');

 

line that just slipped through when I was editing it down.

Link to comment
Share on other sites

Hi MGTH

 

Glad you got it working. Thanks for the compliments. Yes, I imagine at some point I will try to port the "bullet-proof" series over to js. Nice to know people found it useful in AS3.

 

And I haven't forgotten about your question about using the other built in methods like reverse() in a timeline vs defining custom ones (like we did for pause). I'm in the process of trying to find the best answer for you.

 

stay tuned.

 

-c

Link to comment
Share on other sites

ok, back to your question about adding calls to pause() reverse() etc in a timeline. I got some help from upstairs.

 

In as3 there is no problem doing:

 

tlMain.append(tl.pause) 

 

or

 

tlMain.call(tl.pause)

 

Javascript has issues with scope and by the time the pause function is called it sort of forgets where it should be looking.

 

The solution is to specify the scope via the third parameter of the call method

 

Javascript

 


tl.call(pause, null, tl) // method, params, scope
tl.call(reverse, null, tl)

 

-c

 

ps. I just cleaned out my inbox so give that pm another shot if you like.

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...