Praney Behl
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Praney Behl
-
Awesome, thanks Carl, I was just looking for that too
-
@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
-
Sure Jack, Thanks for the preview
-
Thanks Jack, Works great now. So would there be an update to include the TweenMax as it includes them all. Thanks, Praney
-
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
-
{Article Share} CSS vs. JS Animation: Which is Faster?
Praney Behl replied to dneckles's topic in GSAP
Thanks for the share -
Alright it worked using the svg plugin.
-
Thanks mate trying now
-
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?
-
Thanks Jack Looking forward to the docs
-
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
-
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
-
Thanks guys, I hope there was an easy solution. Cheers!
-
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
-
Thanks for the explanation Carl, no % values in 2D transforms explains odd behaviour. I'll try to reproduce the same. Praney
-
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
-
Oops... wrong thread. moved to : http://forums.greensock.com/topic/9211-need-help-with-properties-in-gstransform-object/
-
Thanks mate, that was insightful
-
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
-
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
-
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
-
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
-
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.
-
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
