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. Hello, I was wondering how could we translate CSS 3D animations & transformations to equivalent GSAP code. I have the following CSS: @-webkit-keyframes pathRotate { from { -webkit-transform: rotateZ(0deg);} to { -webkit-transform: rotateZ(360deg); } } And want to translate this into GSAP code. I have also set up a codepen here: http://codepen.io/netgfx/pen/pBgbo What I'm trying to do is rotate in an "orbital" path some objects but without them rotating around themselves. Is there a plugin for GSAP or some specific code that can do that? Thanks in advance!
  2. Ok I got that, but how can I reset the rotation angle on each update? Or do I have to set a new tween each time?
  3. Hello, I would be interested to know if there is a way to dynamically know the rotation that is applied with Physics2D accelerationAngle, or angle in order to rotate the object and seem like its pointing along the animation path. e.x if we have a rocket and we want it to be pointed towards the end of the animation point each each (second/frame) I have set an example here: http://codepen.io/netgfx/pen/nfdBJ What I want to achieve is to be able to rotate the rocket depending on the angle of the animation path. Thanks in advance.
  4. Ah yes... I always seem to forget that part... Thanks Carl, once again to save my poor animations
  5. Hello, I was working with the new KineticJS version and the 2D Physics from GSAP. Although there is no visible error, I can't seem to animate an element the way I used to, with TimelineMax/Lite and "onUpdate:stage.draw", "onUpdateScope:stage" Anyone has any ideas or has faced similar problem? I have set up a codepen here: http://cdpn.io/lzkbu Thanks in advance!
  6. This is an example that I tailored that uses GSAP to imitate exploding objects. It uses multiple canvases on one element but without the need to re-draw them. I understand this might not be the best solution for large objects but it works nicely with small objects and it is easy to integrate. Please feel free to post your own solutions because honestly I think there is somewhat lack of content in the wild about canvas/DOM explosions... example here: http://cdpn.io/FpiJw (codepen) PS: Feel free to fork and change the explode code (please share here if you do). PS1: Make sure you use the SlowMo easing...
  7. Thanks guys I'm glad you liked it The blue bird is a twitter button actually but I also thought it was way too funny to not include it... on a side note I also tested this on my mobile and its smooth as hell... although the drag is not so good (I might need to fix that).
  8. A simple yet fun game made with TweenMax as an animation engine. Developed under 8 hours due to GSAP fast coding techniques. Feel free to post high-scores and bugs here or in my blog! Happy egg-hunting!
  9. I too have noticed this "irregularity" and can confirm it, even with latest chrome still the same issue, whilst on firefox everything animates beautifully.
  10. I recently developed and released a JQuery & Tweenmax plugin that can split, words, letters or lines. It includes some build-in effects, but it is easy to customize, or you can simply use it to get the splited words out. You can find it here: http://nightlycoding.com/index.php/2013/03/text-animation-jquery-plugin-released/ or check some examples and download it here: http://netgfx.github.com/SplitText/ I hope it helps!
  11. As far as I can tell he could be just creating a circle little by little as the page loads. I haven't checked his code but that's what I would do... To create a circle with canvas is fairly easy, just like drawing circles with as3 shape.
  12. In that case it might be better to animate each image (or container individually) and then when it passes 500px limit it returns at position (item.width * -1) thus slightly before the start of the container
  13. If I understand what you want to achieve you might want to use ease:Linear.easeNone, onRepeat:function(){ obj.css({'left':-500}); } and apply the css rule overflow:hidden on the container
  14. While I managed to get the letters to change, they are just being replaced there no animation happening. This might be due to the fact that I'm replacing one letter at a time? Does the plugin work better on a complete phrase or paragraph? I have updated the codepen here: http://codepen.io/netgfx/pen/xAbLh Thanks.
  15. Those elements probably have css styles "float:left" and position:relative or auto, one way to achive this is to set "whitespace:nowrap" on those elements. That will probably solve this issue for you. If not you'll have to position:absolute them and manually set the top and left coordinates. I hope it helps.
  16. Ah I see my mistake didn't know it wasn't included, thanks!
  17. Well I'm having a bit of a problem too, I have split a text into div elements with text inside, and while I iterate through them and declare the text tween, the text doesn't change. I'm including a codepen to show this: http://cdpn.io/xAbLh Should I use a "label" tag for the tween to work or any element that receives text will do? Thanks!
  18. Michael71


    I have finally setup a jquery plugin for the SplitText, and a github project. You can view the github here: http://netgfx.github.com/SplitText/ I have also included some more animations and options, as well as a series of examples. It still needs some refinement but I think it is a good place for someone to start
  19. I don't know if it helps but I'm quoting a piece of advice from Greensock some time ago.
  20. Michael71


    Since I didn't want to make a separate post about this, I tried to create a port from the AS3 "SplitText" function in Javascript. The post and tutorial can be found here: http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/ Also planning of generalizing it and releasing as a JQuery plugin. I hope you like it!
  21. Very interesting that scaling limit. I used fontSize:'+=35' and got almost the same effect (if not better) and it is still smooth. I updated the pen for anyone who wants to play with it. I'll be launching a blog post soon imitating "SplitText" from the greensock AS3 days in Javascript. -- EDIT -- The blog post is ready and it can be found here: http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/ I hope you like it!
  22. Hello, As the title suggests I'm trying to tween multiple objects <div> at the same time to create an explosion effect, because these divs contain text characters so the total amount is about 400. The tween is happening although the total experience seems laggy. I made a quick pen here: http://cdpn.io/DpbIy Thanks.
  23. Michael71


    It would be a good idea I think to gather most of the examples that are in the "wild" using greensock technologies. That is cumbersome too ofcourse but at least it saves some time from writing down tons of examples and tutorials.
  24. As far as I see, the numbers do 3 things: each is scaling by a random amount and with an ease like expoEaseOut each is moving left and right by a tiny amount randomly each is moving from a point to another in a random range (some go right, some left) this should get you started with the "effects" that you need to use I think.
  25. I think this can be achieved nicely with the new css3 properties of tweenmax/lite like transformOrigin You can check some of the examples here: http://www.greensock.com/css3/