Function called timelines graph animation (drawSVG)

[Alyz]

Hi

I'm putting together an interactive bar graph which uses DrawSvg to animate the bars between different states. Clicking a button calls a timeline which animates the bars to a predetermined %. So far so good, I'm experiencing a problem where after selecting a couple of states the objects seem to animate, not from their current size, but from their original size. I'd wondered if this problem was related to how the timelines were being called play(),  restart(), resume()? Or is there something I need to be doing at the end of each timeline to ensure next time it's called it behaves as expected? Nothing I do seems to remedy the situation.

 

Any help would be greatly appreciated. 

 

Many thanks in advance.

 

See the Pen OJMMggv by AlexFarminer (@AlexFarminer) on CodePen

[ZachSaucier]

Hey Alyz. If I'm understanding you correctly, what you're essentially wanting is to animate to a set of values no matter what the current values are set at. While I applaud your attempt to set things up at the start because that's usually better, in this sort of situation is where you need different start values each time you should use dynamically created tweens instead.

 

Here's how I'd do it:

See the Pen ZEQBemg?editors=0010 by GreenSock (@GreenSock) on CodePen