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 I limit a draggable movement only diagonally towards top-left and bottom-right. Thanks guys!
  2. Maybe something like: TweenMax.to(myItem, 1, {width:"100%", onComplete:function(){ TweenMax.set(myItem, {width: 'auto'}); // this will set the width to auto immediately //or TweenMax.to(myItem, 1, {width: 'auto'}); // this will animate it }}); If I understood correctly...
  3. Michael71

    Blur filters

    For non-canvas and only webkit based browsers you could try these properties: -webkit-filter: blur(5px); filter: blur(5px); But not all browsers support filter property yet.
  4. Maybe this post will help you if I understand correctly: http://greensock.com/forums/topic/8113-svg-path-animation-or-help-convert-path-to-bezier/
  5. As far as I understand when a tween is defined it "stores" the position of the item that is about to tween and then animates it (starting or ending positions I guess depends on the .from or .to declarations). In your case that "starting/ending" position has changed while the animation was running (that is logical since the animation repeats so it never ends) and whilst the css position changed from 55 to 0 the tween doesn't know that. That is why we try to run invalidate which clears starting positions. more info here: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/ One way would be to add the following on the resize event: var tm = new TimelineLite({}); window.onresize = function(){ tm.kill(); tm.invalidate(); tm.restart(); }; I hope I'm making more sense now. The point is that if the css that the tween is affecting changes, the tween needs to be updated.
  6. Yes I see it now, it actually makes sense, since what the media query is saying is that it should end up at 55px from top, and the tween only states where it should start from (which is -200 pixels). If you see the #thing box ends up at 55pixels from -200 so the "from" works correctly I think if you add something like this: var intro_timeline = new TimelineMax({repeat:-1, onRepeat:function(){ TweenLite.set("#thing", {clearProps:"all"}); intro_timeline.invalidate(); //intro_timeline.restart(); }}); intro_timeline .from($('#desc'), 2, {top:"-200px"}) .from($('#thing'), 2, {top:"-200px"}); Fixes the issue, basically the tween needs to update its starting positions You can view the forked codepen here: http://codepen.io/netgfx/pen/NPNzqo for a more snappy but expensive solution you could invalidate onUpdate but I wouldn't recommend it. As a rule of thumb I find .to or .fromTo functions to be less confusing and offer more control. I hope it helps.
  7. To kill all tweens you could run TweenMax.killAll(); or more specific TweenMax.killTweensOf(myObject); (myobject is any selector or jquery object) Now apart from that I could not see the problem you are describing, for me the boxes kept on coming down even while I was re-sizing the browser, even when I opened the chrome mobile emulator. The problem you are experiencing it might be due to intense framing, meaning that for some reason the CPU is running very intensively so you might experience those effects.
  8. Yes that is exactly what I was after, dammit I need to use timeline more... So the trick here was to animate the z and have "transformOrigin" defined at the start as well as "perspectiveOrigin" Thanks for that!
  9. You can use: TweenMax.getAllTweens() As described here: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/getAllTweens/
  10. Hello, I'm trying to create an effect that several boxes that overlap are rotated and then each one expands from the other in a 3D way. The only way I found that does that is by modifying the transformOrigin property. But unfortunately that property does not animate and simply goes into position. Is there a better way to achieve this? (the codepen sample should illustrate the animation that I'm describing) Thanks. Here's the codepen again: http://codepen.io/netgfx/pen/EaKPdP
  11. I think that happens because the 2nd and 3rd shapes have more than one strokes. It may appear as one path but as far as I can see it is not continuous. You could count the svg length by using the following code: var path = document.querySelector('.obj1 path'); path.getTotalLength(); Also since this a percentage tween, svgs with shorter paths will be completed sooner.
  12. As stated in GSAP homepage http://greensock.com/gsap
  13. By scaling the html element everything inside is scaled also, which I think forces more drawing for the cpu/gpu.
  14. I think trying to scale the whole html element (page) would have an enormous impact on performance among other things. What I would advice is to have an inner container like <div class="mainContainer"></div> And include everything in there and scale that (if that is desired). Also make sure to include the following meta tag in the head of the html page: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0"> Also to find which is the correct ratio and size of the page try the following: var w = window.innerWidth * window.devicePixelRatio, h = window.innerHeight * window.devicePixelRatio; I hope this helps somehow. However since I struggled a lot with gaming my self I ended up using an excellent framework called Phaser.io which is rumored and petitioned into using GSAP library for its tweening engine.
  15. I used GSAP recently in 3 banner templates that were made with Google Web Designer and it was fairly easy as it is actually basic JS/HTML. I haven't used it with the timeline mode though just plain javascript.
  16. Yes it sure is possible, actually SplitText what it does (among other cool things) is to split a text into letters, words, etc. As Blast.js does the same thing it applies a class to those "splitted letters, words, etc". Then it is as simple as animating any other element. TweenMax.fromTo(".blast", 1, {autoAlpha:0}, {autoAlpha:1}); You can view an example with splitText here: http://codepen.io/netgfx/pen/cmDpr Basically you can fork my example and use blast.js to split the letters/words and if you keep the same class it will basically work out of the box. Note that in my example I use the .revert() function of SplitText that actually un-splits the "splitted letters/words" and makes it whole again.
  17. I'm not sure if it will do the trick after this, but you could try not to base64 your SVG, as stated in this article: http://css-tricks.com/probably-dont-base64-svg/ But since the svg doesn't exist on the DOM it cannot be referenced and thus not be changed.
  18. I think one of the best ways to learn is to try and think or clone animations that you come across on the web, and try to produce them with GSAP. Something fast with Codepen or some other tool. It should help you greatly and motivate you to pick information up. Best of luck!
  19. Well the short answer is that you will have a huge performance gain. However this will be noticeable on desktop browsers, on mobiles canvas offers little performance gain. I have experimented with DOM animating objects for a game but could not get passed the 30fps when items got more than 20-30. Whist with Canvas over 100 items did not drop the frame rate below 60fps. Of course both experiments were done using GSAP as the animation engine. Also I was using KinectJS for canvas manipulation.
  20. Michael71

    Color Tween

    I think what the OP is requesting is the HTML5 equivalent of "Tint" that we used to have in AS3. In a nuttshel as far as I know there isn't any "global" solution for this (unfortunatelly).
  21. I have created two examples one for horizontal scrolling here: http://nightlycoding.com/index.php/2012/06/parallax-effect-with-jquery-and-tweenmax-greenshock/ and one for vertical scrolling (as the user scrolls the page) http://codepen.io/netgfx/pen/vzIew I hope it helps
  22. I mostly go with ScreencastOmatic http://www.screencast-o-matic.com/ and then convert via formatFactory http://www.pcfreetime.com/
  23. Yes I see. that is really cool. However since the animation I posted was rather extensive would we fall under some html5 limitation or performance drop?
  24. Hello, One of my blog readers recently asked me about this animation and how we could achieve this without flash. http://www.theguardian.com/uk/interactive/2011/sep/05/england-riots-timeline-interactive?CMP=twt_gu I have a gut feeling that this can be done with GSAP, but haven't really put anything into action yet. How do you think it could be done? Would you use Canvas or simple HTML5? Would some CSS3 be needed or we can do everything with GSAP? Let me know what you think.
  25. I don't think that was a menu but some text being animated with 3D effect. Besides learning GSAP is quite easy and it will not take you as much time as you think. There is extensive documentation and examples at http://codepen.io