Cannot get GSAP timelineMax to play through entire timeline?

[Caderial 1 Likes (Newbie)]

Hello GSAP community! Been learning GSAP as of late and really loving it however i am stuck in developing this particular banner.

 

I have set up all my html, css and JS created my ids and variables and developed a single timeline for animation. However it seems for some reason the timeline only plays the first 2 tweens and then stops even though i have more animation to follow.

 

have a look at my codepen to see what i am trying to achieve here: 

See the Pen LbYRVZ by Caderial (@Caderial) on CodePen

 

What i would like is to at first set mainScene, NYScene, NJScene, PAScene all to beoffscreen to the left by 322px. then the animation should kick in and slide in each scene and slide it back out then slide in the next scene and so on. But for some reason my first two timeline events happen with mainScene but then it stops?

 

Please advise. 

 

I am also open to any alternative methods of bringing in pages/scenes into and out of view that may be better then my solution.

 

thanks everyone!

 

 

[Oliver16Years 207 Likes (Specialist)]

Here is a basic solution but it needs a restart section:

See the Pen oYNWmm by oliver15years (@oliver15years) on CodePen

If you are in an iFrame, You don't need JQuery or document.getElementById() to access the DOM elements. Just use their ID as an identifier. I am always using labels to set anchors in time.

[Caderial 1 Likes (Newbie)]

Thanks for the response Oliver15Years ! 

 

I would have used the stagger method normally as well however this timeline will eventually have labels and pause functions to navigate between the scenes and therefor the stagger wouldn't work. I was hoping to find a solution that would allow me to animate the scenes with .to and ,from methods so i can insert labels to jump to and pauses to keep the screen in view until user interacts.

 

I come from and Flash and Google Web Designer toolset where i could set pages/Panels and bring them in as needed. not sure if there is a greensock equivalent or not. The idea i had was to set up a sequence of animated timelines and jump to the labels on interaction based on the panel/page i want to show when the user clicks a link in the banner.

 

Simplified timeline of events:

User load banner -> Main Slide Comes into view

User Clicks New York - > Mainslide fades out NYScene slides into view

ON THE NYScene If use clicks  Back -> Play NYScene outro Animation and load in MainScene panel back into view

The Same would go for the other two states NJ and PAScene from the MainScene.

 

I think the stagger method would not allow me the freedom to jump around using interaction .

 

Let me know what you think any and ALL input is welcome as I am just learning using this as a case study.

[Oliver16Years 207 Likes (Specialist)]

Check out this video about sequencing:
http://greensock.com/sequence-video
 

Set up a timeline sequence with a new TimelineMax/Lite, add labels to it and start moving around in it with

.addLabel()
.seek()
.tweenTo()
.pause()
.play()
.progress()
.restart()
...

You can find all the goodies here:
http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

If You need immediate interaction which is not in a timeline, just call a tween from an event handler like:

Stage.addEventListener( 'mouseover', function()
{
    TweenMax.to( BUTTON, 0.3, { x: 3, y: 3 } )
});

 

[Caderial 1 Likes (Newbie)]

Thanks Oliver15Years ! 

 

Could I then essentially set up all my animations into individual timelines then and just call them from functions like you have there, instead of jumping around one big timeline?