OSUblake last won the day on October 22

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    3,827
  • Joined

  • Last visited

  • Days Won

    383

Everything posted by OSUblake

  1. OSUblake

    Glow effect?

    See the filter attribute filter="url(#glow)" on the circle element, put that on the elements you want that filter applied to. Filters can be really confusing, and can take some time getting used to, but they're really powerful once you get the hang of them.
  2. OSUblake

    Glow effect?

    Did you try what we just posted?
  3. OSUblake

    Glow effect?

    Filters... http://codepen.io/osublake/pen/745415011e988b63d8f355c3698942f4
  4. OSUblake

    Animating a class of DIVs one after another

    I really like your bitmap tile grid! And your Code Challenges looked like a lot of fun! Especially with prize giveaways. #GSAPChallenge anyone?
  5. OSUblake

    Animating a class of DIVs one after another

    Nice videos, Carl! Why no JS versions?
  6. OSUblake

    Adding plugin dependency

    I've never made a yeoman project before, but that plugin is part of the GreenSock package you get with Bower, so why would you need to add it as a dependency?
  7. OSUblake

    Understanding the .from() behavior

    What's the opacity value your tween is is created? Look at the console and you will find your answer. It shows the pre and post values. If I'm at 0 and I move from 0, I'm still at 0. http://codepen.io/osublake/pen/OyoOoy?editors=001
  8. OSUblake

    Problem with ColorProps and number format

    Looks like it. Thanks! http://codepen.io/osublake/pen/bae3548a3fae7941155290c6ef10273a?editors=001
  9. I just came across a problem with v1.18 tweening colors using a number format, which is required for Pixi. Everything works as expected in 1.17. The tween uses a hex string like this. TweenLite.to(image, 1, { colorProps: { tint: "#1ef04a", format: "number" }}); All these demos log out the tint before and after the tween. 1.17 working correctly http://codepen.io/osublake/pen/0fd09101cb14ad8f484b27a368190c8b?editors=001 1.18 doesn't do anything using a hex string http://codepen.io/osublake/pen/2628e8f11a30e48bfe9fd7f3dad971b0?editors=001 1.18 using a number instead of hex string http://codepen.io/osublake/pen/98d797966109fd0715a0b87adabd5804?editors=001
  10. OSUblake

    Draggable translateZ 0px causes child elements to blur

    Your blur answer should be pinned in both forums.
  11. Play around with drawing waves with this. http://codepen.io/osublake/pen/dYVNYd This is how I convert the points that are drawn into a path. http://codepen.io/osublake/pen/BowJed Not sure how long 30 minutes of a wave is, but you could just display a range.
  12. OSUblake

    Problem with ColorProps and number format

    I'm kind of surprised this hasn't happened to somebody else because I know a lot of WebGL libraries use numbers for colors, like pixi and three.js.
  13. OSUblake

    Problem with ColorProps and number format

    That's still setting a string on the object, so it still won't work. But Jack said he see's the problem, so I wouldn't worry about it anymore. Thanks though!
  14. OSUblake

    Problem with ColorProps and number format

    Nice try, but that doesn't work. The colors have to be a number, you initially have it as a string. The object would need to look like this before you started the tween. // This var obj2={C:16777215}; // or this var obj2={C:0xFFFFFF}; 1.17 http://codepen.io/osublake/pen/1cde87c613a06f72ff3edfb24fb52c81 1.18 http://codepen.io/osublake/pen/1668959d4ada64edf1db516d13728e16
  15. OSUblake

    Shout out to the moderators

    I wish I could do GSAP stuff all day. But answering questions helps me out too. I think the best way to learn something is to teach it, so I'm learning at the same time. And Rodrigo is awesome! He's the forum ninja. He appears out of nowhere, hits you with the best, most detailed answer ever, and then vanishes without a trace. No one knows when he will strike again.
  16. OSUblake

    Smooth transition for TimelineLite.seek

    Might be better if you add a little check to prevent errors. function ElemGT(X,P){ if (!X._gsTransform) TweenLite.set(X, {x: "+=0"}); var XgT={}; for(var i<P.length;i--{XgT[P[i]]=X._gsTransform[P[i]];} return XgT; }
  17. OSUblake

    animation in a loop

    Well you can rework it to do each letter individually, but it sounds like you are understanding what is going on now. Each time that function is called it's creating a new scope that is different than the one in the loop, so what happens in the loop will no longer effect stuff that is happening in the function. I know, it's confusing. JavaScript is just a weird language, and it can be really hard to explain how things work unless you do it yourself through trial and a lot of errors. Here's a quick lesson in closures. See if you can figure out what's going on. http://codepen.io/garethredfern/pen/ojqrXv
  18. OSUblake

    animation in a loop

    I can't believe I forgot about the text plugin. This makes it much easier!!! http://codepen.io/osublake/pen/01fb9806bfe72e48df84e8c74d142925?editors=001
  19. OSUblake

    Smooth transition for TimelineLite.seek

    Chris Gannon made this to get transform values for jQuery objects. http://blog.gannon.tv/2013/01/11/greensock-properties-helper-class-for-javascript-and-jquery/
  20. OSUblake

    animation in a loop

    The problem with that one is that diffValue changes on every iteration, so it's doing the same thing as that button demo. I added a function outside the loop to handle this. I also used TweenLite.delayedCall since you're really not doing an animation. http://codepen.io/osublake/pen/LpBXYr?editors=001
  21. OSUblake

    Dynamic Sprite sheets with Sizmek

    It seems like the document and window load events might have already fired before the ad starts to load. Aren't ads loaded after the page? Sorry, I don't know much about banner ads and how they work.
  22. OSUblake

    animation in a loop

    Also, you can avoid a lot of closure issues by using forEach on an array instead of a for loop since it's already inside a function. var myLetters = ["h","e","l","l", "o"]; myLetters.forEach(function(letter, i) { // Do your loop stuff in here console.log("Letter " + letter + " is at index " + i); }); https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
  23. OSUblake

    animation in a loop

    Ah good! You caught that it still tweened even though it was to 0. When you move the timeline inside the loop like that, it's creating a new timeline on every iteration, so it's basically doing what the TweenLite.to is doing. So the reason the timeline animation works is because they are being added to the timeline and are set to start at different times, one right after another. By just using TweenLite.to in the loop, all the animations will start at the same time, so only the last one will play. A loop does not wait on the animation to finish before moving on the next iteration. So to fix the TweenLite.to box animation is pretty easy. You just need to add a delay to each animation, and it will run in sync with the timeline. var pos = [100, 50, 150, 0]; var tl = new TimelineLite(); for (var i = 0; i < pos.length; i++) { TweenLite.to("#box1", 0.5, { x: pos[i], delay: 0.5 * i }); tl.to("#box2", 0.5, { x: pos[i] }); } http://codepen.io/osublake/pen/f3767edb0aaac0f6294c001449876962?editors=001 Fixing the start time of your callbacks/animation is one part of your problem. I'm not sure how you plan on dealing the time difference between letter changes. Going from a-z will require more steps than going from y-z, thus it will require more time. For the closure issue, I think it's much easier to just create a function that is outside of your loops, and just pass everything that is needed to it. // Outer loop for (var i= 0; i < foo.length; i++) { // Do some stuff... // Inner loop for (var j = 0; i < bar.length; j++) { // Do more stuff... // Call the function setLetter(some, vars, blah) } } function setLetter(some, vars, blah) { // Create the letter animation in here // This will create the closure with the proper scope } Does that help out?
  24. OSUblake

    Dynamic Sprite sheets with Sizmek

    Lol. Nope. I'm still weaning myself off of jQuery, so I keep that link on speed dial.