Search the Community
Showing results for tags '#timelinemax'.
Found 1 result
-
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()); }
