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, what plugin should I use to mimic the functionality of this codepen: If someone could also showcase how to animate the SVG Path with a GSAP plugin, I would be grateful. Thanks.
  2. Yes greatly, the .duration() get/set is really useful!
  3. If you know only this part I'm good to go:
  4. Yes exactly something like this. Can I also get the current speed? so I can gradually decrease it? This is for a loader which I'm not sure when it will finish, so I want to keep making it go slower so it doesn't end, and when it is complete to bump it to the end.
  5. Hey guys, long time since I've been here. How can I change the duration of a tween while it is tweening? So I have this: TweenMax.to(".masked", 10, {"background-position": "0px 100%"}); And I want while this is playing, to dynamically increase the duration of it, or lessen it.
  6. Sincerely I'have tried almost every swift animation library out there. I really home Greensock decides to port to Swift, I know my company would buy it for sure, since we are 4 developers that really struggle with animations on Swift. *fingers crossed!*
  7. It seems to work on chrome emulator, what seems to be the problem? Doesn't start? Some animation doesn't fire or out of sync?
  8. Have you tried to include the autoKill: false property to see if this behaviour is due to something else messing with the scroll?
  9. Interesting, thanks for sharing that. I would be interested in others opinions also, this isn't so much a question but rather an engagement for ideas.
  10. Hello, I just wanted to ask a few opinions about the material design animations/easings. Which ease offered by GSAP you think matches their example here: http://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight Also which techninques/plugins of GSAP could be used to create material desing based elements/componenets. Looking forward to your responses.
  11. It is not extremely difficult to achieve something like this. You could try and attach some logic into the resize event. $(window).resize(function(){ // resize container here }); Then for the slider you could setup your animation to animate left/right according to the full-width of the browser. Like follows: // sliding right to left function slideNext(){ TweenMax.to(container, 1, {marginLeft: "-="+$(window).innerWidth()}); } // sliding left to right function slidePrev(){ TweenMax.to(container, 1, {marginLeft: "+="+$(window).innerWidth()}); } *Provided that the "containers" inside the main slider span for the full browser width.
  12. I would think that you could do some tutorials based on difficulty from absolute beginning to extremely advanced. That way you could reach an increased amount of audience. Personally the only thing that I still find difficult to master is Bezier tweening (for some reason).
  13. You can capture the scroll event with: $(window).scroll(function (e) { var $top = $(window).scrollTop(); // how many pixels scrolled from top }); And then do some calculations and apply a tween TweenLite.to(".obj", 0.5,{autoAlpha:0}); And the reverse of that, if you need to fade-in when the user scrolls back again. But if you are looking for some more complex animations I would suggest: http://janpaepke.github.io/ScrollMagic/ Which uses GSAP at its core and gives access to many cool effects that are based on scrolling.
  14. Hello and welcome to Greensock forum, You can read a very basic implementation of the DrawSVG plugin in a tutorial I wrote, it is very basic but I think it is a good place to start, it also includes a codepen post that you can fork and experiment upon that. You can find it here: http://nightlycoding.com/index.php/2014/12/simple-svg-animation-with-greensock-drawsvg-plugin/
  15. Here's an old particle animation with many small canvases. http://codepen.io/netgfx/pen/FpiJw And an old blog post I had written: http://nightlycoding.com/index.php/2013/10/particles-with-kineticjs-and-collision-detection/
  16. Yes you could also add a stagger animation to have the light-on to last a bit longer and the light-off to go with a slight delay
  17. You could use an image of the flash and animate it from 0 opacity to 1, along with some exponential easing and then hide it right away.
  18. You can also check out my tutorial here: http://nightlycoding.com/index.php/2014/12/simple-svg-animation-with-greensock-drawsvg-plugin/ It is pretty basic but I hope it helps you somehow.
  19. To import images for a non-pro account you can use free hosting websites like photobucket and link them from there as they provide a url to use as image source, and it works for cross-domain linkage. For the fill you can fill the outer element like this: TweenLite.set("path1",{fill:"#ff0000"}); And the inner like this for transparency (I haven't tested this on svg but it should work I guess) TweenLite.set("path-inner",{fill:"rgba(255,255,255,0)"});
  20. The duration of the tween is extremely fast to practically capture the active state. Have you tried this scenario with a duration of 2-3 seconds? So that the click is properly triggered while the tween is animating? Also where is the "next" class added? Is it ever going inside the first "if" statement? You could post a codepen example, so that we can test and apply different solutions.
  21. Try this: var tl = TweenLite.to(element, 0.5, {backgroundPosition: newPosition + "px 0px", ease: Cubic.easeInOut}); $("#button").on("click", function(e){ if(tl.isActive()){ e.preventDefault(); // this will also stop <a> tag links e.stopImmediatePropagation(); // this will stop event bubbling return false; } }); Basically you need to check if the animation is running from inside the event trigger callback and cancel it.
  22. Thank you, yes that is what I was looking for, sometimes we have to think out of the box right?
  23. Hey Carl I see what you mean, the codepen example doesn't work though, it throws the Codepen 404 equivalent.
  24. You can use the event that gets passed by default inside the click handler $(".ss").click(function(e){ var selectedItem = $(e.currentTarget); t.to(selectedItem, 4, {rotation: 360, ease:Bounce.easeOut}); t.play(); }); Mind that reverse is applied to the whole timeline effect, if you want individual tweens that can be reversed you might want to try TweenMax/Lite.