Search the Community

Is it possible to update values of html on resize? Like this? onResizeStart:function() { xSize.innerHTML = this.target._gsTransform.scaleX; ySize.innerHTML = this.target._gsTransform.scaleY; } In the codepen i can't get values of _gsTransform.scaleX for some reason.

I want to make a fortune wheeler game where user can click the button to spin the wheel then when it stops, it will show what user get. I create the function to spin the wheel but not I'm sure which approach to detect which item is chosen. Can someone give me an idea how to approach this? Thanks a bunch!

Moving an existing es6 animation project from Webpack 3 to Webpack 4 I'm facing a weird phenomenon according to the _gsTransform object when I move from 'gsap' to 'gsap/all' imports. Maybe it's the very high temperature here at the moment, but I can't really get my head around why this is... At the moment unfortunately I can't find the time to create a small project to show you guys, but if I can find the time later on I'll setup one. If I can't fix this with 'gsap/all' I'll stick with 'gsap' on this project for now and fix it later, but it would be great if maybe by chance anybody faced the same problem and could point me in a direction. The thing is that by running the webpack development server on the project everything works like it always did. Also when I move all greensock imports from 'gsap' to 'gsap/all'. But as soon as I let webpack create a production build and run the build from the dist on my local server, suddenly it won't run because the _gsTransform object I use to get a position of an svg-element is not there anymore, so it can't read x and y from it. At first I thought it could be the treeshaking thing which could be different between development and production. So I included all gsap modules I use in a constant, like the examples on the greensock website. So like: import { TweenLite, TimelineMax, Linear, Sine, Back } from 'gsap/all'; const uses = [TweenLite, TimelineMax, Linear, Sine, Back]; But to my surprise that didn't solve the issue: the _gsTransform object just isn't there on the DOM/SVG-element on the production build. Which is there and working fine when running a development build and running from there, or running from webpack-dev-server. I know webpack 4 does some things differently when mode is set to production, but I can't find a reason that something could cause to prevent the _gsTransform to be on the svg-element on production builds. I also switched off uglifyjs and all, so this cannot be some strange renaming thing. In the end I even made both development and production using the exact same stripped config, but still only the development build works and has the _gsTransform object. To me this doesn't make any sense so far and I'm out of ideas now. Anybody here perhaps knows if there is something extra I need to do, or maybe import from 'gsap/all' to make _gsTransform work and available on production builds? To be clear: using imports from 'gsap' everything works on production builds too, the problem is only there when importing from 'gsap/all'. It seems like some needed part of greensock is not make it after treeshaking and I needed to import something extra from the lib which I didn't needed to import before, when I was importing from 'gsap' (and the full package came with it, because there was no treeshaking). But even then I think it's strange that the development build doesn't have this problem with 'gsap/all'... crazy Again, if I can't find some solution today I will stick on this project on 'gsap', so it's not a grand big of a deal, but I'd rather switch. Thanks!

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. Please can anyone help me get the transform.x of a node that is being animated by timelinemax? Please see codepen for my attempts. Thanks.

I am looking for a way to know the current position of a x,y tween. I am using the css plugin to move DOM elements around the screen. I'm not sure if I am overlooking something. I have searched the forums and documentation, and all I could find was the tip to hack a secretly hidden property of a tweened element: _gsTransform My question: is there no official way to get the x and y properties? Is this secret hack the only way? It seems a bit hacky to me, and it doesn't result in clean code. TweenLite.get() would be great! btw, this problem gets worse when you use typescript, since the typescript definition file does not include _gsTransform. In typescript, you will get this error when you try to read _gsTransform: let x = this.element._gsTransform.x // error: htmlElement has no property _gsTransform Of course, I can add _gsTransform manually, but that's even more hacky.

Dear GSAP and fellow GSAP users. Although I found a workaround, as I expand my usage of your api, I thought it might be useful for me, and maybe others, to create a discussion based on what I encountered I've added a codepen as this is good practice, but it's a completely stripped down version of what is actually happening, as it is not possible to include everything, and what I'm after, seems to me to be something fairly straight forward. Scenario I have a timeline (small snippet in codepen) that simply animates some text, but which includes calls (removed from codepen) to external (unconnected to the animation) functionality. The timeline works great, and all the controls I've included do exactly as expected - accept that what I want to happen is when a user pauses the anim, the text acts gracefully and moves back to the starting position (css only, not timeline), as I don't want the text just to be stuck mid flow. I handle the external calls perfectly and the paused state is fine, all I want is the css side to be cleared. Ok so I tried the clearProps:transform || all etc (via a set command, and injected at different time points**), I also removed props/data/attr etc etc, but the transform on the text resolutely remains, if the timeline is either playing or paused. If I clear first, then clearProps works. For completeness, I tried killing the current tween (which I don't want,but as a test), didn't do anything. I tried using the timelinemax calls to get current/before/after labels, but since this moves the play head, but not the external function calls, I cannot use this. **Now I've read conflicting posts that say it is possible to use clearProps on working timelines as GSAP doesn't force continual transforms, and others that say it is not supposed to work in that way. I believe the default is for overwrite between tweens so wouldn't this allow another tween to take precedence? I'm pretty sure a tween is added to the end of the stack, as per api and probably explains what I'm seeing. I used $('.key-shortcuts').children().removeAttr("style"), which seems a rather blunt force approach, as it clears all styling, whether GSAP related or not. (but then looking at the code I think clearprops does the same?) Based on my scenario what would be the GSAP way to clear (or manipulate) the added css in a working timeline paused or otherwise? One final question, I quite often want to base one tween in relation to a previous label, but also want to label that very same tween. e.g. t1.to(some el,1,{some css},"label1+=1","but also be labeled itself?"); Is that possible? Btw, GSAP is just great, I had used it before mainly for the performance boost, standalone or as a jquery override, but for some reason I missed the timeline aspects. It's brilliant, I've already started removing the hugely ugly jquery way Thanks in advance

Hi guys, Just trying to figure out how to initiate or have the element._gsTransform object added to a DOM element when an event is fired lets say click. Is there a way to initiate GSAP without making any changes to the elements css? Thanks, Praney

We are using GS in an environment where we might need to change element styles on the fly before, after or in between animations (change rotation or opacity for example). But, GS saves the initial values on element._gsTransform and I have to delete or update it manually if I want my animations source/destination values to update with my elements. I couldn't find any reference for a formal way to set get or remove gsTransform properties. is there any? is there one in the making? are there any best practices? Thanks Tom.

Hi I have a question about getting a value of an object with _gsTransform. I get undefined and i have to use GreenProp to get values. I would like to know what am i doing wrong. Here is my code: TweenLite.set( picObj.picture, { scale: _s, x: _tempX, y: _tempY }); console.log("gp: ", GreenProp.x(picObj.picture)); console.log("_gsTransform: ", picObj.picture._gsTransform.x); Log from _gsTransform is undefined, log from GreenProp is a value i set. What am i doing wrong? Tnx hf Luka

Hi, I am new to GreenSock and trying to use Draggable plug in of GreenSock. I have added the JS libraries in following order <script src="../../../js/jquery-1.10.1.min.js"></script> <script src="../../../js/jquery-ui.min.js"></script> <script src="../../../js/greensock/plugins/ThrowPropsPlugin.min.js"></script> <script src="../../../js/greensock/TweenMax.min.js"></script> <script src="../../../js/greensock/plugins/Draggable.min.js"></script> My HTML code structure is as follows: <div id="imageContainer"> <div class="galleryImg"></div> </div> I completely flush #imageContainer and add few elements, with class name galleryImg, to it dynamically. To make the imageContainer draggable I added following code in my JS Draggable.create("#imageContainer"); However, when I try to drag the element, an error is thrown and the element is not draggable. The error from FireBug is as follows: TypeError: i._gsTransform is undefined ...},this.content=o,this.element=t,this.enable()},H=function(i,n){t.call(this,i),i The error also occurs as soon as I click (mouseDownEvent) the imageContainer. Is there anything am I doing wrong over here ? Which JS files do I need to add to use Draggable? Where can I find standalone sample examples on how to use GreenSock plugins? (e.g. JQuery has this "View Source" link which can display full HTML to understand the whole example) Please guide.