gstout

I was able to fix the "all on" at the start problem by switching my message tween to "to" instead of "fromTo", so this var message1off = TweenMax.fromTo(".message1", duration*.25, {opacity:1}, {opacity:0}); became this var message1off = TweenMax.to(".message1", duration*.25, {opacity:0}); Hurray! I'm almost certain that the flicker only takes place when we use your clever jump to maintain the rotation motion. I don't see why it does not render the var message4off = TweenMax.to(".message4", duration*.25, {opacity:0}); which I attached here. timeline.add(message4off, 1.75) Seems like it should. One last thing, you added the below before, Can you explain how this works? What you mean by Global Empty? //global empty tween to control timeline var timelineTween = TweenLite.to({}, 0, {})

Carl, I'm hoping you can take a look at this evolution of our last version. Now in the center I have a box that synchs up with the selected.button. Again though I think I'm approach this the wrong way. I created a messageOn and messageOff tween for each box and positioned them just before and at the animation stop points. There are now many adds now to the time line. You can see, at the start of the animation, for some reason they are all opacity 1. If you run that animation, by clicking on a few boxes, you'll see it self corrects. I have no idea why this happens. You may also notice there is a small jump when rotating to the first item. I'm lost there too. I'd really appreciate your input. First and for most I'd like this to work as you would expect. <-- you can stop here and give up on me if you want. Secondly and more ambitiously, I'd love to understand how to make this start in a running mode. What i mean is have it self animate every so many second to the next item unless someone interacts with it. I know the answer exists in multiple timeline controlling the animations like you have done for the endless loop but I just don't quite get where to begin. Any advice or help you can provide is very appreciated. http://codepen.io/gstout/pen/gbNovB

Thank you so much for this proof of concept! I had so many ah-ha moments while looking at your solution, I almost ran out of air in my office. I'm very excited to see that what I wanted to create is possible, and whats more, the other tools in GSAP are inspiring me to conceptualize my site is a ways I had not even dreamed. Thank you for your quick response. It made me certain GSAP was the right choice and I've signed up for a membership to help support your work. All the best, Greg

Hi all, I discovered GSAP over the weekend while trying to complete an animation project. It's supper impressive. I've read the docs over and over and over but I just think I'm missing something or I'm approaching the problem the wrong way. My goal is to create a rotating Nav. Four block arranged in a circle. Click on a block and they all rotate left until clicked box is at the top. Conceptually simple and I found a nice tutorial on the circle animation in an old forum post for an AS3 code chunk. So I've created my bezier path and I've create a separate tween for each "button". I use a TweenMax.fromTo progress chunks to offset each button around the curve in my timeline. I've added Labels at each quarter. I just can't figure out how to control the click events on the objects so that the rotate from one label to another correctly. I tried creating a secondary timeline with tweenFromTo chunks to control the first and that failed. I'm just not sure If I've approached this the right way. PS. Also you may see that occasionally one of my object will break off from the Bezier and jump to 0,0. If i look at the values being added in the browser(chrome) I see that the other buttons have a 3D transform on them but the broken one has a transform: matrix(1, 0, 0, 1, 0, 0);. What did I do wrong? I appreciate any advise you can provide. A few days Ago I didn't think I'd be able to do this at all. Today I feel like I'm on the edge of success thanks to GSAP. Greg