Jump to content

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

OSUblake last won the day on December 3

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. If it's a circle, you could probably just rotate it and simplify everything. The values for a Bezier are only calculated once, so it really doesn't matter because you will have to recalculate them on resize. FWIW, here's a somewhat responsive version of a Bezier. http://codepen.io/osublake/pen/yYaQar/
  2. I see the problem in IE, and it looks like that is one of the issues the DrawSVG plugin fixes for IE. Try using Beziers. I got this working in IE without the plugin. http://codepen.io/osublake/pen/jPRbjL/ If Beziers don't work, try animating the arc like this. http://codepen.io/osublake/pen/doLyvQ/
  3. OSUblake

    Fireworks WIP

    You can ignore most of the code on there. A lot of it just a bunch of boilerplate to setup a canvas so I could shove an obscene amount of stars on there. But the timeline code could be changed to work with DOM elements instead of canvas objects.
  4. OSUblake

    Fireworks WIP

    What are you having problems with? I know you said you are a newbie, so this might not make any sense to you, but here's an exploding effect I made. The timeline for the explosion is being set in the createExplosion function. http://codepen.io/osublake/pen/avbPON
  5. Yeah, that's pretty intense! I wouldn't be surprised if it caused some people to go into a seizure. https://en.wikipedia.org/wiki/Photosensitive_epilepsy
  6. I think Diaco may be working on something that is probably going to be easier to understand, but this demo sort of has the mechanics you are looking for. http://codepen.io/osublake/pen/oXKmNO
  7. You could use SplitText on some hidden text and then with the update callback map those values to your SVG text. It would probably work better if each letter was in its own group.
  8. Here's a variation of that example because that might cause the same interval to fired more than once for a long tween. http://codepen.io/osublake/pen/0a0d8d90e211b414e738c6ae4e26fcb2
  9. Triggering something every at set intervals could be done like Petr showed, where you just add it to the timeline at a specific position. Or you could set a delayedCall or a tween to repeat at the intervals you need that would trigger the animations. All of those solutions would work well, although they might not offer enough flexibility in some cases. When there is only one animation to trigger, like say at 50%, what I have done in the past is just check to see if the progress of the timeline is greater than 50%. If it was then I would start the animation. You can do the same thing here. The only difference is that for intervals you will need to use the modulus operator on the progress value. http://codepen.io/osublake/pen/54c5f0deb2182acef3c464f76c9b5fc2
  10. That's crazy. I think they look great, especially the video one. Why did they get rejected? .
  11. Isn't that just an easeInOut? EDIT: Eh... Maybe not after thinking about it.
  12. Use relative rotation values like "+=2.5" or "-=2.5". http://codepen.io/osublake/pen/BoKMYx
  13. 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
  14. Makes sense. Glad I found this out because I have always wanted to use that term for opacity.
  15. 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.
  16. That's weird. Has alpha always been part of the CSSPlugin?
  17. 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
  18. Here, look at the console in this example. http://codepen.io/osublake/pen/75a642e95f1cf2f3c66ca55bc78c6836
  19. 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.
  20. 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/
  21. 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
  22. 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
  23. 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/
  24. 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