Jump to content
GreenSock

OSUblake last won the day on May 13

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    704

Posts posted by OSUblake

  1. There are several ways to go about this in Angular.

     

    Option 1:

    You can bind the fill color to your scope and then interpolate the color in a directive.

    <path fill="{{color}}" />
    
     


    Option 2:

    Create a directive for each of your SVGs and put ng-mouse* directives in your SVG attributes.

     

    Plunk

     

    http://plnkr.co/edit/2sw5Ys05rVoNpNKMRsMh?p=preview

     


     

    Option 3:

    While Option 2 works, it's not really efficient because Angular is all about creating reusable components. The Plunk above can be easily modified to handle all your SVGs, all with different colors and times.

     

    <icon-svg file-name="twitter.svg" dim-time="0.4" to-time="1.0" to-color="cyan"></icon-svg>
    
     

    Plunk

     

    http://plnkr.co/edit/SNdgqm?p=preview

     


     

    Notice in the Plunks how type: "svg" is included in the directives. This is new to Angular 1.3, so make sure you are running the latest version before adding it.

  2. Angular plays very nicely with GSAP.  Unfortunately, there is not a lot of documentation on using JavaScript animations with Angular.  Most of the articles you find only detail how to do CSS animations.

     

    Starting with Angular 1.3, each of the $animate service methods returns a promise, which can also be called to cancel the animation.

    $animate.addClass(element, "my-class")
      .then(function() {
        // do something once the animation is complete
      });
    

    Here's a Plunk demonstrating this.

     

    http://plnkr.co/edit/mjIlvxHJhnl7sLQPqbnh?p=preview

     

     

    If you want to chain animations, you could use $q to chain the promises together like this.

    $q.when()
      .then(function() {
    
        var moveUp = $q.defer();
        $animate.addClass(element, "move-up").then(function() {
          moveUp.resolve();
        });
        scope.$apply();
    
        return moveUp.promise;
      })
      .then(function() {
    
        var moveDown = $q.defer();
        $animate.addClass(element, "move-down").then(function() {
          moveDown.resolve();
        });
        scope.$apply();
    
        return moveDown.promise;
      })
      .then(function() {
        // More promises...
      });                
    
    • Like 4
  3. Hi failure13,

     

    It's kind of hard to tell what you are trying to do, but it looks like you are forcing Angular to act like jQuery, which is a no-no.  In the Angular world, jQuery should only be used as a last resort.  There is usually an Angular way of doing things i.e. ng-click, ng-mouse*, ng-key*, etc...

     

    I also noticed in your screenshot that you created an animation module for ng-scope, which is another no-no.  ng-scope can be used by other elements so your animations may not work correctly.  Only create animation modules with class names that you create.

     

    I created a Plunk that uses no jQuery to help you out.  The collapse directive uses the $animate service and will work with an ng-repeat inside of it.

     

    http://plnkr.co/edit/wHUybThuY2qt4iAv5k7u?p=preview

     

    Blake

    • Like 1
  4. I just started using GSAP and really love it, but trying to get the `updateTo` method to work had me stumped for several hours.

     

    The documentation is VERY misleading. I read the part about it not working for plugin values, but then the example shows CSS values with comments describing those values.

     

    This makes it seem like it does work with the CSSPlugin: 

    //create the tween 
    var tween = new TweenMax(mc, 2, {x:100, y:200, opacity:0.5});
    //then later, update the destination x and y values, restarting the tween 
    tween.updateTo({x:300, y:0}, true);
    //or to update the values mid-tween without restarting, do this:
    tween.updateTo({x:300, y:0}, false);
    

    Can the documentation be updated with another example so other people don't assume the same thing?

     

    Thanks

×