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.