sborrowman

Thanks! The only thing I'm still a little unsure about the rotation animation is the larger red circle that shows up for a bit. I like how it looks moving forwards but I don't like it moving backwards. For now, I need a break from the homepage and am going to start adding animations on some of the subpages hah.

Sorry about any confusion with my question. I wasn't quite sure how to explain what was happening hah. With the shortRotation, my animation is working exactly how I want it now. If you would like to check out what I'm working on and give me your opinion, you can find it here. http://axis41.dev.axis41.com/website-2012/templates/ I don't have any of the links to the sub pages hooked up but I've been working on all the animations for this homepage. It would have been such a pain to do without this plugin hah.

Son of a.... ok. I just noticed there is a shortRotation call that seems to fix the problem.

Here is a sample of the animation I'm working on. As you can see it works fine at first but once the rotation gets to about -190 it starts bouncing all over the place. If I console log the (rotation - 60) * -1 code I'm using for the rotation it seems to be giving me the exact values I want. Thanks for your help. And sorry for the slow timing of the animation. Normally it's hooked up to the mousescroll so it animates much faster. test.zip

I guess no one knows what could be causing this issue? Hah.

I'm trying to rotate a div along a timeline in increments of -5 degrees every time. It's working for the most part but it seems once it gets to about -190 the rotation goes to a bunch of random numbers. It is no longer doing increments of -5. My code is looking like this so far: buildLifecycleDots = function() { var addDot = '<div class="lifecycle-dot"><span class="small-circle" /><span class="large-circle" /></div>'; for (var i = 0; i < 72; i++) { rotation = rotation + 5; var addedDot = $(addDot).css({ WebkitTransform: 'rotate(' + rotation + 'deg)' }); $('#lifecycle-dots-wrapper').append(addedDot); t1.to($('.lifecycle-dot').eq(i), .01, {css:{opacity: 1}}); if (i < 12) { t2.append([ TweenMax.to($('.lifecycle-dot').eq(i).find('.small-circle'), .01, {css:{backgroundColor: '#F83732'}}), TweenMax.to($('.lifecycle-dot').eq(i).find('.small-circle'), .01, {css:{scale: 1.8}}), TweenMax.to($('.lifecycle-dot').eq(i-1).find('.small-circle'), .01, {css:{scale: 1}, delay: .4}) ]); } else if ( i >= 12) { t2.append([ TweenMax.to($('#content-lifecycle-background'), .65, {css:{rotation: (rotation - 60) * -1}}), TweenMax.to($('.lifecycle-dot').eq(i).find('.small-circle'), .01, {css:{backgroundColor: '#F83732', scale: 1.8}}), TweenMax.to($('.lifecycle-dot').eq(i-1).find('.small-circle'), .01, {css:{scale: 1}}), TweenMax.to($('.lifecycle-dot').eq(i).find('.large-circle'), .01, {css:{opacity: 1}}), TweenMax.to($('.lifecycle-dot').eq(i-1).find('.large-circle'), .01, {css:{opacity: 0}}) ]); } } } Which I'm hoping to clean up a little bit. I couldn't find another way to have the -rotation start on the 12th rendition of the timeline but still be part of the main timeline with everything else. I also couldn't find a better way to have the small and large circles do their animation one at a time but go back to their original state on the next timeline other that using the .eq(i-1). That seems to work ok but it's a little buggy. At any rate, back to my main question, when I console log the (rotation - 60) * -1 it seems to give me the values I want from 0 to -295 but once it gets to -190 it doesn't look like it's following the same increment. Is there an issue with using the rotation like this?

Actually, I already have another question. Is there a way to keep track of which index of the timeline is currently playing?

What I ended up doing is changing my function a bit. I was trying to create and remove the divs as your scrolled forwards and backwards, now I'm changing the opacity of them. lifecycleDots = function() { var addDot = '<div class="lifecycle-dot"><span></span></div>'; for (var i = 0; i < 72; i++) { rotation = rotation + 5; var addedDot = $(addDot).css({ WebkitTransform: 'rotate(' + rotation + 'deg)' }); $('#lifecycle-dots-wrapper').append(addedDot); t1.to($('.lifecycle-dot:eq('+i+')'), .01, {css:{opacity: 1}}) } } This way I have all 72 dots on the page but with css I put the opacity at 0. It also adds all 72 dots into a long timeline without having to repeat the code over and over. It works exactly how I need going forwards and backwards. Of course the next part of the animation I need might be a little more complicated. Hah!

I think I was over complicating my animation. The reason I needed it to run 72 times is because I was creating a circle of dots. There are 72 dots in the full circle. I was trying to animate the function that was creating the dots but then I realized it is much easier to just create them all at once and put them at 0 opacity. Now I can run a function that counts up the index of my dots and fades the opacity in on a timeline that counts up with the index.. This seems to take care of all the problems I had and makes my code much simpler. Thanks for your help. I'm sure I will be back on these forums again when I'm stuck on something else!

That seems to do the trick! Thanks a lot! Though, I still have another issue that I need to figure out. Because I'm running the animation through an object instead of actually tweening something, I need someway to make sure that it runs through the object the exact number of times that I need it to instead of it just running through the time amount I have set. Right now I have the code set like this. tl.to(obj, 1, {lifecycleDots: 300, onUpdate: function() { var currentProgress = tl.progress(); if (currentProgress > progress) { scrollDirection = 'down' } else { scrollDirection = 'up' } progress = tl.progress(); }}) I'm actually not entirely sure what the 300 number is doing but I need a number there for it to work. What I need though, is this will run a total of 72 times for the whole animation and I need it to always reserve the exact same number of times. Meaning, if you stop scrolling and it only runs 20 times I need it to reverse exactly 20 times before the previous animation runs if you scroll upwards or continue from 20 and got 52 more times until the next animation runs.

I would still need to detect which direction the animation is going. Since I need it to do something different if it's going backwards.

I'm running an animation that creates a div with a span in it that clones it and moves it 5 degrees to the right every time it fires while scroll down. Then removes them one at a time while scrolling up. The problem is, right now I'm just detecting which direction you are scrolling on the mouse which causes a few issues. What I want to do is change it so it creates while the animation is moving forward and removes while the animation is moving backwards. I'm hoping that I can some how do an onUpdate check that tells what direction the animation is moving and I would think that is built in since you can check the onreverseComplete. Any help would be appreciated. This is how my code is so far: $(window).bind('mousewheel', function(event) { if (event.originalEvent.wheelDelta >= 0) { scrollDirection = 'up' } else { scrollDirection = 'down' } }); obj.lifecycleDots = function() { var addDot = '<div class="lifecycle-dot"><span></span></div>'; if (scrollDirection == 'up') { rotation = rotation + -5; $('.lifecycle-dot').last().remove(); } else if (scrollDirection == 'down') { if ( $('.lifecycle-dot').length < 72) { rotation = rotation + 5; var addedDot = $(addDot).css({ WebkitTransform: 'rotate(' + rotation + 'deg)' }); $('#content-lifecycle-button').append(addedDot); } } } I should also mention that I am using the superscrollorama plugin with this as well..

Thanks for taking the time to look at them. I'm pretty comfortable using the greensock plugin now but this bezier stuff has me stumped. I will try the thru feature and see if I can get it working the way I need.

Honestly, it doesn't really matter to me if there isn't a tool that does what I need. I'm just not really sure how to even figured out what I need. I'm attaching a couple images of what I'm trying to accomplish, hopefully that will be better than me trying to explain. The hard part with the spiral.jpg is getting all those icons to start at the same point and animate around in a curve ending like this image. Plus getting the last few to scatter away from the path. Other than just entering a bunch of random numbers for my x and y coordinates, I'm unsure of how I figure out the points I need. The circle.jpg, those dots wont be visible at first and I need them to fade in one at a time around that circle. Then I need them to change red in order while the whole outer ring spins. The red dot with the ring around it will essentially stay in the same place while the outer ring spins, making more of the dots red behind it. I am honestly just completely lost on how to even start trying to do either of these animations.

I need to create a couple bezier tweens and am having a bit of trouble figuring out how to get started. I apologize in advance if I am unable to explain what I am trying to do, I'm still confused on what I'm trying to do. I need to create a bezier that spirals outward in a circle from a starting center point and one that is a full circle. I'm not quite sure how to go about figuring out the x and y values I need to accomplish this so I am hoping there is some type of math equation to follow allowing me to achieve this effect. If not, any suggestions on how I would go about doing this? The spiral tween I also need to animation a few dozen objects along this path but only one of them will make it to the end. The rest I need to stop inline behind it, kind of like a train. Do I need to make separate bezier tweens for each item or can I have one path and have the different objects stop at specific points? The full circle tween I'm not sure how to explain what I need. First I need it to animate a bunch of dots along the circle so it ends up as a circle of dots. Then I need to be able to change the color of the dots in order while keeping track of the index of each dot. Does the bezier tween have an onUpdate function that I could use to keep track of the index? I hope this explanation makes sense. I'm just unsure on how to even get started with these animations. Thanks for you time.

I wanted an ease that starts slow with a back, then speeds up until the end when it slows down again. I couldn't find a way to get it to work the way I wanted with just easing so I ended up running a timeline that separates it into two different animations that I can have different eases on.

Thanks for the reply. I think I will just keep it how it is because I'm not sure what I am trying to do will work the way I want. I only wanted to clean it up because the code I gave in my first post was just the testing part and I have a lot more going on now so I wanted to use as few lines of code as possible. I do however, have a different question. The flash guys at my work use this plugin all the time and tell me there is a custom ease addition. Is that available in the JS version?

Thanks for the reply. I realize now that I may not have explained what I'm trying to do very well. I don't want to tween both left and right position on the object. What I want to do is set up a variable that I can use for both properties on one line of code. So the idea would be something like: var = timelines = [t1, t2], position = [left, right]; $('#curtains-' + 'position').find('.curtains').each(function(idx) { var offset = offsets[clickedIndex][idx] + 'px'; timelines.to( $(this), .5, { css:{position: offset}, ease:Back.easeOut, delay: -.4 } ); }); That way I can target the two different divs and timelines that I have with one animation call instead of two. I still need it to be two separate timelines, one that targets the left and one that targets the right..

I have an animation running, and it's working just fine, but I want to clean up the code a little bit. I'm making a set of curtains that slide open a certain distance depending on what button you click. The issue I'm having is that half of them move left and half move right, so right now I have two timelines running. I want to be able to condense it into one timeline and set both the left postion for the left curtains and the right position for the right curtains at the same time. Any suggestions on how to go about doing this would be much appreciated. Here is my code that I have working right now. $('#curtains-nav-wrapper').find('a').on('click', function(e) { e.preventDefault(); var t1 = new TimelineLite(), t2 = new TimelineLite(), clickedIndex = $(this).index(), offsets = [ [ 61, 40, 24, 0, -15 ], [ 51, 35, 20, -5, -18 ], [ 41, 30, 16, -8, -20 ], [ 31, 16, 0, -11, -22 ] ]; $('#curtains-left').find('.curtains').each(function(idx) { var offset = offsets[clickedIndex][idx] + 'px'; t1.to( $(this), .5, { css:{left: offset}, ease:Back.easeOut, delay: -.4 } ); }); $('#curtains-right').find('.curtains').each(function(idx) { var offset = offsets[clickedIndex][idx] + 'px'; t2.to( $(this), .5, { css:{right: offset}, ease:Back.easeOut, delay: -.4 } ); }); });