slideshow with controls

[paulbr 0 Likes (Newbie)]

I have a short slideshow with animated slides. I'm trying to have some buttons call up each slide as they are clicked but I'm having trouble getting the buttons to function. I suppose I am having difficulty understanding how to apply labels and how to skip to those labels in the timeline from a click. Does anyone know of a tutorial that covers this kind of stuff? Thanks.

[Carl 9,066 Likes (Superhero)]

Short of creating an entire file for you, do you have some sample code or a partially working example that I can aid you in fixing?

 

Are you having trouble adding a label at the proper time?

Do you want to play to a label? Play from a label? Stop at a label?

 

Getting a basic label-based navigation is fairly straight-forward.

Let me know what I can do to help you over the hurdles.

 

 

c

[Michael71 59 Likes (Contributor)]

For a slideshow, even idvidual declarations of TweenLite/Max would also be straightforward to implement

 

$("#next).live("click",function(){
   var imgContainer = $("#imgContainer");
    TweenLite.to(imgContainer, 1.0, {css:{'left':'-=200'}});
});
// 200 is the width of your container or something
// same thing applies for previous button and add some logic

[paulbr 0 Likes (Newbie)]

here's an example of what i'm trying to do:

 

$(function() {

var speedometer = document.getElementById("speedometer"),
 man = document.getElementById("man"),
 woman = document.getElementById("woman")



var tl = new TimelineMax({repeat:-1,repeatDelay:.5});
  tl.to( man, 2, {css:{left:100}})
  tl.to( man, 2, {css:{left:"100%"}}, 2)
  tl.to( woman, 2, {css:{left:100}})
  tl.to( woman, 2, {css:{left:"100%"}}, 2)
  tl.to( speedometer, 2, {css:{left:100}})
  tl.to( speedometer, 2, {css:{left:"100%"}}, 2)

});

 

There are three "slides" here. Each slide moves 100px into the stage area hangs out for a couple seconds then continues moving left out of the stage area. Then the next slide moves in. This just repeats forever using the timeline.

 

Now what I'd like to have happen is to have three buttons (divs?) that hang out on top of the slide show. When you click button 1 it starts the first slide coming in from the left again, clicking button 2 starts slide 2, etc. Ideally I'd like the currently playing slide to fade out then the other one to start playing right then but I think I can handle that part on my own once I've got the controls figured out a bit better.

 

thanks.

[Carl 9,066 Likes (Superhero)]

I don't follow your explanation exactly but here is a very simple example of adding a label and jumping to it:

 

//start the timeline in a paused state

var tl = new TimelineMax({repeat:-1,repeatDelay:.5, paused:true});
  tl.to( man, 2, {css:{left:100}})
  tl.to( man, 2, {css:{left:"100%"}}, 2)

//add label immediately after 2nd man tween ends
  tl.append("introWoman");
  tl.to( woman, 2, {css:{left:100}})
  tl.to( woman, 2, {css:{left:"100%"}}, 2)



  tl.to( speedometer, 2, {css:{left:100}})
  tl.to( speedometer, 2, {css:{left:"100%"}}, 2)



tl.play("introWoman");

 

if you want to trigger an out animation on the current section and then jump to any other sections in animation, it can get a little tricky, especially if you are clicking buttons while transitions are happening. Its all possible. I did a whole series on smooth TimelineMax transitions for Flash. It probably won't help much, but it serves as a good example of what is possible: http://www.snorkl.tv/2011/04/bullet-proof-timelinemax-transitions-part-3-reverse-out-or-forward-out/

[paulbr 0 Likes (Newbie)]

thanks for the example above. i guess the only remaining question for me is how can i apply the play("introwoman") bit of functionality to a div on the page? basically trying to create a button that will jump to that part of the timeline. does that make sense?

[Carl 9,066 Likes (Superhero)]

if you are using jQuery, see Michael71's code above for adding a click function.

 

or do something like:

 

document.getElementById('divID').onclick=function() {
    tl.play("introWoman");
};

[paulbr 0 Likes (Newbie)]

ah ok. i think i get it now. thanks for all your help!