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. Well, the reason for the blur is because the images are being scaled. You would need to load the images at that size to prevent the blur. Another way would be to load two images, one for a thumbnail and the other for the full size. As for the centering, I don't see anything wrong. However, I can't check on Safari right now.
  2. You can get it before those. I added those just for effect so it wasn't all done by the time the page finished loading.
  3. I'm having a hard time even understanding your layout. Code wise it doesn't look bad, but I'm not sure what's going on there. I would suggest you just start over with my first example. I know learning the canvas can be hard, but it's worth it. The reason I asked why you were using SVG is because it has its own coordinate system. It's not going to do what you might think it should. I forked that second demo and but some SVG circles behind the text. It looks centered, but resize the screen. The animations are getting all of whack because the coordinates are being scaled.
  4. You should check out his leaf falling demo. It's pretty close to the movement of a parachute. http://codepen.io/MAW/pen/vOrqKR
  5. You want to stay DRY, so that could be done with one tween. Remember that you can reverse them. And you should use 'y' instead of 'translateY'. If you could provide an example or make a CodePen of what you're trying to do, we could provide better assistance. Here's a recent thread about reusing tweens. I know it's not doing what you asked, but it was a good learning lesson for some of the beginners. http://greensock.com/forums/topic/12162-can-i-use-jquery-not-in-a-timeline-or-alternative-i-just-need-my-sliding-pages-to-work-like-an-accordion-one-open-at-a-time/ And the example I forked to show how to toggle and reference tweens. http://codepen.io/osublake/pen/vObmBR
  6. Pretty cool, huh? No flux capacitor required. GSAP won't render till the next cycle, so it's like it never even happened.
  7. You can go into the future and then back in time... http://codepen.io/osublake/pen/0d2799deafd43ef0a2d7e21d96549950
  8. I like to put outlines around elements while positioning them, which will let you clearly see the problem. To drag an anchor, first you need to set 'dragClickables: true' on your draggable. But an anchor is an inline element, so you need to wrap it in something like a div or set it to display block in you CSS. http://codepen.io/osublake/pen/eNaGga
  9. That looks like the TweenPlugin, so you're close. Do you see in anything related to GreenSock on the global object, like GreenSockGlobals or com.greensock? And did you try adding this to the end of the file? That should export TweenLite and be the value of gsap on your require. module.exports = TweenLite;
  10. That I don't know. I've really don't mess around with symbols or use. Maybe somebody else could answer that one.
  11. PointC is right, although the class has nothing to do with it. You could have selected it using the "use" tag. Symbols aren't rendered.
  12. I didn't event realize this was a two-part question Do you have an example of what you're going after? But... always keep a reference to your animation so you can pause/resume and keep track of its progress value. Not sure if you know this, but GSAP stores all the transforms on the element for quick lookup which makes it real easy to find the x,y,rotation,etc... values. // Lookup values on your element like this var x = myElement._gsTransform.x; var y = myElement._gsTransform.y;
  13. Yeah, you probably won't need TweenMax. Most of the file is plugins, which you could remove. But the TweenLite file should be the same. The file looks a little different, but it still doing the same checks for module.exports and a window.
  14. I'm having a hard time understanding the value of this. What's the difference between what velocity is doing and a function that creates a tween? So GSAP doesn't do that out of the box, but I made a quickie version of the Velocity Effect. Just pass in array of objects with the duration, vars, and/or a label. You could modify it to have other options like a total duration, tween types, callbacks... basically whatever you want. http://codepen.io/osublake/pen/YXbyPL
  15. No, not a new method. Just like you have it above. It just seems more descriptive, and lets people know that is a stagger property. Alternate sounds like every other one to me.
  16. Nice! "By" is a common suffix for an iteratee, so how about "staggerBy" for the name?
  17. That obscene dongus had me rolling
  18. Check out this thread about using GSAP in Node. http://greensock.com/forums/topic/11484-using-gsap-with-nodejs/?hl=node#entry47993
  19. Please make a CodePen so we can see the problem. When you are quickly moving it across the screen, you might be triggering it to go back to the original position and you are catching it, causing the dragging to continue. This could explain the offset. Check if your drop function is being called while you are dragging.
  20. Ha ha! Did you really want that? Here's a thread that deals with a similar issue. But if you search the forums, you will find tons on hover examples. http://greensock.com/forums/topic/12215-rotate-an-object-360%C2%BA-on-mouse-over-without-overwriting-a-current-rotation/
  21. Here's another canvas example I helped somebody with. It's kind of the reverse of what you want, but it's still responsive. However, I would have done the calculation different. He just used the width of the body, but you should use the distance from the center of the screen to a corner. http://codepen.io/johnheiner/pen/WvOMzJ
  22. Is there a reason you are using SVG for that? But it really doesn't matter what you're using when you are scaling something 15x as a guess. You need to calculate the size it should be to make sure it cover the entire screen. This will also make sure that it doesn't go into overflow, causing the scrollbars to show. To get it behind your text, you're probably going to have do some layering and absolute positioning.
  23. Check out this thread... http://greensock.com/forums/topic/12010-tweenmaxjs-scale-animation-is-laggy-on-desktop-firefox-and-mobile/ And this demo... http://codepen.io/osublake/pen/eNrQqV/ I used canvas because SVG is slow. In the code will see how it finds the correct distance to the edge of the screen. I made it so it would hide text, but you could just put it in a container behind your text.
  24. You're not starting the animation after the images have loaded. Look at the $(window).load(...) in the post right before yours. Fork this and simplify it so we can see what the problem is. I used lorempixel for the images. You can set the size of the image like this - http://lorempixel.com/400/200/ which will be 400x200. Add '?i=' and a random number on the end of the url to stop the browser from caching the image. http://codepen.io/osublake/pen/2925b442fea5459ed065e81abc7194f1
  25. Ha ha! That demo is awesome. Basically three lines of code.