OSUblake last won the day on January 14

OSUblake had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Draggable SVG element which is also rotatable

    Diaco, I like what you did! I didn't know you could have different draggables associated with the same element. Nice to know.
  2. Draggable SVG element which is also rotatable

    What problems were you seeing? This seems to work. http://codepen.io/osublake/pen/MYvVMZ
  3. Draggable SVG element which is also rotatable

    Hi Reanimator, Taking off from the example in this thread, what you can do is change your draggable's instance type (rotation, x/y) depending on where you click. So if you click on the element, make it type x,y. If you click on the handle, change your draggable instance to type rotation. http://codepen.io/osublake/pen/RNZxJx
  4. Slider and play/pause-button conflict

    Hi IJ, What you need to do is record the state of timeline when the user first drags the slider, i.e. whether it's playing or paused. Then you can figure out what to do when the user stops the slider. var isPaused; $slider.slider({ range: false, min: 0, max: 100, step: 0.1, slide: function (event, ui) { timeline.progress( ui.value / 100 ).pause(); }, start: function (event, ui) { isPaused = timeline.paused(); }, stop: function (event, ui) { if (!isPaused) timeline.resume(); } }); http://codepen.io/osublake/pen/pvrpWB
  5. Starting from random positions.

    I think your random function is a little off. Try this one. function getRandomInt(min, max) { return min + Math.floor(Math.random() * (max - min + 1)); } http://codepen.io/osublake/pen/NPgZyw
  6. Our new Ease Visualizer is live!

    I really like the clock view! I've never seen easing shown like that, but it's really helpful.
  7. Creating a progress bar...

    Just change the transform-origin y-offset to bottom. TweenMax.set($progressBar, { scaleY:timeline.progress(), transformOrigin: "0px bottom" }); http://codepen.io/osublake/pen/KwqqKZ
  8. Draggable Resize

    I probably should have mentioned that the code above will only work if the shape is a square. For a rectangle, you will need to figure out the ratio or angle before you start to drag. CodePen URL: http://codepen.io/osublake/pen/EaXNMd
  9. Draggable Resize

    Hi Cirox, You can constrain the shape by doing a little math... var offset = this.x * Math.tan(45 * Math.PI / 180); TweenLite.set(drag, { width: this.x, height: offset }); TweenLite.set(handle, { top: offset }); But an even easier approach would be to do it as a ratio. 45 degrees would be 1:1, so just set the height and width equal to each other. TweenLite.set(drag, { width: this.x, height: this.x }); TweenLite.set(handle, { top: this.x }); CodePen URL: http://codepen.io/osublake/pen/emWwzb?editors=001
  10. ScrollToPlugin doesn't work with shadow dom

    I had a hard time understanding your question because you responded back that selecting an element was not the problem. If you could select the element, then you could figure out its position. Were you using jQuery to do this? Not that it matters now, but I created a scroll to demo to try and figure out what the issue was. I'm guessing you were trying to get the position inside some deeply nested elements because I had no problems going down 1 level. Oh well, glad you figured it out! http://plnkr.co/edit/czdXVFv9tojP3B1Ac0Ds?p=preview
  11. ScrollToPlugin doesn't work with shadow dom

    You're supposed to be able to select shadow dom elements like this this.$.shadowElement; But I can't get it working outside of Chrome. See this example. http://plnkr.co/edit/0fJl0cmK6iSUrQw7KuJe?p=preview Are you using anything besides Polymer? With Angular it's pretty easy to hook into Polymer, so I know it's possible. What are you trying to scroll to? You might be able to just copy and create your own version of the element if it's not complicated.
  12. accessing svg paths in external file

    Hi Scribble, The SVG inside the <use> tags won't show up in your CodePen because the file is on another domain and you aren't referencing it (#left-hand). <svg class="left-hand"> <use xlink:href="http://my-server.com/left-hands.svg#left-hand"></use> </svg> However, using <use> might not be the best solution if you are trying to create SVG animations. First, IE does not support it, although there are ways around this. Second, the SVG is encapsulated so you won't be able to directly select your shapes/paths. // Won't work with <use> var hand = $("#left-hand-palm"); Diaco did a good job of showing us how to embed and reference an SVG. However, an embedded SVG is encapsulated inside an external document, so things like your CSS styles won't crossover into the SVG's document. I like to load external SVGs via Ajax, and then inject them into the page. Doing this will allow you to interact with the SVG just like an inline SVG. No need to modify your code! Here's a demo of how to display an SVG using the ajax, object, use, and inline approaches. Notice how only the ajax version works like the inline version. Plunker URL: http://plnkr.co/edit/LneUEK?p=preview
  13. Using Media Queries in TweenMax

    Here's another tip. You can add listeners to your media queries instead of doing a window resize event to find a match. Adding listeners will allow you to create a dynamic list of queries for things like height, width, orientation, handheld, aspect, etc. Here's a scaled down version of what I use. You can see the dynamic queries in action when you click the remove button on the large media div. http://codepen.io/osublake/pen/vExQEy
  14. Using Media Queries in TweenMax

    No jQuery needed. It's a method on the window object. edit... Duplicate of Jonathan's.
  15. Using Media Queries in TweenMax

    Maybe you weren't able to resize it to < 400px. I changed it to 600px. See if that helps. http://codepen.io/osublake/pen/KwWRwK
  16. Using Media Queries in TweenMax

    You can match media queries with JavaScript, although IE support is limited. https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries Here's a demo displaying a different div based on the screen width. Resize the window to see it change. You could add some logic inside the match statements for your media queries. http://codepen.io/osublake/pen/KwWRwK
  17. Using Greensock to create Durandal transition

    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.
  18. Draggable & percentage

    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?
  19. Using Greensock to create Durandal transition

    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
  20. Draggable & percentage

    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.
  21. Draggable & percentage

    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
  22. Tweening a Div between Multiple CSS Properties

    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?
  23. 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.
  24. 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
  25. 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?