Jump to content

Michael71 last won the day on July 24 2014

Michael71 had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Michael71

  1. Yes I see now what was wrong with my code. The key point was the difference between append and insert I updated the fiddle to show what I was after. http://jsfiddle.net/7aQvP/98/ Thank you both very much for the help. It cleared some things greatly.
  2. I think I understand why the alerts pop out like they do, but shouldn't the playhead simultaneously be moving as the alerts pop-up? Since I align them at start? The "odd" behavior that I see is that after all alerts go off, then the playhead starts moving. Should I declare something different in the original TimelineMax declaration for this to happen? I have an almost similar code in AS3 that works as intended that's why I'm getting confused here. In AS3 I use "addLabel" and "addCallback" however instead of "append", does that make a difference?
  3. Sure here it is : http://jsfiddle.net/7aQvP/95/ maybe I'm missing something in the timelineMax declaration. What I'm trying to achieve is to call the "callback" function at these specified times as the "playhead" moves at the same time.
  4. Yes it seems that when I'm defining a timelineMax on a kineticJS canvas element all the labels fire at once instead of their desired interval. any help there?
  5. On a side note I would also recommend using SVG map and then TweenMax/Lite to animate properties. something like the following, as you may notice I have set an ID for each country so I could manipulate that object on demand. http://www.netgfx.com/trunk/svgmap/ Whilst Rafael is an excellent library I tend to keep things simple when I can. Just my 0.2$
  6. Yes my bad what you need is the onrepeat function, that gets called when the Tween repeats it-self.
  7. I think that if you set an onComplete function that restarts the effect from the desired location it will do the trick. For example: TweenMax.to($("#bg"),1,{css:{backgroundPosition:"+=1px 0"},repeat:-1,onComplete:function(){ $("#bg").css({backgroundPosition:"0 0"}); }});
  8. Yes that did it, although I'm getting a bit of a delay before the animation starts and the labels don't display as they should, but I'm still looking into it. Thanks for the help once again!
  9. It seems that I'm missing something, check out this fiddle please, am I doing something wrong in the declarations? http://jsfiddle.net/7aQvP/72/
  10. You are absolutely right about that, I will give it a try. Thanks again!
  11. Hello, I'm trying to animate a rectangle created with KineticJS, however I keep getting "Uncaught TypeError: Cannot read property 'setX' of undefined" the code is the following: var scrub = new Kinetic.Rect({ x: 0, y: 0, width: 4, height: 120, fill: '#ff3019', draggable: true, id:'scrub', name:'scrub', dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); TimelineMax({paused:true}); tl.insert(TweenMax.to(scrub,5,{css:{setX:500},onComplete:function(){ console.log('to 500'); }})); tl.insert(TweenMax.to(scrub,5,{css:{setX:800},onComplete:function(){ console.log('to 800'); }})); tl.play(); Do you guys have any idea why is this throwing an error? Thanks in advance!
  12. Then I might suggest trying with canvas element, I have seen that image rendering seems to behave better when inside a canvas element, so maybe try to include all of the images inside the canvas and then simply animate them as you would normaly. I know this might be a pain to implement and change but it is worth the try. Generally large images in webkit browser still give me headache...
  13. You could try instead of visibility:hidden to use display:none, that way the browser is not struggling to render the image or element into the DOM. I'm not sure if this will remove the stutter altogether but it will surely improve the performance.
  14. Thanks for the suggestion I'll check it out, filters offer many possibilities indeed.
  15. This image seems to have some sort of shadow around it, if you open it with Photoshop you can see its not tottaly white or transparent around it. If that is not the case then I'm not sure what is going on, as I have set autoAlpha with many .png transparent images and it worked fine.
  16. I agree photo-manupulation is certainly a powerful tool to have. Thanks for the quick reply!
  17. Hello, I'm playing around the new awesome css3 additions to the TweenMax/Lite library and I was wondering if it supports filters like blur, brightness, saturation etc... I have tried to declare them but there seems to be no effect happening. In css we would declare them like this: filter: blur(5px); // Browser Specific -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); So I tried this: TweenMax.to(myObj,0.5,{CSS:{blur:'5px'}}); Is it something that will get implemented along the way or am I missing something in the declaration? Thanks and keep up the good work!
  18. I have wrote down a simple tutorial about how to create parallax effect with GSAP and JQuery. You can view it here: http://nightlycoding.com/index.php/2012/06/parallax-effect-with-jquery-and-tweenmax-greenshock/ I hope it helps.
  19. Thank you Carl, I'm happy to showcase my findings, and I hope these can be useful to someone. As for an advanced/complicated example, I'm working on a JQuery plugin that will include PreloadJS, TweenMax, and SVGs I'll post here some initial work that shows how someone can manipulate multiple static SVG elements into one smooth animation. In the link below there is a file called ImgPlus.js that includes a "huge" string that is inserted into the DOM and declares several SVG elements that are something like a sprite but for a loader graphic. And with the help of the GSAP JS (specifically TimelineMax) I managed to combine them into one animation that shows until the images are loaded. http://netgfx.com/trunk/imgplus/ Of course its still a work in progress but should be useful if someone wants to see how to animate some SVG elements sequentially. Let me know what you think
  20. Recently wrote down an article/tutorial about simple animation of SVG graphics and SVG injection. I really believe that with the retina displays and the need for high quality graphics is going to give a boost to SVG rendering and manipulation. You can check my blog post here: http://nightlycoding.com/index.php/2012/10/animating-properties-of-injected-svg-elements-with-tweenmax/
  21. Very impressive, I'm mostly interested for the timeline element what did you use to make it, any library that you linked with greensock? If you don't mind sharing. Thanks in advance!
  22. Thanks Carl, even though PreloadJS is still in early version and could use some extra functions its still a great tool for loading dynamic images and keeping track of progress.
  23. Well I'm trying to animate a DOM element that will also contain text, the text should be "readable" when throwing/tweening it along with its background. I wouldn't mind giving the plugin version a try, I was a former Club Greensock member until 2-3 months ago, but I'll probably signup again with all these stuff happening here.
  24. Basically I'm trying to create a drag and release kind of effect, something like the throw props used to do in AS3. I'm thinking it might be possible with easing but not sure it would be as smooth or tweening properly when someone is scolling/clicking and dragging. Do you think something like this could be done in such a way? Or if someone has some idea I would be happy to hear it. Thanks again.
  25. Hello there, I was wondering if the Throw Props plugin is something that is coming soon, I believe its one of the most useful plugins as it allows quite many applications. Would really love to see something like this on Javascript for our "mobile content creating urges"... Keep up the good work, the lib is amazing so far.