Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

27 Newbie

About ElliotGeno

  • Rank
    Advanced Member
  • Birthday 07/26/1980

Profile Information

  • Gender
  • Location
    Columbus Ohio
  • Interests
    Flash and AIR application development as well as Javascript animation.

Recent Profile Visitors

4,990 profile views
  1. I suppose you could animate a value and use setValue onUpdate.
  2. Actually, it looks like the key nugget I was looking for is Throwable! I had no idea it existed! http://greensock.com/docs/#/HTML5/Plugins/ThrowPropsPlugin/ Looks like I will need to catch up on this before moving forward!
  3. So I started creating my own tumbler effect using canvas. I have the rendering down perfect, but I needed to add the interactivity. Essentially I draw an SVG of numbers into a canvas element to use as a sprite sheet. I then blit the numerals onto the display depending on where I need them. Works very fast! I then started writing my own events for touch dragging and throwing but kind of got stuck coming up with snapping to a specific target point. I then remembered Greensock had a plugin for such a thing! But the problem is that it is based on physical elements... not applying the e
  4. @OSUblake Is cubic the most performant? If so, I think I could design something that automates the cubic bezier handles. (Basically balance the control points based on other neighboring points.) Optionally allow handles to be overridden by users. (each anchor would toggle between auto-bezier, manual-bezier, and point/'zero-radius') What do you think of that?
  5. Other than chaining multiple tweens, it is rather difficult to adjust a property that needs to return to the same value. I've run into this a lot, but have a hard time articulating the need. Recently, I was reading a blog about various animation tools and Mo.js came up which I wasn't familiar with. (Don't worry Jack... I'm not switching!) What was interesting is they visualized my need in a graph: http://mojs.io/tutorials/easing/path-easing/ Rather than easing from 0>1 it eases through various values back to 0. (0>0) Like this: I realize you can create your own easing functio
  6. Could be just an optical illusion, but there seems to be easing on it... Even with Linear.easeNone. Also is opacity a property that can't be handled with this? http://codepen.io/pyrografix/pen/WxdwXK?editors=0010
  7. I really like this! The first thing that popped into my head was elliptical motion: http://codepen.io/pyrografix/pen/GqOZQz?editors=0010 @Jack @Carl I tried the scale property but it didn't work properly though. Any suggestions as to why? http://codepen.io/pyrografix/pen/QEOPwK?editors=0011 I am thinking it is because scale is a composite of scaleX and scaleY. (scaleX and scaleY work independently)
  8. Actually I spoke too soon... Apparently it only worked for that one example: As soon as I tried it on a different shape it went crazy again: http://codepen.io/pyrografix/pen/VayZRw
  9. Thanks guys! I also found this worked where 10 is half the width and height for both transform origin and offsets but I like your solution better! var path = MorphSVGPlugin.pathDataToBezier(".path",{offsetX:-10,offsetY:-10}); var bee = document.querySelector(".bee"); TweenMax.to(bee, 20, { force3D:true, bezier: { type: "cubic", values: path, autoRotate:true }, ease:Linear.easeNone, repeat:-1, transformOrigin:"10 10" });
  10. If I wanted to offset the position of that arrow to center it on the line... How would I go about doing that? I tried using a transformOrigin, but that makes it look worse.
  11. I found this HTML validator. Hope it helps someone! https://validator.w3.org/#validate_by_input
  12. I was curious if there was a way to clone a reference to a tween. Similar to how TimelineMax.add( TweenMax.to("blah",.5,{x:50}) ); can include any sort of tween method in it as an argument and call it at a later date. For example: I want to create a generic method that could clone any reference any type of tween or timeline... kill or somehow pause that tween from the argument... then call a new tween or cloned tween at a later date. Like this: addEvent(element,"mouseover", TweenMax.to(element,.5,{backgroundColor:"red"}); addEvent(element,"mouseout", TweenMax.to(element,.5,{backg
  13. Like ripping a Band-Aid off... while you are still bleeding. The tools simply are not there yet for designers to create HTML5 banners. The code these tools spit out are a rats nest of code I would not want to debug. You are better off hand coding these banners. Unlike Flash, it's an exercise better suited for those with development skills. Banner ads are typically handled by designers, so a shift in the types of associates applied to the work will need to change. Luckily Greensock is there for us designers/developers hybrid types! These new specs are still woefully inept. This was an
  14. Is stagger the only one that can accept this randomized function? I kind of like alt... easiest to type and it could either stand for alternate or alternative which, to me, seems to be what its doing. Supplying alternative values.
  15. Obviously, anything to reduce the amount of code would still be helpful as this is for a banner ad!