I have an animation that shows outlines of areas for few dates over years. As I move the slider I want to display an estimated date for each of the tweens. Meaning, if I have shape data for March 2010 and it's tweening to shape data September 2010 then as I move the slider I want to display the dates like March, April, May, June, July, August, September to show up as I slide. It seems like labels might be the answer but I don't know how to attached to each tween. Or maybe it's with the time property? ideas?
Here is my code:
var tl = new TimelineMax({onUpdate:updateSlider});
tl.to("#March_2010_small", 1, {morphSVG:"#September_2010_small"}, 0)
.to("#March_2010_large", 1, {morphSVG:"#September_2010_large"}, 0)
.add("scene2")
.to("#March_2010_small", 1, {morphSVG:"#September_2011_small"}, "scene2")
.to("#March_2010_large", 1, {morphSVG:"#September_2011_large"}, "scene2");
$("#slider").slider({
range: false,
min: 0,
max: 1,
step:.001,
slide: function ( event, ui ) {
tl.progress( ui.value ).pause();
},
stop: function () {
tl.play();
}
});
function updateSlider() {
$("#slider").slider("value", tl.progress());
$("#date").text(tl.time());
}