OSUblake last won the day on July 17

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,612
  • Joined

  • Last visited

  • Days Won

    351

Everything posted by OSUblake

  1. OSUblake

    DrawSVG not functioning as expected

    I think you drew the top shape reversed. You need to draw the points from the same origin and in the same direction. http://codepen.io/osublake/pen/GpRLrd?editors=101
  2. OSUblake

    Select text on Draggable

    Ha ha. I was wondering if you were still doing this. It's looking good! You're code looks like it's based on the version before my last update. Did you not look at my last post? I refactored all the events back into the draggable. There's actually 2 different draggables now, but the sidebar one really doesn't do anything. It's just makes it a lot easier to stay in sync with the main draggable. I don't know if those changes will have any effect on the problem you are having. What device is it not working for? I just tested it on my touchscreen in Chrome, and it works ok. I have to double tap to select some text, and then once it is selected, I can long-press to bring up the touch copy/select interface. http://codepen.io/osublake/pen/fa9327ed305f96817ffbe0a50ed64282?editors=001
  3. OSUblake

    Select text on Draggable

    Is there a way to select text on a Draggable? Removing the user-select style doesn't work. I can add the following to an element, but that seems super hacky. Is there an easier way? Draggable.create(myElement, { allowEventDefault: true }); myElement.onselectstart = function() { TweenLite.set(myElement, { userSelect: "text" }); };
  4. Pixi is setup to render using WebGL, but it has a canvas fallback for older browsers like IE9. If it wasn't working in IE9, it probably wasn't setup correctly or it was using the WebGL renderer. For Pixi to run, the environment needs to have 3 things available: Object.defineProperty, the Canvas API, and JS image objects. There's polyfills for all those, so you could even get it to work with IE8. Here's a list of supported browsers. https://github.com/pixijs/pixi.js/wiki/FAQs#what-browsers-are-supported Pixi is a pretty big file. About 75kb gzipped, but it's also on most CDNs. However, you can create a custom build and gut most of that. There's a lot of stuff you probably wouldn't need for doing banner ads. All I can say is that Pixi is pretty darn awesome. It's used by several game engines like Phaser, and if you look at the GreenSock examples/showcase page you will find that a majority of those projects are also using it. I don't make banner ads, but to me it seems like it would be a great solution. Instead of dealing with a bunch of SVGs, images, layouts, and fonts that need to be loaded and adapted to different sizes, I would just use Pixi to manage as much as possible. Being able to cache stuff as a bitmap or generating textures on the fly makes it pretty versatile and can handle most things including graphics editing. For example, the other day I needed some different colored stars, but instead of using a graphics editor I just created them in Pixi. This made it much easier and faster to tweak and fine tune how I wanted them to look, ultimately saving me a bunch of time. From start to finish it took me about 45 minutes to create 5 different spritesheets of stars that go BOOM. http://codepen.io/osublake/pen/avbPON/
  5. PIXI.js can do all the stuff you love about Flash right down to MovieClips. The only thing it doesn't have is a GUI, so you're going to have to do it the old fashioned way. Color and blending filters... http://www.goodboydigital.com/pixijs/colorMatrix/ Some more filters... http://www.goodboydigital.com/pixijs/examples/15/indexAll.html And some more filters... http://jsdo.it/konma/afE8/fullscreen It's crazy fast http://www.goodboydigital.com/pixijs/bunnymark/ Blend modes http://pixijs.github.io/examples/index.html?s=demos&f=blendmodes.js&title=BlendModes Masking different shapes http://pixijs.github.io/examples/index.html?s=demos&f=masking.js&title=Masking Alpha mask http://pixijs.github.io/examples/index.html?s=demos&f=alpha-mask.js&title=Alpha%20Mask Flash vs HTML5 - A couple of years old, but still pretty cool. http://flashvhtml.com/ Put an outline around an image. I think this is actually part of the filters plugins now, but I just found it a couple of days ago. http://codepen.io/osublake/pen/eNwjOO
  6. Just a thought. Have you tried wrapping your jQuery? jQuery.noConflict(); (function($) { $(document).ready(function() { // Your code }); })(jQuery);
  7. Can you give an example of this? And what type of things are you trying to animate? It sounds like if it works with a delay, then the object you are trying to tween might not be ready yet. How long of a delay are you using? Is it just one cycle, like 1ms? If so, my best guess would be that the object is created async. This could be related to your CMS. What CMS and other libraries are you using?
  8. That usually means you are trying to tween something that can't be referenced, like a variable. Make sure what you are trying to tween is an object. Here's an example of that error. http://codepen.io/osublake/pen/4573cb383fc103702c0ce4d8fc999955 I'm not sure why the jQuery docs aren't with the other ones, but it's still active. http://greensock.com/jquery-gsap-plugin
  9. Not sure I would recommend it, but you can disable same-origin policies. http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome And here's how to load stuff without jQuery... http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview
  10. OSUblake

    problem width tweenmax and svg images

    Some of them are just native JavaScript methods, like getBoundingClientRect() which returns a rectangle with the top, left, right, bottom, height, and width of an element. Math.min is also a regular JavaScript function. That _gsTransform thing might be confusing, but it's an object GSAP places on the element with all the current transforms like x, y, rotation, scale, etc. The _gsTransform object is on the actual element and not on the jQuery instance, so I used $("#myElement")[0] to get the actual element from the jQuery object. Also, the _gsTransform object is not available until a transform is applied to element, so that is why I initially set the x value on the hero to 0. Open up the console to see some stuff I'm logging out. Maybe that will help explain some things. http://codepen.io/osublake/pen/pjoJge
  11. OSUblake

    Animation only plays once

    I'll let you have this one. @alwayzambitious earned the First Question Answered badge, +100 pts.
  12. OSUblake

    Animation only plays once

    The animations have already played so you would need to restart them. // Here are a couple different ways to restart an animation myTween.restart(); myTween.play(0); myTween.seek(0); myTween.progress(0); I just quickly changed some things around to see what you were doing, but I think a timeline would work better for most of your animations so that you can just reverse them. http://codepen.io/osublake/pen/ZbEppb
  13. If you are using jQuery it is very easy to inject an SVG using the load method. // Inject the entire SVG $("#my-container").load("foo.svg", callbackToStartAnimation); // Or a partial $("#my-container").load("foo.svg #bar", callbackToStartAnimation); http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview
  14. OSUblake

    stagger not working as expected

    It's running...
  15. OSUblake

    Mouse pointer interaction

    Hi @stevenha Instead of doing a calculation on every mouse move, you can put an HTML or SVG element inside a transparent container, and then set that container to handle events. This will trigger the event when you are within a set proximity of the element. Look at how the blue circle starts to animate before you are hovering over the actual point. http://codepen.io/osublake/pen/OyJVzN/
  16. Ha ha! This is kind of ironic. I just came back from visiting a factory that does embroidery. I'm working on a way to convert SVGs into embroidery files, and one of my test runs was the GreenSock logo. Maybe next time I'm up there I can get some extra stuff made for some of the GreenSock fans.
  17. OSUblake

    problem width tweenmax and svg images

    You need to define what you mean by proximity? That could mean a lot of different things. This might help you get started. Note that it doesn't take into account any viewBox on the SVG or screen resizing. http://codepen.io/osublake/pen/pjoJge
  18. OSUblake

    Coil up a SVG graphic ?

    I've been out town and haven't had a chance to reply. @Carl Thanks! Flash might be on it's way out, but the concepts are still very relevant. In fact, I just bought 3 books from Amazon on doing Flash animation because I think the examples in the book will be easy to port over using GSAP and a canvas library like PIXI. I know the authors are probably going to be a little shocked that somebody just bought their book on doing Flash. @Lynx The graphics are done using WebGL and texture mapping. I don't know if that could even be done using SVG. You would probably have to get real creative with the use of something like patterns, masking, or clipping. I also doubt SVG would even be fast enough to handle an animation. You can scale the textures, so it doesn't have to be tileable, but the images I used are tileable. Rope Lava
  19. OSUblake

    Coil up a SVG graphic ?

    Found another cool trick. Tiling is just repeating, so why not offset the tile to make it move. You can even do stuff like the DrawSVG plugin. Flowing lava http://codepen.io/osublake/pen/gpVEzK
  20. If you can get flexbox to work with jQuery UI, you can get it to work with GSAP. Here's something I was playing around with awhile ago. The block gets positioned relative to the container after you throw it and it bounces around. But it gets even crazier because you can throw the resize handle for the container around. Try to get both of them bouncing at the same time. How's that for responsive? http://codepen.io/osublake/full/oXKmNO/
  21. OSUblake

    Animating offset

    Have you tried GreenSock's Draggable? Here's a simple drag and drop I made in about half an hour. Try modifying jQuery UI to do that in under an hour. http://codepen.io/osublake/pen/waVYvz/
  22. OSUblake

    DrawSVGPlugin - weird end glitchyness

    You can repeat the first command instead of closing the path with "z". You might have to make a slight adjustment to the time depending on how long that segment is. d="M51,110c0,0,22.151,0.773,42.69-5.089 c11.289-3.222,20.718-10.434,27.659-19.791... Replace the "z" at the very end with that. http://codepen.io/osublake/pen/zGgWNG
  23. Have you tried to use WebGL to speed it up? I saw that as an option. To keep the same tab open and a better workflow, use Browsersync for live reloading. It will take you 5 minutes to gets started if you've never used Node before. Mac users might need to look up the term "sudo" before installing stuff with Node. So instead of testing the movie everytime, you would just publish it and have browsersync listen for changes to any html, css, or js files in your project's folder.
  24. You make a clone of what you are dragging and set the clones position relative to something that won't change, like the top-left corner. http://codepen.io/osublake/pen/XJQKVX
  25. I added duration/totalDuration and time/totalTime just to see the numbers. You were just tweening time, which stops at 4 secs, so that why it couldn't go past one cycle. Changing it to totalTime allows it to go past the 4 second mark. http://codepen.io/osublake/pen/bdXpMa?editors=101