Jump to content
GreenSock

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

Praney Behl last won the day on August 24 2013

Praney Behl had the most liked content!

Praney Behl

Members
  • Posts

    74
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by Praney Behl

  1. Awesome, thanks Carl, I was just looking for that too
  2. @FingerPuk, To be able to load GSAP from CDN, you'll need to install the Meteor plugin called External File Loader. Use: mrt add external-file-loader to install the plugin. Here is the method you'll need: Method loadJs(url, callback, timeoutDelay) - Load external JS from a url. Callback is called once the url has been loaded. TimeoutDelay is the delay before timeout, in ms. Callback and timeoutDelay are optional. The method returns a jQuery promise. If you are using Iron router, it is best you load your external script on the waitOn() function to make sure they are loaded before the page loads. If you are not using Iron-Router, you can load the GSAP CDN with external file loader in the Template.created() callback. Template.Templatename.created = function() { Meteor.Loader.loadJs("//cdnUrl"); } I have personally created a local GSAP plugin for meteor that I use. I'll see if I could put up a free version of GSAP plugin up on Github. I hope it helps, Praney
  3. Sure Jack, Thanks for the preview
  4. Thanks Jack, Works great now. So would there be an update to include the TweenMax as it includes them all. Thanks, Praney
  5. I have been trying to work using the skewX and skewY properties. For some reason skewY has been acting very strange, although skewX seems to work fine. Here : http://codepen.io/praneybehl/pen/lkhFn Is this a bug? Thanks, Praney
  6. Alright it worked using the svg plugin.
  7. Thanks mate trying now
  8. Thanks Carl, I tried the same to my svg, it works great on a <rect> element but doesn't work with a <text> element. here: http://codepen.io/praneybehl/pen/CBxaf How can we tween the text elements of an svg document?
  9. Praney Behl

    Game Demo

    Congratulations mate. Looks pretty good
  10. Thanks Jack Looking forward to the docs
  11. Thanks Jamie, Well I do have the Business Green Membership. Darn! Should have read the whole post carefully. Thats what you get for 2-3 hours sleep. @Jack, mate how can I get my hands on the tool? Thanks, Praney
  12. I agree with Jack, until its only about dragging and resizing, it works fine. But if you try to rotate the element and then try to resize, you will experience some unexpected behaviour, here: http://codepen.io/praneybehl/pen/JtAac?editors=111
  13. Thanks guys, I hope there was an easy solution. Cheers!
  14. Hi guys, I am just playing around with the the Draggable plugin and its awesome. As it can be used for not only dragging but also rotate or scroll content, I wonder if there is a way to make it to resize an element onDrag? Has anyone done that? Does anyone know how it could be done? Thanks, Praney
  15. Thanks for the explanation Carl, no % values in 2D transforms explains odd behaviour. I'll try to reproduce the same. Praney
  16. That's great Although if I look at my sample code created in another thread : css: @keyframes flyanimation { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } and the gsap code: TweenMax.fromTo(item, .6, { transformOrigin: "0% 100%", scale:0, rotation:470, x:"100%", autoAlpha:0 }, { transformOrigin: "50% 0%", scale:1, rotation:0, x:"0%", autoAlpha:1 } ); Here: http://codepen.io/praneybehl/pen/pImHz/ To recreate similar animation 'x' in GSAP represents 'translateY' in CSS. This is quite contradictory though. Similarly, while using transformOrigin: "x, y" in GSAP acts as transform-origin: "y, x" in CSS. Or maybe I am doing something wrong. I am hoping maybe Jack or Carl can explain why this is. Praney
  17. Oops... wrong thread. moved to : http://forums.greensock.com/topic/9211-need-help-with-properties-in-gstransform-object/
  18. Thanks Johnathan, I did a bit of tweaking and this is the closest I could get: http://codepen.io/praneybehl/pen/pImHz/ I think its pretty close to it. Its mind boggling how different the 2 are. Praney
  19. Thanks mate, That means I was right about them but I wasn't sure about perspective and don't know what zOrigin is. Waiting for Jack or Carl to step in and shed some light on it. Praney
  20. Sorry to bother again guys, there is another quick question if you don't mind me asking. I had a look under the hood into the _gsTransform object and it has a few properties. I was able to relate some properties but it would be great to know better about which _gsTransform property are related to what CSS property. Here it is: perspective: ? rotation: ? rotationX: ? rotationY: ? scaleX: ? scaleY: ? scaleZ: ? skewX: ? skewY: ? x: ? y: ? z: ? zOrigin: ? I am sorry if this has been asked before, but I couldn't find any reference to these. Some light on this will be really helpful. Thanks, Praney
  21. Hi there, I am trying to implement some CSS keyframe animation to GSAP. Here is the keyframe animation: @keyframes flyanimation { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } I am trying to figure out if there is a way to do it with the GSAP .fromTo() method or similar, if it is possible. Any help will be greatly appreciated. Thanks, Praney
  22. Thanks Jack, I do understand that it's a feature. I guess I'll just have to get a hang of it. I figured that I had to add the negative z-index (-200) set in the transformOrigin properties to get similar results. Praney edit: Moved other question to new thread.
  23. Hi guys, Just trying to achieve the CSS animation transforms with GSAP. I am getting different results while using same properties. How can I achieve results like in CSS animation? I am doing something wrong? Here is the code: http://codepen.io/praneybehl/pen/Gbmhs Thank you for the help. Praney
×