Jump to content
Search Community

OSUblake last won the day on September 16 2023

OSUblake had the most liked content!

OSUblake

Moderators

  • Posts

    9,196

  • Joined

  • Last visited

  • Days Won

    708

 Content Type 

Everything posted by OSUblake

351
352
353
Page 352 of 353  
  1. OSUblake
    Thanks Thomas, that's awesome! I've been using ngAnimate and CSS classes almost exclusively because that is how I was taught, but I've always hated the idea of having to toggle a class. I really like your revision, and that reduce function is very helpful. I never realized how promises can be leveraged to compose some complex animations. I've been exploring different ways to choreograph animations in HTML, but those darn Angular purists have kind of forced me into a certain way of thinking, so I've been hesitant to implement something like your Animation DSL or Famo.us/Angular does. However, I think your gsTimeline is absolutely brilliant! I'm sold! Now I'm wondering if there is an easy way to use a gsTimeline to hook into enter/leave animations in order to create some complex hero transitions. I also want to thank you for chiming in on the GSAP forums and making yourself known. I've been looking for some good Angular + GSAP animation examples, but they're hard to come by. I checked out your GitHub and CodePen, which has really forced me to rethink Angular animations. Plus I picked up some great tips about logging and supplanting strings.
  2. OSUblake
    Wow. I didn't realize you could recreate the same draggable element on the fly like that. The word create made it seem expensive, so I didn't even think about that. I'm going to test that out for my maxX/Y issue. Have you noticed any kind of performance hit when doing that?
  3. OSUblake
    Hi Thomas Welcome to the GreenSock forums! I guess my example with the nested promises might be hard for some to people to follow. Your example gets right to the point of showing how easy it is to chain promises together. Very nice! Add in some ES6/TypeScript fat arrow functions, and it gets even cleaner. $q.when() .then(() => $animate.addClass(element, "move-up")) .then(() => $animate.addClass(element, "move-down")) .then(() => // More promises...); I took my example and yours to create a little demo to show some animation promises being chained together, just like a GSAP timeline. Your code is used by the purple block. I also include some code to show how to broadcast/emit animation events across an application. Plunker: http://plnkr.co/edit/6c0ggc?p=preview
  4. OSUblake
    Thanks Diaco! Your example works well. I didn't even try it like that because I want to avoid having to use a window resize event. In most cases it's easy to respond to size changes because the user usually initiates them. But I was trying to cover those edge cases where I might not be able to capture an element resizing. Apparently only IE allows you add to resize listeners to elements other than the window. What I did above has worked so far. The only problem I've noticed is that sometimes when an element resizes, the maxX/Y might be a little off on the first drag, even after updating the draggable.
  5. OSUblake
    Hi Fusion, I really like your idea about the percent types! Using percents would eliminate the need to call a resize function. I ran into the same problem you described above while trying to create a responsive range slider. No matter what I did, all my percentage values became pixel values whenever I clicked a draggable element. I'm not sure if this is by design, a bug, or me just doing it wrong. In the end, I was able to figure out a workaround. Instead of using top/left, I used marginTop/marginLeft and gave them a negative x/y offset. If you are trying to make it responsive, you might need to offset your draggable element(s) relative to your margin percentages. onDragEnd: function(){ TweenMax.set("#dragger",{ marginLeft: this.endX / 4 + "%", marginTop: this.endY / 4 + "%", x: -this.endX, y: -this.endY }); } CodePen URL: http://codepen.io/osublake/pen/ByQMWw
  6. OSUblake
    I wouldn't worry too much about chaining. It's just a shorthand way to write code, and not needed for what you are trying to do. Within a bracket set {}, you can only use a property once. // NO!!! I can't have two first names { firstName: "John", firstName: "Bob" } // OK. I can have a first and last name { firstName: "John", lastName: "Doe" } fromTo is just a shorthand way to combine 2 bracket sets together. fromTo = {from values}, {to values} to is just one bracket to = {to values} Lets say I wanted to travel from the US to Brazil. I could write code like this to represent it. travel.fromTo("#OSUblake", 1, { location: "US" }, { location: "Mexico" }); travel.to("#OSUblake", 2, { location: "Brazil" }); What happened here? I started in the US and then went to Mexico which took me 1 day. After that, I left Mexico and went to Brazil, which took me 2 days. Does that help?
  7. OSUblake
    Motion UI is garbage. Thankfully, you don't have to use it, and creating your own isn't that hard. If you can explain in more detail what you would like to do with the views, and how you want to customize them, I will be able to provide you with some examples.
  8. OSUblake
    Hi Yashi, Are you using Foundation to build your app, and what are you trying to do with Motion UI? It sounds like you are looking for a way to animate route/view changes. I made a little demo to demonstrate how to do this with UI Router, which is what Foundation uses. No need to mess with Motion UI. Plunker URL: http://plnkr.co/edit/UOp1ZD?p=preview
  9. OSUblake
    Hi Arte, IMHO FireFox is becoming the new IE... absolutely difficult to work with. Good luck with that. I have a lot of experience working with Polymer, so I understand your frustration. Unfortunately, I doubt there is much the GSAP development team can do to address any perceived or real issues until Polymer stabilizes. There are just too many breaking changes to deal with in each iteration, especially with the web-animations component. Just look at this question I answered on Stack Overflow. Who would've known that??? Polymer is awesome, no doubt about it. But it is still several years off from being viable. To get around this, I have been using Angular directives to recreate Polymer elements, which are loosely based off of Angular's own version of Polymer elements. The only real difference is that I use GSAP for animations, while the Angular Material team uses CSS. I got the idea to create my own version of Polymer elements after looking at this CodePen collection of material designs. If you can recreate a lot of Polymer elements in pure CSS, do you really need to import those elements, let alone Polymer?
  10. OSUblake
    I think Firefox is becoming the new IE. I've noticed lots of unexpected behaviors when dealing with it lately. Jitters and jaggies everywhere. I've never really tested my animations, but Yearofmoo said to use a timeout instead of using GSAP's onComplete to call the done function. I think he wrote the animation module, so he should know. http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#testing-animations http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html#greensock-integration
  11. OSUblake
    Good job! With the way it is setup now, creating a fade transition between the info and person tile won't look right because the ng-switch is only showing 1 element at a time. This would leave the back tile completely blank while one tile is being removed and the other is being added. If you use the animation module, you can have 2 elements being shown in the ng-switch during a transition, the element being removed (leave animation), and the element being added (enter animation). I created a class for the info and person tiles called switch-tile. It is positioned absolute so that both tiles are at the same position while visible, and not stacked on top of each other. The .switch-tile animation module will now animate these tiles at the same time when they are are being added/removed from the back tile. I also noticed that if you quickly press the info and person buttons on the case tile, it can mess up the resize/flip animation. I added ng-disabled to the case tile's buttons, which is controlled by calling the setTransitioning function. Because this function is called by the timeline, it uses a $timeout to make Angular update the scope. Here's a post I made about getting GreenSock to work with Angular by using $timeout. CodePen: http://codepen.io/osublake/pen/pvgvYv
  12. OSUblake
    +1 for Michael's recommendation on Phaser.io, which uses the awesome Pixi.js library. I will never attempt to build another game from scratch. Viewport scaling can be real tricky because the aspect ratio can vary greatly across different devices. What I have done in the past is to scale the game's viewable area and the actual game content independently, creating a responsive layout. The view and the game content will scale at the same ratio until a certain aspect ratio is broken, at which point the viewable area will scale to the viewport's aspect ratio. This will eliminate the need to letterbox or crop parts of your game. However, this approach may not be ideal for games where you must maintain a certain aspect ratio, like in a platformer. Here's some screenshots showing this technique in practice. Even when set to a ridiculous proportion, the game elements, shown in red by their bounding boxes, still maintain their original aspect ratio.
  13. OSUblake
    The best way to setup what you have right now is probably to put the info and person tile inside an ng-switch. To control the switch, create a new scope variable called selectedType. How is it going to transition between an info and person tile, flip, fade, etc? Once I know the type of transition, I can offer more detailed advice. <div class="cardWrapper"> <div class="card"> <div ng-switch="selectedType" class="cardFace backTile"> <div ng-switch-when="info" class="infoTile"> info tile... </div> <div ng-switch-when="person" class="personTile"> person tile... </div> </div> <div class="cardFace caseTile"> case tile... </div> </div> </div>
  14. OSUblake
    SERIOUS!!! I just purchased it yesterday.
  15. OSUblake
    Prepending/appending dummy elements to the container won't interfere with the repeater or your data. Although it might mess up some of your logic if you are tracking elements by their $index instead of an id. But I don't think that approach is necessary after messing around with your codepen. I didn't use the animation module, but I did use ng-class to sort out which tiles to hide, which cut out a lot of code. I couldn't get consistent positioning using scrollLeft, so I ended up using getBoundingClientRect. Lots of weird behaviors just kept popping up, but I think I got it fixed. Another thing I noticed is that you were rotating the .card div instead of the individual card faces, which won't work in IE. Rotating the .cardface divs with a relative angle fixes that. CodePen: http://codepen.io/osublake/pen/vENgOO
  16. OSUblake
    I can look at it more in depth later, but it looks like it is doing that when the container does not have an item in overflow. I bet if you add in some placeholders, so you always have 7 items, it will even it out.
  17. OSUblake
    Hey Flex, Have you used the animation module before? There are a lot of built-in Angular directives that will automatically trigger an animation. You can streamline a lot of your code by using some conditional directives like: ng-if ng-switch ng-class ng-show ng-hide Also, you might be better off creating a directive for each of your items/cases so you can have more control over what each one is doing. I created an example showing how you can incorporate some of those built-in directives. I wasn't sure what you were trying to do with the MAX_NUMBER_VIEWABLE_TILES, so I just used a filter to limit the number of tiles based on the screen width. Plunker Demo: http://plnkr.co/edit/yOtalOY51OusVZl5uGOU?p=preview
  18. OSUblake

    GSAP weight

    OSUblake replied to Manfrex's topic in GSAP

    Those are the gzip sizes, and they're accurate. Look above the kb size, 420 B and 414 B. It only download the headers because you have an up to date version cached. That's what that 304 status code means.
  19. OSUblake
    If you disable it, then how do you get a 3D perspective?
  20. OSUblake
    I don't know what's going on at the end of the animation, but if you add a transparent outline to the h2 it will clean up some of those jaggies. h2 { outline: 1px solid transparent; }
  21. OSUblake
    +1 for anything that saves me typing.
  22. OSUblake
    Thanks. Those demos are trending pretty well on Plunker so hopefully it will bring in some new people. Yeah. They're randomly rotated 180 degrees. It's sort of like a game where you have to flip the tiles in the right order to get the picture to display right. I didn't provide any notification once you got it right because some of tiles can be all black, and you really can't tell if you have it rotated correctly. All the logic to flip the tiles is in the tile.js file, and is pretty straightforward even if you don't know Angular. You can test it out in an unjumbled state by commenting out line 47. TweenMax.set(back, { //rotation : _.sample([0, 180]), rotationY : -180, backgroundPosition: -scope.x + "px " + -scope.y + "px" });
  23. OSUblake
    Creating dynamic animations in Angular 1.3 has dramatically improved. You no longer need to inject a service or access your scope to get values for your animation. All animation methods now have an options parameter where you can pass in values to your animation modules. There is also a new inline animate method where you can pass in from and to values and no longer have to deal with toggling a CSS class name. // In a directive link: function(scope, element, attrs) { scope.moveToMouse = function($event) { var from = { autoAlpha: 0, x: 0, y: 0 }; var to = { autoAlpha: 1, x: $event.pageX, y: $event.pageX }; $animate.animate(element, from, to); } // In your animation module animate: function(element, className, from, to, done) { TweenMax.fromTo(element, 0.5, from, to); done(); } Here's a simple demo of that code in use http://plnkr.co/edit/midHzP?p=preview And a more involved demo showing how to flip a card in the direction of the mouse and creating random bezier curves Demo: http://embed.plnkr.co/CIiLR4/preview Code: http://plnkr.co/edit/CIiLR4
  24. OSUblake
    I love using TypeScript! It's not another language like Coffee or Dart, but a superset of JavaScript similar to how LESS and SASS are to CSS. TypeScript also lets you use a lot of ES6 features like fat arrow functions and modules. I'm working on another definition file because the one on DefinitelyTyped is out of date, missing types, and doesn't include any overloads for get/set methods. I'm also including JSDoc comments so a description with all the arguments will popup. I'll post here when I'm done and will also send a pull request to DefinitelyTyped so they can update the definition. To get around errors because a definition is missing, you can just declare it. declare var SplitText; declare var Draggable; You might also get errors on your targets with the current definition, so you should update the targets in the definition file to be type any instead of Object. static to(target: any, duration: number, vars: Object): TweenMax;
  25. OSUblake
    That's crazy! Have you been using GSAP during all of its development, or did you switch partway through?
351
352
353
Page 352 of 353  
×
×
  • Create New...