Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. You can create a variable using a data attribute. http://codepen.io/osublake/pen/kjspJ
  2. 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
  3. 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. http://codepen.io/osublake/pen/ifomn
  4. OSUblake


    Pixi.js is the best WebGL/Canvas renderer I've tried, although I prefer to use Phaser, which is a Pixi game framework that does basically everything. I was totally shocked today when I discovered that I could use GSAP instead of Phaser's tweening engine. Everything I tested seems to be in sync. http://www.html5gamedevs.com/topic/6773-phasers-tweening-syste-does-not-meet-my-needs-i-think/?hl=greensock#entry40388 Phaser.io
  5. 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. http://codepen.io/osublake/pen/bEcBH
  6. 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.
  7. To anybody who is starting to learn Angular with a jQuery background, please read these StackOverflow responses. It will really help put you in the right mindset. jQuery really seems to hamper peoples ability to learn Angular, and this might save you a bunch of time. http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
  8. 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.
  9. 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.
  10. 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... });
  11. 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
  12. 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