Help a Newb! Please.

[JohnPett]

Hi Forum-goers,

 

I am completely new to this platform and am having a few issues getting my timeline to run all objects at the same time. In my code I am simultaneously running another plugin that counts up numbers, which you can ignore, but I have included in the code any how. What I want to achieve is that all of the bars in the chart animate out at the same time. Any help would be great : )

 

$(function() {

   var tl = new TimelineLite({align: "start"});

   tl.to( $(".bar1"), 0.5, {css:{width:"200px"}, ease:Strong.easeInOut});
   $('.percentage1').countTo({
    from: 0,
    to: 75,
    speed: 3300,
   }),
   tl.to( $(".bar2"), 0.5, {css:{width:"150px"}, ease:Strong.easeInOut});
   $('.percentage2').countTo({
    from: 0,
    to: 50,
    speed: 3300,
   }),
   tl.to( $(".bar3"), 0.5, {css:{width:"125px"}, ease:Strong.easeInOut});
   $('.percentage3').countTo({
    from: 0,
    to: 35,
    speed: 3300,
   }),
   tl.to( $(".bar4"), 0.5, {css:{width:"100px"}, ease:Strong.easeInOut});
   $('.percentage4').countTo({
    from: 0,
    to: 25,
    speed: 3300,
   }),
   tl.to( $(".bar5"), 0.5, {css:{width:"75px"}, ease:Strong.easeInOut});
   $('.percentage5').countTo({
    from: 0,
    to: 15,
    speed: 3300,
   }),
   tl.to( $(".bar6"), 0.5, {css:{width:"50px"}, ease:Strong.easeInOut});
   $('.percentage6').countTo({
    from: 0,
    to: 2,
    speed: 3300,
   });
   tl.play()
});

 

If answering this is easier if you see the HTML, I have hosted that here: http://yaocho-digital.com/customerhub/popular-sizes.html

[Carl]

Hi and Welcome to the GreenSock forums.

 

Glad you have taken the time to use GSAP JS. Great job and what you have built so far.

Sorry to hear you are having a little difficulty. Let me help.

 

When using the to() convenience method tweens are added to the end of the timeline as you are building it. it's really a shortcut for using append(). That is why the animations happen in direct sequence one after another.

 

The insert() method allow you to add a tween a specific point in time. If no time is specified the tweens will be inserted at a time(0) - the beginning of the timeline.

 

We are adding functionality to to() that would make it optionally behave as insert(). To be released soon.

 

In the meantime, the code below uses to()'s offset parameter and the current duration() of the timeline to put each tween at the beginning of timeline.

 

 

$(function() {

var tl = new TimelineLite({align: "start"});

tl.to( $(".bar1"), 0.5, {css:{width:"200px"}, ease:Strong.easeInOut});
$('.percentage1').countTo({
	from: 0,
	to: 75,
	speed: 3300,
}),
//note the offset param is added
tl.to( $(".bar2"), 0.5, {css:{width:"150px"}, ease:Strong.easeInOut}, -tl.duration());
$('.percentage2').countTo({
	from: 0,
	to: 50,
	speed: 3300,
}),
tl.to( $(".bar3"), 0.5, {css:{width:"125px"}, ease:Strong.easeInOut}, -tl.duration());
$('.percentage3').countTo({
	from: 0,
	to: 35,
	speed: 3300,
}),
tl.to( $(".bar4"), 0.5, {css:{width:"100px"}, ease:Strong.easeInOut}, -tl.duration());
$('.percentage4').countTo({
	from: 0,
	to: 25,
	speed: 3300,
}),
tl.to( $(".bar5"), 0.5, {css:{width:"75px"}, ease:Strong.easeInOut}, -tl.duration());
$('.percentage5').countTo({
	from: 0,
	to: 15,
	speed: 3300,
}),
tl.to( $(".bar6"), 0.5, {css:{width:"50px"}, ease:Strong.easeInOut}, -tl.duration());
$('.percentage6').countTo({
	from: 0,
	to: 2,
	speed: 3300,
});
tl.play()
});

 

insert() would look like this (same result):

 

 

 

 

$(function() {

var tl = new TimelineLite({align: "start"});

tl.insert( TweenLite.to( $(".bar1"), 0.5, {css:{width:"200px"}, ease:Strong.easeInOut}));
$('.percentage1').countTo({
	from: 0,
	to: 75,
	speed: 3300,
}),
tl.insert( TweenLite.to( $(".bar2"), 0.5, {css:{width:"150px"}, ease:Strong.easeInOut}));
$('.percentage2').countTo({
	from: 0,
	to: 50,
	speed: 3300,
}),
tl.insert( TweenLite.to( $(".bar3"), 0.5, {css:{width:"125px"}, ease:Strong.easeInOut}));
$('.percentage3').countTo({
	from: 0,
	to: 35,
	speed: 3300,
}),
tl.insert( TweenLite.to( $(".bar4"), 0.5, {css:{width:"100px"}, ease:Strong.easeInOut}));
$('.percentage4').countTo({
	from: 0,
	to: 25,
	speed: 3300,
}),
tl.insert( TweenLite.to( $(".bar5"), 0.5, {css:{width:"75px"}, ease:Strong.easeInOut}));
$('.percentage5').countTo({
	from: 0,
	to: 15,
	speed: 3300,
}),
tl.insert( TweenLite.to( $(".bar6"), 0.5, {css:{width:"50px"}, ease:Strong.easeInOut}));
$('.percentage6').countTo({
	from: 0,
	to: 2,
	speed: 3300,
});
tl.play()
});

 

 

You could also use insertMultiple() for this as well which would allow you to insert an array of tweens at once: http://api.greensock...nsertMultiple()

 

Let me know if you need more help.

[JohnPett]

Thanks Carl, solid reply!

 

Have a good weekend!