Jump to content

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

OSUblake last won the day on November 30

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Isn't that just an easeInOut? EDIT: Eh... Maybe not after thinking about it.
  2. Use relative rotation values like "+=2.5" or "-=2.5". http://codepen.io/osublake/pen/BoKMYx
  3. I've shown how to use external SVG numerous times using ajax. There's nothing magical about it. It just an http request, like everything else loaded on your page. With jQuery http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview And without http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview The other day @MindGamer brought a great idea about using SVG as JavaScript string variables. That way you don't even have to make an ajax call. Using string variables for content is very common approach in libraries like Angular. It's fast and the JavaScript file will be cached. Check this out. Where's the SVG coming from? http://codepen.io/osublake/pen/f9ad0aafc2fa585e60e4b9642ac716b3 Right here... https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js
  4. Makes sense. Glad I found this out because I have always wanted to use that term for opacity.
  5. Yeah, I was kind of shocked to see that it worked. I just assumed it wouldn't work because it's not a CSS property, but now I see it in the source code of the CSSPlugin.
  6. That's weird. Has alpha always been part of the CSSPlugin?
  7. How do you normally check the alpha? I think you might be thinking of opacity, unless you are using some type of canvas. http://codepen.io/osublake/pen/693c004bf6b8825c619db7f4d10142f8
  8. Here, look at the console in this example. http://codepen.io/osublake/pen/75a642e95f1cf2f3c66ca55bc78c6836
  9. Provide an CodePen because that will work. You're creating the same animation in a loop, which means after the first animation is is done, all of the repeated animations will be at their end state. Try using fromTo tweens.
  10. The problem is that it's on a repeating timeline, so it's not stopping, but I'll get back to that later. I just wanted to share a little trick I came up with to find the current value the Bezier plugin is using. Place an index on all the objects in Bezier's array, and then tween a proxy with those values. On the update callback get the index property from the proxy object and round it. You now have the current index of the array. And it doesn't have to be an active tween. You could keep it paused, and then change it's progress when you need to get some value. http://codepen.io/osublake/pen/ojxbJX/
  11. But my question is a timeline really necessary? Time is constant, so you are going to have to manipulate something, somehow. Just a quickie example, but notice how a lot of the code is can be combined into a little orb class. Excuse the cheesy lasers and the offset. I didn't want to spend all day getting every single animation in there, but only one will transmit at a time. http://codepen.io/osublake/pen/6475b55df56dbc258de62f1f1f6793ca?editors=001
  12. Haha. I think I totally misunderstood what you were asking. So I created the effect you are trying to avoid? Oh well, I thought it was cool. Is it mandatory that your timelines be nested? I still think it would be much easier to setup some type of method to play them at different intervals like I did before, but maybe more like an animation queue. Just some container that you can add and remove animations from. Here's a simple queue I made for another forum question, but maybe you could adapt it. You could change out those arrays with actual timelines. http://codepen.io/osublake/pen/xGMYmW
  13. You don't have to use lodash... but I thought you were into node, and it seems like every almost every npm package out there uses lodash or underscore. You can use vanilla JavaScript. _.range is just a for loop that fills an array with values based on a step. _.sample just gets a random value from an array. Reduce is a normal array method. And _.shuffle is the fisher-yates algorithm Fisher-yates shuffle - http://bost.ocks.org/mike/shuffle/
  14. You see the red warning in the bottom-right corner? It means your code has an error. Click it and should point the problem. Looks like you have an extra bracket in your code. http://codepen.io/osublake/pen/rOxxMQ
  15. That's a lot of GSAP code you got going on there! Too much for me go through to see how you are currently doing it. But here's something I came up with real quick using lodash. The base is the target time all the animations will be synced to at the end. The gap is the max time difference between the base. The step is how much I reduce the gap on each cycle. I also use the step for the minimum time difference between each animation, but you could use some other value. And the range is a shuffled array of numbers between the base and gap values. On each cycle I create a new range using the new reduced gap value. The restart function is the cycle I was referring to, which creates a new set animations on each call. The timeline it creates is set to call restart again if there is a time gap. If there is no time gap, the timeline is just set to repeat since the animations are now all synced. The animations it creates are set to a delay based on the range. After each cycle the range of numbers is decreased by the step, which reduces the available values that can be used. This will eventually create the same delay for each animation. You could add more variation in the step and the range to create a more random effect, but it works just like you described. http://codepen.io/osublake/pen/Gpopmb/
  16. Very nice!!! Looks like you changed a lot because I don't think I see any code from the original. Mine was originally an Angular directive, so you can kind of see remnants of the scope object in a lot of the functions.
  17. You're initializing the object with the property name "p_type". To provide a dynamic value for the name you would either need to create the object beforehand or use an ES6 computed property name. To use computed property names you will need to use a compiler like Babel, Traceur, or TypeScript since it's a new feature. var foo = { bar: { baz: { key: "x" }}}; play("y", 200); function play(key, value) { var myObject = {}; myObject[key] = value; TweenLite.to("#box", 1, myObject); // ES6 Computed property name TweenLite.to("#box", 1, { [foo.bar.baz.key]: value }); } http://codepen.io/osublake/pen/af7229a398116492a29e198ce5d341e5
  18. With a little extra work you can fill in those missing values. Depending on how you want the morph to look, you could either repeat all the xy values for a command, or use one pair of xy values, presumably the last pair. I repeated all the xy values which created a pretty interesting effect. http://codepen.io/osublake/pen/meepJE/
  19. I'm not familiar with Collada, but it seems like it would be the same. Maybe it's a child material you need to change? I'm sure if you asked this on threejs chat or Stackoverflow that you'd get a better answer.
  20. This is a question for more for three.js support. But you need to set the transparent flag on your material.
  21. Your CodePen links are dead, but you don't need a plugin. Have you tried animating what's inside the mask and not the mask itself? TweenLite.to("#svgmask > image", 1, { x: 100 });
  22. MindGamer's suggestion is really good. I already do that with HTML templates using some html2js tools. I see no harm in doing that with SVG.
  23. Yeah, I was thinking about that while making it. You could make some really interesting effects using multiple curves. I've already made a bunch of different path editors, so it wouldn't be that hard implement. However, I don't think I'm going to spend anymore time on this. It doesn't look like there is going to much interest in this, so I'll just leave it as it is. Somebody else can change it if they want. The hard part is done, and that was finding a fast way to get the x-intercept. Most of the code in that Gist is based on this. https://chromium.googlesource.com/chromium/blink/+/master/Source/platform/animation/UnitBezier.h I added a dropdown list with some of the easings used by GSAP. But of course I could only include the ones that can be approximated with one Bezier, so no easings like bounce. http://codepen.io/osublake/pen/OyPGEo
  24. It will be very easy to illustrate using CodePen, that's the whole point. Go look at the video in the link Rodrigo posted. And what canvas library are you using? I could be wrong, but I've never seen a canvas library that uses string a CSS-like string for shadows, let alone one that requires units like "px". You might want to go check if that's even part of the API. Shadows are usually set using something like this. ctx.shadowColor = "#999999"; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 10;
  25. Just so people don't get confused, I went ahead and put the CubicBezier class into a gist. https://gist.github.com/OSUblake/4d9f0caf980f4ee492ef