Sahil

You can access those values using _gsTransform. When you tween any elements, GSAP attaches _gsTransform to that element's DOM object. So you can access all the current values by using _gsTransform. For example, var elem = document.getElementById('box'); TweenMax.to(elem, 1, {xPercent: 100, onComplete: function(){ console.log(elem._gsTransform.xPercent); } }); Will return current xPercent for that element. It can be very useful to access values of elements so you can calculate anything you want. If you are using jQuery, var $elem = document.getElementById('box'); TweenMax.to($elem, 1, {xPercent: 100, onComplete: function(){ console.log($elem[0]._gsTransform.xPercent); } }); // Trying to access _gsTransform will return undefined because you are accessing them before GSAP attaches object to DOM console.log($elem[0]._gsTransform.xPercent); You will have to use index of that element to access DOM object. If you are using Draggable, Draggable.create(elem,{ onDrag: function(){ console.log(this.target._gsTransform.xPercent); } }); So basically you have to access DOM object to further access these values. You can investigate further by checking objects from developer tools and get idea about what values GSAP attaches to DOM object of each element it ever tweens/sets. NOTE: You can access these values whenever you want, except if you set 'to/from/fromTo' tween and try to access these values right away on next line, you will get undefined because you will be trying to access these values before GSAP could attach the object to DOM.

Thanks, I was using perspective on element rather than parent.

@Carl Can you post simple demo of just flip effect with GSAP? I tried using your snippet and tweaked perspective but I couldn't get it work either. And none of the pens you are suggesting use GSAP. I don't know if OP has same confusion, but just letting you know.

Can you tell us, what you are trying to do? So we can give you example with your own demo, it will be a lot easier for you to understand.

When you tween any elements, GSAP attaches _gsTransform to that element's DOM object. So you can access all the current values by using _gsTransform. For example, var elem = document.getElementById('box'); TweenMax.to(elem, 1, {xPercent: 100}); console.log(elem._gsTransform.xPercent); Will return current xPercent for that element. It can be very useful to access values of elements so you can calculate anything you want. If you are using jQuery, var $elem = document.getElementById('box'); TweenMax.to($elem, 1, {xPercent: 100}); console.log($elem[0]._gsTransform.xPercent); You will have to use index of that element to access DOM object. If you are using Draggable, Draggable.create(elem,{ onDrag: function(){ console.log(this.target._gsTransform.xPercent); } }); So basically you have to access DOM object to further access these values. You can investigate further by checking objects from developer tools and get idea about what values GSAP attaches to DOM object of each element it ever tweens/sets.

Ya tried hard refreshing, well the image is too big, it never really loads when your animation starts. Maybe optimizing images, delivering gzip compressed content etc will fix it. Or you will have to use some kind of loading screen. As for those icons appearing at random positions, set their position using css like normal website and animate them into view using classes so they won't contain inline styles for their x,y coordinates or use clearProps. That's all I can say, I haven't looked at the code but I think you should start over and plan few things before implementing. I would suggest to just design normal website without animation, keep it responsive etc and when site loads animate them into their positions. It will work, that's how I usually approach.

Well, I think you need to play a bit with easing effects so it will be little more exciting, at the moment everything is moving at same speed and bit too slow. When I first opened the link, background animation of door opening etc didn't show up but just tried in another browser while typing so must be my slow network. Overall it is cool, just easing effects will make it perfect. Just honest feedback, hope its not harsh in anyway.

Ya I used to use rotation only, then noticed someone using rotationZ explicitly, thought it is right way to do it.

Slightly improved answer by forking Shaun's pen and added rotation if you mean effect like this.

Not completely sure, but maybe you can try defining onComplete as external functions and call them. There maybe better answer, if so someone else will post it.

You can instead create your own question and refer this thread in it. I noticed 4 posts from you with similar question being posted on all old posts. Blake will reply you whenever he gets online and notices your question. So please just create your own thread.

@brentbuck1 Please post your question in the forums as new question to get the answer. If you want to save any older threads, just mark them as favorite so you can view them from your profile instead of posting same question on every old post.

No it was desktop application not silverlight.

I would like to add more in case it helps you. Few years ago I was working on WPF project which is heavy on resources. So if I ever use a objects with transparency or drop shadows, my application would flicker. At the time I was using AMD cpu which was basically main culprit. I have never used projector so not sure if that can be an issue but try using different PC with better hardware, it most probably will work.

Tried it in 1024x768 resolution, I don't notice any lines. My guess is hardware issue, have you tried it on different PC?

Ya I was messing with velocity but you saved me when you posted your demo. I don't know if you remember but more than a year ago I had contacted you saying I would like to learn from you, but after that I had been out of touch. Now I am getting back to it and have decided to learn it so I can do some fun stuff.

Thanks Blake that is perfect. I did manage to do what I wanted but you know I wanted to do more. So decided to use throwProps but it was headache as I had no experience with throwPropsPlugin. I learned a lot from your demos and thanks for new demo.

Well I gave up on using throwProps, I couldn't get slides to snap to original position. I haven't really used throwProps until today so I guess I will need to spend some time practicing it to really understand what is going on. I decided to just slide based on if user keeps dragging or cancels in the middle.

Hi, I have come far enough with what I wanted to do for carousal effect. Initially wasn't using throwProps plugin but I decided to use it. Following is the snippet that controls snap function snapX(x){ console.log(Math.round(x / boxWidth) * boxWidth); return Math.round(x / boxWidth) * boxWidth; } The issue is, on resize slides start snapping at wrong place. This is the first time I am using ThrowProps and snap. From what I have found so far, the snap doens't update on resize and it keeps referencing previous boxWidth. And once you drag it, then on second drag it starts referencing newly calculated value on resize. Steps to reproduce, Case 1: 1. Load page. 2. Drag slider. 3. Resize window. 4. Drag slider again and it won't snap normally. 5. Let slides auto slide. 6. Drag again and it will snap like normal. Case 2: 1. Reload page or let it snap normally. 2. Drag slider and let it slide normally. 3. Resize window. 4. Let it slide normally and it will slide as if nothing is wrong. 5. Now drag and it will snap incorrectly. 6. Now let it slide automatically. 7. Now drag again and you will see that it snaps correctly. Both of cases tell me that draggable only updates snap on dragging. Is it possible to update snap? Or any other solution that will just update Draggable instance so it will snap correctly?

Do you want to get progress of timeline? You can use 'tl.progress()' to get progress or same can be done with tweens.

Have you checked tutorial about GSAP timeline, I think it will help you.

Sorry but why does your blocks creepily crawl in middle like bugs? Is that intended behavior?

@timdt can you instead post drawings of what you are doing? I looked at your question yesterday it sounded very simple but when I looked at your pen you are using too many tweens for something that sounds very simple. I think you will get answer a lot quicker if you post mockups at different time frame.

Hi Blake, Finally I managed to do it. Answer was right in front of me, it is combination of both of your pens. This time my solution uses your magic methods but may not be as elegant as your coding methods. So on update I just updated xPercent and on release the slides animate based on modulus of percentage. You maybe wondering why I am avoiding using your original demo, well when I converted it into responsive slider it worked but on resize it would stay stuck based on boxWidth of previous window size and that method only uses easeNone so I was avoiding it in case I decide to use any other ease. Let me know what do you think. And thanks a lot for your help.

I will see if I can adapt it. When do you even sleep? You have been interacting with me all day as if you are living in India.