Jump to content

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

OSUblake last won the day on October 16

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Just out of curiosity, how interconnected are color and the CSSPlugin? Would modifying the colorPropsPlugin with CSS propNames cause problems?
  2. Forgot to mention, that it also helps to determine the user's intent before trying to move a box. I had to manually calculate that in the sortable demo, but now Draggable includes getDirection to determine the direction you are dragging. You can use this feature to prevent triggering a move in the wrong direction, which can happen when you're moving elements to a new position.
  3. That's the correct behavior. Your hit test is going to be updating the values while the two boxes are moving past each other. You're going to have to add in some logic to not do a hit a test on a box that is moving, like flagging the element with a certain class name.
  4. If you have ever wondered why tweening a color can display some odd colors or flashing, you need to check out the video in Erik's link. It's very interesting, showing how everybody is doing it wrong, including image experts like Adobe. As the video shows, the fix is real easy. I just used the imprecise method found on Wikipedia to get the colors to tween like p5. I have the animation set to repeat, which makes the color problem really noticeable, especially when going back to red. It turns a nasty brown with a bright flash at the end. // Value between 0-1 that GSAP sets var amount = Math.max(Math.min(amount, 1), 0); var rgb1 = [255,0,0]; var rgb2 = [0,255,0]; var color = []; function lerpColors() { for (var i = 0; i < rgb1.length; i++) { var color1 = rgb1[i] * rgb1[i]; var color2 = rgb2[i] * rgb2[i]; color[i] = (Math.sqrt(amount * (color2 - color1) + color1)) >> 0; } } Demo: http://codepen.io/osublake/full/xGVVaN/
  5. Wow, what a big difference! Have you tried doing that in GSAP, the whole squaring/square root values thing using some sort of proxy to update the values on? FYI: Next time you need to add a library like that to your code, you can put it inside a <script> tag at the bottom of your HTML. http://codepen.io/osublake/pen/NqNqNb
  6. Isn't addEventListener just for actual DOM events? So you can't listen for GSAP ones like throwUpdate or throwComplete, correct?
  7. OSUblake

    Draggable cursor.

    Diaco came up with a good solution while I was forking your demo, but here's how I did it using jQuery to use grab and grabbing. http://codepen.io/osublake/pen/EjPOLK
  8. OSUblake

    this "class"

    You can also define the scope in your vars. TweenMax.to(element, 1, { //... onComplete: onComplete, onCompleteParams: ["{self}"], onCompleteScope: myScope }); function onComplete(myTween) { // myTween == tween instance // this == your scope }
  9. My bad. I didn't mean for it to come off sounding like that. I never heard of Date.js, so I did a search and saw some issues about Date.now(), including one that said that it no longer adds it own function anymore. Then I saw that the library hasn't been updated in over 7 years, which kind of shocked me, because that's like centuries in JavaScript years. Again, sorry if I came off sounding like that. I was just curious if it was still needed since it has known issues and hasn't been active for awhile. http://stackoverflow.com/a/7350077/2760155
  10. Glad you figured it out, but why are you using Date.js? Hasn't that been replaced by more modern libraries like Moment.js, or do you have some weird legacy thing going on?
  11. I would just add it to the TweenMax thread since there is already a lot good ideas floating around there. I'm all for some type of pub/sub system, especially for draggables, which for the most part can't be scripted like other tweens. Try making a bunch of Draggable objects throwable, responsive, and resizeable, all while bouncing off of eachother and their bounds without using some type of messaging system. It's pretty hard... trust me.
  12. That would be a great feature, and I have requested it. Voice your opinion here. http://greensock.com/forums/topic/11545-event-tween-feature-request/?hl=events#entry47195 PubSub must be really slow, here's your demo using an event dispatcher I made. http://codepen.io/osublake/pen/zGrPRr?editors=001
  13. Setting some arbitrary delay may not do anything if the digest cycle hasn't finished. Even though _.defer is not tied to Angular, it can still work because it is delaying execution based on cycles. However, it is probably better to use $timeout because it also updates the $scope, which may have changed if you have some other directives that were loaded after your draggable. When I first started learning Angular, I ran into issues like this all the time, with some pretty unexpected results. For example, GSAP was able to manipulate the DOM one cycle before jQuery which would really mess stuff up, especially with draggable's hit detection. Now I always unwrap my elements before feeding them into GSAP. Here's some useful information about animations and Angular cycles. https://github.com/angular/angular.js/issues/5130 http://stackoverflow.com/a/17958847/2760155
  14. One problem I see is that the draggable and the wrapper are the same width. The draggable should be wider than the wrapper, which it is in your fiddle. This thread kind of touches on that. http://greensock.com/forums/topic/11580-draggable-children-click/?hl=autoscroll#entry47201 Have you tried running it without extending the props, and not setting the overflow immediately afterwards? Also, I'm getting _ticker.time and vp.t2 NaN values in the console from the ThrowPropsPlugin. Don't know what those mean, but I see a lot NaN ticks being thrown around. When creating directives in Angular, a digest cycle must run a couple times before you can initialize some things. Try running $timeout 2 times before trying to create it. $timeout(function() { $timeout(function() { // Create it here }); }); // Since you're using underscore, you can also do this... _.defer(function() { _.defer(function() { // Create it here }); });
  15. This kind of reminds me of ng-Fx, which is a GSAP version of Animate.css. It don't know if you know Angular, but the source code is still pretty interesting nonetheless. I love how he setup the animation factories. Maybe you can get some ideas from it. Demo... he needs to fix those overflow props http://hendrixer.github.io/ Source https://github.com/Hendrixer/ngFx
  16. I got it working with both your examples, but CodePen is doing maintenance right now so I can't save. The only thing I changed is that I referenced the draggable using "this" instead of draggable[0]. How are you getting that value if your function is anonymous? Also, wouldn't it be better to do that in the snap function since it will pass you the end value?
  17. To center stuff with CSS, I like to use flexbox. But you can do the same with GSAP. Just get rid of your huge line height and add this. TweenLite.set(element, { top: "50%", yPercent: -50 }); http://codepen.io/osublake/pen/NqxvYx
  18. Now that I know why className won't tween the way I expected, its not so much of an issue. Plus I learned a lot of different ways to get styles while making that demo, like using the CSSRulePlugin. What shocked me is how many views my demo was getting on CodePen since it was really intended for people that were reading this thread. All the examples I created were based on a project I was working on that would create a morphing transition between elements. I was trying to create something similar to this quiz demo (click through the general knowledge section). Using className worked well for awhile, but in the end I realized that I only needed a couple properties and not the entire class. https://www.polymer-project.org/0.5/components/core-animated-pages/demos/quiz1.html
  19. OSUblake

    Overwrite tween

    Hi andyr There are several issues with your example. First, you are not adding the tween to your timeline. tl.add(tween); // Should be vm.tl.add(vm.tween); Second, you are trying to invalidate and change the vars on your timeline. vm.tl.vars.css.top = 200; // Should be vm.tween.css.top = 200; Third, you should probably handle animation in an animation module and not the controller. The controller is a view model, so you really only need 1 line of code. vm.show = false; http://codepen.io/osublake/pen/pJJZdj
  20. Hey Frim, I struggled with this issue for a long time, and finally realized that the className tween is working correctly, my assumptions were wrong. Please read this thread to find out more. http://greensock.com/forums/topic/11374-override-properties-when-tweening-classname/?p=46364 The demo I made in that thread uses the CSSRulePlugin to get the CSS values, which I then extend onto my target. http://codepen.io/osublake/pen/gbjqbE And if you're using media queries, you should check out the JavaScript way to do it. http://codepen.io/osublake/pen/vExQEy
  21. It's funny that you brought up ES6, because that is what my demo uses. No need to wait around for the browsers to catch up, you can start using most of the features today. Like I mentioned a couple of days ago, I'm a huge fan of TypeScript, which is basically ActionScript with a little ES6 and C# thrown in. Traceur is another compiler worth checking out. Believe it or not, but they are already started to test out ES7 features. And Babel.io is a compiler that is starting to become pretty popular, although I haven't tested it out yet. I don't share on GitHub… and not because I don't want to, or I'm against it, I just haven't gotten around to it. I have a lot of stuff that I want to put out there and share, but I keep getting sidetracked with other projects. I adapted your demo to use some DOM based classes I've been working on. It starts out with a base Actor class, which you can easily extend to create more complicated classes like a stage, scene manager, and even extend GSAP classes like Draggable. I only made a stage, text, and button class for this demo, but you can see how easy they are to create once you have the base class in place. To start using an actor, just new one up. You can pass in some DOM/GSAP related properties here, like where to append the actor, the element's id, the element's tag, and some styling properies. There is also a style property that you can use to pass in styles that might not be a property of the class. If you define the same property in the style and config object, it will use the config's values. In the following code, the background color will be green…. // The background will be green var actor = new Actor({ background: "green", style: { background: "red" } }); The reason for this is because those properties are actually getters/setters. If you want to create additional getters/setters, pass in a list of names to the styleProps property. // Define and set during instantiation var actor = new Actor({ scaleX: 1.2, styleProps: "scaleX,scaleY" }); // Define and set later on var actor = new Actor() .createStyleProps("scaleX", "scaleY"); actor.scaleX = 1.2; Configuring an actor should be pretty straightforward. var actor = new Actor() .addTo(myParent) .addChildren(child1, child2) .set({ opacity: 0.5, zIndex: 30 }) .set("padding", 6) .setPosition(200, 100) .setSize(50, 100); I didn't focus too much on this animation in this demo, but it's in there. All actors have a timeline that you can use just like a normal GSAP timeline. var actor = new Actor() .set({ width: 50, height: 30 }) .to(1, { width: 500, height: 300 }, "start") .to(1, { x: 200, y: 100 }, "start+=0.25"); http://codepen.io/osublake/pen/zGGpoa?editors=001
  22. I know what you mean. Ever since I discovered GSAP, I've been messing around with different ways to replace jQuery with a custom solution. Let me simplify some of the code I've been working on, and I'll post here later. Some quick questions... Are you only using the text plugin to change the text, or are you animating it too? And is there a reason you didn't use var in your demo when creating your variables? Just wondering if you knew the way you did it is creating global variables, which can be bad.
  23. Good point. I experienced the same issue. If opacity is causing problems, and depending on your content, sometimes it might be better to use a png instead. You can still animate opacity with a png by using the Stepped Ease with a sprite sheet.
  24. Gotcha. I've been working on some GSAP based classes, but they go well beyond styling. I modeled them after some HTML5 canvas libraries, so you can do stuff like create, style, position, animate, etc elements from the same class. Are you looking to do something like that?
  25. What are you having a problem with, aligning it?