Jump to content

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

Not able to animate with DrawSVG in timeline (Angular involved, not the issue)

Recommended Posts



I almost always ask Blake directly when I have anything angular in my animations, but I don't think this is my problem. My angular seems to be working with no issues.


Here is my base animation that I wanted to incorporate.

See the Pen repWeG by jstafford (@jstafford) on CodePen





So, when you click on any circle, it triggers an active class to be set on it, that then is picked up by my ngAnimate class where if active  class was added, the drawSVG draws out an empty circle, and the previous active class is removed and it goes to a solid circle. I have degugged through it all , but when it gets to my timeline containing drawSVG, it just doesn't do anything. Fairly sure, I am missing something in the way I am approaching my greensock here.



See the Pen LNQEbx by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

If Angular is not related to the problem it really helps to remove it entirely as many of us are not familiar with it. 


There were 2 problems


  1. the element you were trying to apply DrawSVG animations to was the <svg> tag and it should have been <circle>. In your function that does the animation do console.log(el) to see.
  2. your circles did not have any strokes applied.

I think you will be fine once you apply those changes to the Angular version you will be fine. This pen shows DrawSVG working fine with your circles.


  • Like 2
Link to comment
Share on other sites

Still seeing some issues. You're not calling done, and your indexes aren't correct. Clicking the middle circle does nothing.

See the Pen ONvNWG?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

You're probably not going to like my solution as I bring directives and directive controllers into the mix. It kind of goes back to how I recommended using components. I don't actually use any components, but the concept is the same. Kind of like a long-form version of a component.
I think the best way to set this up is to use directives. From the directive you can add a timeline to the scope/controller, however, Angular seems to have made accessing the scope of an element a little bit harder in order to improve performance. You used to be able to do this...

// For a regular scope
var scope = angular.element(".some-element").scope();

// Or an isolated scope
var scope = angular.element(".some-element").isolateScope();

Now you have to manually change a setting in Angular to do that, so I'm going to take another approach. Accessing a directive's controller like this. 

var ctrl = angular.element(".some-element").controller("directiveName");

Note that a directive controller is a little different than a regular controller, and acts as a public API for your directive. To make a controller's properties/methods available in your directive, you need to use this instead of $scope.
In the controller, I initialize a timeline, and in the directive I add the animations to the timeline. You could actually skip the link function and do everything in the controller, but I split it up to show you how they can talk to each other.
So now in your animation module all you need to do is to get the controller for the element, grab the timeline from it, and call either play or reverse. I also set the onComplete to done in the animation module.
Using directives like I did, you could actually skip the whole animation module part and use a $watch instead. But I wanted to show you how you can create and access an individual timeline. So here's the new version... although I think I did it in reverse  :oops:


CodePen URL: 

See the Pen 7970da0a1e380e62c473a96089c4ec77?editors=0010 by osublake (@osublake) on CodePen


Also, about errors in Angular, it's best to not use the minified versions during development. The errors are a little more descriptive and they usually provide a URL that can sometimes shed a little more light on the issue. 

  • Like 3
Link to comment
Share on other sites

Wow Blake! Thank you so much.


I need to study up on your solution, but most everything is fairly familiar looking to me.



  • Like 2
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.