Sahil

Ya you are using incorrect syntax. Cycle is part of regular properties. Here is introductory tutorial by GreenSock to get started quickly but going through docs will be good idea.

I guess DrawSVGPlugin only draws stroke, I have reduced your demo to single path and added stroke to it, it works.

Oh just realized that it doesn't snap with mouse on second drag, I never tested second drag.

Here is something I came up with, so if you rotate back multiple times. It will snap back on very first rotation in clockwise direction. I don't know if it has functional value though, because any functional calculation on lastRotation will get messed up but I guess it can be fixed by keeping track of difference I guess?

Here is simple demo of what I am talking about. You can see that how the pen is responsive and I am using classes to animate those divs into place. But this is not the exact solution, it is just simple demo of how something can be done. It really depends on how you want to do it and boils down to your CSS skills. But this demo should give idea about how you should approach this whole page.

Ya now images show up and overall animation is better paced. But the icons are still misplaced, and if you resize screen they go out of their places. And not just icons but the text at the bottom shows up at different positions on different monitors. It shows up correctly on FULL HD but on HD it is messed up. I would still suggest you same as my previous comment, you should just position everything with normal CSS. Once you make sure everything is responsive, I mean the main content that animates into view. Then write javascript and just animate them into view using classes or using from tweens with clearProps.

Here is updated pen, you can see that GSAP tweens left and you can retrieve value using element.style.left. Like everybody else pointed out, you are most probably doing something wrong with original problem. This should resolve it.

@Svein-Tore these guys are right, I mislead this thread, sorry about that. Post a demo and you will get the answer.

@PointC Was about to try to do that in next reply but got messed up with unnecessary multiple timelines.

Ohk I didn't read it properly. It happens because you are animating from original position to this first position and then further. So timeline will repeat from the original position as well. I have updated my pen and instead of first animation I am setting value to start position.

Ya I was just writing further on that. Basically _gsTransform stores values of transformation. So basically you should stick to using x and y instead of using left or top. @Carl Can further explain why using left or top doesn't attach _gsTransform values. Ya from what I gather from this pen they are different but you will be better using x and y instead of top or left. It is basically doing same thing plus typing few letters less.

Well using x is same as left, it is just that key for left value in _gsTransform object is set to x. So if you want to access left value for element you can use x for it. Following is recent thread where you might get more insight on _gsTransform.

You need to set yoyo property to true. var box = document.querySelector('.box'); var timeline = new TimelineMax({repeat: -1, yoyo: true}); timeline.add(TweenMax.to(box, 1, {x: 50, y: 50})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 100}));

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.