Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JohnPett

Help a Newb! Please.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks Carl, solid reply!

 

Have a good weekend!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×