PointC

I think the OP means that the some of the panels don't rotate correctly when you click the 'rotation x +45' or 'rotation x -45' buttons next to the cube. I didn't even realize those were buttons the first time I looked at the pen.

HI d11202 , I think the best practice would depend on what you're hoping to accomplish. If I'm understanding your question, I'd guess you'll want to set up some bounds for the draggable along with a snap array and maybe a hit test? Do you happen to have a CodePen available with your basic layout? That would definitely help everyone as they attempt to answer your questions. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ You've probably seen the draggable docs page, but just in case - lots of good reading here: http://greensock.com/docs/#/HTML5/Drag/Draggable/ Happy tweening.

Hi dwyermt , Welcome to the forums. I wasn't quite sure what you meant, but is this what you're looking to accomplish? http://codepen.io/PointC/pen/mVVBEo If that's what you need, you just have to put your SVG inside the box. Your SVG animation expands out of its viewBox so I had to set the overflow to visible otherwise it gets cut off a bit. If I misunderstood what you needed, could you please expand a bit on what you'd like to accomplish? Happy tweening.

That's too much for anyone to read.

Thanks for the extra info Blake. I couldn't ever get my demo to round incorrectly in FF or Chrome so I just assumed it was an IE issue. Math.round() fixed it in IE before I switched to this.x. (which works perfectly in all browsers)

oh - no question - this.x is better and certainly what I'll use. I'm just always finding new reasons to dislike IE. Thanks again.

Hey Diaco I need to get my brain started today. It makes much more sense to use this.x instead of position().left of the dragger and that definitely makes Internet Explorer behave. I'm still somewhat curious though - does IE just not calculate and round the left position correctly for some reason? Is x just more accurate? At any rate - thank you. You rock.

Hey all , I was doing a little experiment with Draggable and throwProps so the user could throw the draggable to a position and get a new panel from an info slider and I see a strange quirk in Internet Explorer. I'm using three snap positions [150,350,550] and then based on the index of the final snap position, I grab a new information panel to be shown, but IE sometimes ends on a number that is not in the snap array, but rather a lengthy decimal equivalent. I'll get 349.803101087 instead of 350. This results in my index query coming back as 0 so it flips back to panel 0. I see the problem and the fix is an easy Math.round(), but I found this odd and I'm curious if it was just Internet Explorer being its usual troublesome self or why exactly it won't consistently land on a whole number since it should be coming from the snap array. This is only happening in Explorer (FF and Chrome are fine) and not on every throw. I've put a console.log() in the code to show the final position so please watch that as you throw the draggable around. It might take a few attempts to produce the odd behavior. Again, easy fix - just more curious what causes it. Thanks.

I really shouldn't do any heavy thinking on a Monday. Regarding the OP's question. Isn't this a matter of the set() actually firing before his fromTo() ? Even though that set() is listed after the initial tween and you'd think it would overwrite the tween, the set() actually fires at time 0 and the fromTo() starts on the first tick of the timeline? I'm not sure if that is correct, but it seems similar to my post last week with the nested timelines that had a set() at time 0.

I see now - I didn't think one of my forum heroes would make a mistake like that. I'll just be over here in the corner getting through the rest of my Monday.

@Jonathan - the new CodePen link in your reply is still to the OP's pen with the undefined variable . Future readers: here's Jonathan's forked pen with the correct var. http://codepen.io/jonathan/pen/eJpwXq

Hi Fakebook , If you use TimelineMax instead of TimelineLite, you can use the repeat and repeatDelay shown below. More reading about TimelineMax: http://greensock.com/docs/#/HTML5/Animation/TimelineMax/ Check out Carl's position parameter demos too: http://greensock.com/position-parameter var tl = new TimelineMax({repeat:-1, repeatDelay:2}); tl.from(".left", 2, { left: 200, opacity: 0 }) .from(".right", 2, { bottom: 200, opacity: 0 },"+=2"); I hope this helps. Happy tweening.

Shaking My Head

Ha! I knew it! That's cool how you did that. I'm going to take a deeper look at your version and learn some new stuff. That's one of the things that's so great about this forum. You see so many different ways of getting to a similar result.

Hi again Juc1 , Oh... I didn't realize you wanted to target the SVG child element, I thought you were after the parent div so Diaco's advice is better than mine. As far as your new problem goes, you're seeing some scaling on the calculations because the original square is only 7x7 pixels. You have effectively scaled that up to 48x48 pixels by allowing the SVG to scale out to 100% width of it's parent container and the x and y values get scaled with it. So - you wanted 100px of movement on the x, but you're getting almost 700px of movement. (the square is almost 7 times as big as its initial value) A quick fix to this is change your SVG so that the original size of the square is 48x48: <div class="square"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve"> <rect x="0" y="0" class="st0" width="48" height="48"/> </svg> </div> If you change the original square size using the code above, I think you'll see the results you were expecting. You can definitely get some interesting results when you animate outside the bounds of the SVG viewBox with overflow:visible and no set size was given for the SVG. Hopefully this helps.

Hey again jellevrswk , I guess I was wrong. I thought Blake was going to post something. Anyway, I thought I'd take a shot at reducing your pen and save you from having to declare all those variables and duplicate tweens. By using a couple of jQuery arrays and each() on the buttons you can make it quite a bit shorter and simpler. I'm still learning quite a bit myself, but I thought maybe this would help you. The mods could probably tighten up the code even more, but this is what I came up with: http://codepen.io/PointC/pen/EPVXQa?editors=101 Hopefully, that helps a bit. Happy tweening.

PS - then when you bring them back, you'll have to tween to autoAlpha:1 otherwise they'll stay hidden. Simple answer - just change all opacity tweens to autoAlpha tweens. http://codepen.io/PointC/pen/VevWee Edit: That's the simple solution. I see Blake is viewing the topic now and I'm betting he's going to show a loop and array solution which will be much nicer.

Hi jellevrswk , This is just a stacking order problem of the squares in the SVG you're using since they all occupy the same space. You'll notice that the orangebox hover works correctly because it is in top. When you set the opacity of the other boxes to 0, they are still there (you just can't see them) so a hover won't work. Instead of tweening the opacity to 0, try tweening the autoAlpha to 0. When autoAlpha reaches 0, it will automatically set the visibility of the element to hidden as well as set it's opacity to 0. TweenLite.to([$orangeblock, $redblock, $blueblock, $greenblock], 0.3, { autoAlpha: 0, Change each of those opacity tweens to the code I'm showing above and it should work just fine. Happy tweening.

Hi Juc1 ; It's not working because you're targeting a CSS style for your tweens rather than the div containing your SVG. You currently have this in your CSS: .st0 { fill:#EC1751; position:relative; } and the variable is set to this: $square = $('.st0'); Just switch it to this: $square = $('.square'); Once you do that, everything works just fine. Happy tweening.

Haha! That's a fitting punishment. Trying any animation with CSS does make you truly appreciate the ease and elegance of GSAP. I think there are two types of people in this world. 1. Those who think CSS animations are a good thing 2. Those who have tried GreenSock.

Isn't that the truth. Last week, (for some strange reason) I tried a quick CSS opacity animation and then tried to add a couple more things which led to "Duh! I can't sequence these things!" Using any CSS animations now just makes me feel dirty and ashamed.

Hi Pete , That condition is just asking if there is something in your title to tween. !== // means not equal value or not equal type So, as long as there is something available, it will tween it. Here's some more reading on comparison operators. http://www.w3schools.com/js/js_comparisons.asp Happy tweening

Hey Everyone , Do yourself a favor and look at Blake's new speed and motion pen - absolutely amazing! @Blake - you probably don't want to self promote on the forum, but your new pen is one of the coolest demos I've seen in a long time so I'm doing this for you. So cool!

@Blake - From what I understand, the OP is trying set a local storage session variable so a return visitor doesn't have to sit through the entire timeline (23 pieces) when they revisit. He had the if/else in the the same function that created one of the nested timelines and that was causing problems, but now it looks like help is needed with what to show a return visitor. Since he's creating all the nested timelines in functions, he could then have a big timeline with nested 1-23 and a small one with nested 1-2. I suggested two master timelines for future flexibility. Maybe in the future there would be a need to change the mini (repeat visitor timeline) to nested 1,2, 7 and 23 etc...

Well - the correct return of the timeline in that function has stopped the error you were seeing. I didn't know there were additional objectives. So your master timeline has 23 timelines returned by functions and once the viewer has seen all 23 of them, they should only see 1 & 2? If you try to seek to a time of the master timeline, but you've made changes to any of the nested timelines, your seek to a specific time might not go to the right position. You could add labels to the master timeline and play to the label at the end of act2(), but since your secondary timeline only has two nested timelines I think if it were me, I'd set up a master time line and a mini timeline for easier management. Create two new function to create your master and mini timelines and just .add() all 23 acts to your master and then make a mini master timeline with acts 1 and 2. Then your if/else would look like this: function master() { if (sesSto1 == 1) { miniTimeline.play(); } else { masterTimeline.play(); } }