Jump to content
GreenSock

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

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    4,261
  • Joined

  • Last visited

  • Days Won

    439

Posts posted by OSUblake

  1. Some of the Plunks where set to private, but they should show up now.

     

    A nice utility library is Lo-Dash, which is just an improved version of Underscore.

     

    Angular is definitely the way to go for building rich single-page apps. Try building the tutorial. It gives you a little taste of everything Angular has to offer, including animations.

     

    Polymer and Shadow DOM are also pretty awesome. You can build custom html elements just like Angular directives. The next version of Angular is actually going to use Polymer for building elements.

    Some paper elements

     

    Here's a Polymer demo I created. Notice how index.html is importing the <greensock-square> element from a url. Everything is self-contained inside an element, allowing you to share it, or import other elements.

     

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

    • Like 1
  2. Forget what I said above. I think I understand you now. 


     


    Instead of using an absolute div, I just extended the bounds to whatever the offset is. I also added a button so you can see it still works when you change the size. 


     


    See the Pen ifomn by osublake (@osublake) on CodePen


     


     


  3. If you want to use the Draggable util to make a slider, scrubber, etc., you need to take in account the width of what you are dragging. Notice in Warrior's example how the max only goes to 381 when it should go to 400. To fix this you need to offset the range based on the position of the draggable.

     

    To be able to click anywhere on the slider and start dragging, turn your slider into a static draggable and then select what you want to drag.

     

    Here's the updated pen. I moved the knobs down so you can see how the range is being offset.

     

    See the Pen bEcBH by osublake (@osublake) on CodePen

    • Like 1
  4. I'm currently working on creating an Angular/GSAP tutorial that incorporates many of the things Matt asked about. I've created a playback service that can be injected anywhere your app, allowing you to manage/add tweens in different modules, watch/observe changes in the timeline, and broadcast events up and down your scope hierarchy.

     

    Here's a demo of how it works with some simple animations

     

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

     

    Timeline duration, progress, speed, time, timeScale, paused, and reversed are all bound to the service, which will update the buttons, timeline status, and scrubber. Add as many animations as you want and then reset it to see the binding in action. The playback service also use the keyboard to quickly manipulate the timeline.

    • Like 3
  5. Failure13,

    The reason none of your code was working is because the .on() method runs outside the context of Angular. Angular is not aware of any changes made by third party libraries. This includes jqLite, jQuery, GreenSock, etc. To make Angular aware of any changes made by a third-party library, a digest cycle must run.

     

    The easiest way to trigger a digest is to call scope.$apply(). However, if Angular is already watching something that you modified, you may get a digest already in progress error. To get around this, use $timeout with a 0 delay instead. $timeout is injected into your directive/provider, and will automatically call $apply on the next digest.

     

    Check out this Plunk

     

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

     

    Notice how the first box does not respond without a $timeout or $apply call.

    • Like 3
  6. 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.

  7. 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
  8. 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
  9. 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

×