cezaleo

Rodrigo, Sorry for the delay. Thanks for this, pretty awesome! I'll try to implement, and show you how it worked out once this project goes live!

I have a question regarding this topic. What if I had a codepen pretty similar to this, except with more labels: http://codepen.io/ccelestine/pen/NqJQaX?editors=001 Is it possible to tweenFromTo("STEP 1", "STEP3") , but skip STEP2?

Adjusted the css and now it's back to working.

If you view the codepen, I'm seeing completely different behavior across chrome and firefox. Specifically in chrome, the last portion of the image is coming in all out of wack. But in firefox it's better. Is there something I could do myself to avoid this?

Based on your example, and what I think you're trying to do, I would change the scale on your doIt3, and doIt4 functions to this function doIt3() { init(); centerX = (useCenter ? (containerW - blocW * scale/2) / 2 : 0); centerY = (useCenter ? (containerH - blocH * scale/2) / 2 : 0); TweenLite.to(bloc, 1, {rotation:0, x:centerX, y:centerY, scale:scale, transformOrigin:"50% 50%", onComplete:function() {logResult()}}); } Hopefully that helps you get closer to what you're trying to do.

I wouldn't say there's a bug, but if you want to make this behave more uniformly, I would adjust this: transformOrigin: "right center", to transformOrigin: "center center", I'm not sure why it's happening that way.

I run into this problem with every site I build. You have the dilemma of how awesome gsap is and then the fact that 10% of the US still uses IE8. So you have to degrade gracefully... I always build a super wizbang version of my animations with rotations and opacity, just to run in to the black line of death on all my pngs that are whizzing around the dom in IE8. In my javascript I use an if else like this: if (!!document.createElement('canvas').getContext && !!document.createElement('canvas').getContext('2d')) { //TIMELINES FOR MODERN BROWSERS else{ //TIMELINES FOR IE 8 } Then I use some scaled back version of my animations, or sometimes just dont provide an animation at all for ie8. It's a trade off you have to learn to live with until this browser eventually dies off... Hopefully this will get you over the hump.

Hello bfred, You could replace this line: main.add(timelineB(),'labelFromTimelineA'); With: main.add(timelineB(),'labelFromTimelineA-=1'); You can also use console.log(tl._totalDuration) to figure at which point in the time you should add your B animation

Fun image slider. http://codepen.io/ccelestine/pen/Cjukm Enjoy.

Hey could you provide a codepen? I'd like to see how this turned out.

Would it be possible to edit the png and put them all on one row?

something like this? http://codepen.io/ccelestine/pen/wdfEt

@jamiejefferson Your swinging sign script is pretty awesome, I've forked it more than a few times playing with ideas. You know that springy thing on the back of the door: http://codepen.io/ccelestine/pen/dtKJA

So, I was playing around with the splitText demo, and was wondering how or if I could animate individual letters as someone types them into an input box. This is really a crappy codepen, but you should be able to see the direction i'm trying to go in. http://codepen.io/ccelestine/pen/CdieB It's sort of working the way I want, but the whole word is animating. Do you think this would be possible with a bit more work? Thanks, C

I was playing around with a pen that animates old school 8bit sprites. Like your typical little italian guy's walk cycle. http://codepen.io/ccelestine/pen/wdfEt

I have two timelines.. tl1, tl2 for demonstration purposes. tl1 starts when the dom is ready. tl2 starts via button click. There is another button that reverses everything to where tl1 starts. The problem I have is that if the button that starts tl2 is clicked before tl1 is finished, then someone clicks the button that reverses the timelines to the start of tl1, then tl1 is reversed to the point where the interruption happened. How can I tell the button that reverses everything back to tl1 to go all the way back to zero?

I have an IE8 alpha issue with an animation I'm working on. So I wanted to use killTweensOf() similiarly to how the doc's recommended to use it: TweenMax.killTweensOf(myObject, {opacity:true, x:true}); my code: tl_demo = new TimelineMax({paused: true}); tl_demo.to( $(".demo"), 1, { alpha:1, ease:Power2.easeOut }) .from( $(".demo"), 1.2, { left:"300px", ease:Power2.easeInOut}); var el = document.createElement('canvas'); if (el.getContext && el.getContext('2d')) { TimelineMax.killTweensOf(tl_demo, {opacity:true); } Im using the latest version of gsap, but I haven't been successful at killing the opacity tween part of my animation. However, TweenMax.killTweensOf($(".demo")); works fine. Any help?

That actually does make sense. After playing with the animation some more, i figured that the label is where the animation ends. So my default state of label1 is set within the css, and not by setting label1 with what I want the default state to be. Maybe I shoulda read the manual... Thanks for the time, If you're ever in New Orleans, beer on me!

Hey Carl, I'm still having a few issues with my animation. It seems as though when I click my button to "tweenTo label2" It just sets the tween at "label1". Like wise when I click my button to "tweenTo label3" It performs as the label2 button should. I'm confused. At this point my code looks like: Any ideas? benefitsTl = new TimelineMax({paused:true}); benefitsTl.to($(".benefit-scroll"), 1, {top:0}, "label1") .to($(".floater"), 1, {css:{backgroundPosition: "150px 0px"}}, "label1") .to($(".benefit-scroll"), 1, {top:-500}, "label2") .to($(".floater"), .6, {css:{backgroundPosition: "150px -500px"}},"label2") .to($(".benefit-scroll"), 1, {top:-960}, "label3") .to($(".floater"), 1, {css:{backgroundPosition: "150px -600px"}}, "label3"); $(".security").click(function(e){ e.preventDefault(); benefitsTl.tweenTo("label1"); }); $(".emanagement").click(function(e){ e.preventDefault(); benefitsTl.tweenTo("label2"); }); $(".convenience").click(function(e){ e.preventDefault(); benefitsTl.tweenTo("label3"); });

Thanks Carl, That answered my question exactly. Sorry for the confusing question. I assumed if animations had the same label they would cancel eachother out. oh well!

Hey Rodrigo, thanks for replying. I'll try using the call back. But my original question was about the code I posted above, in which the first part of the timeline would play and then the second part. So if I tweeTo label 2, the top will animate and then the background position after it has complete. How can I have both of those happen at the same time. and then pause?

I have a question that's similar to this post. I want to use a button to play 2 animations simultaneously to a label then stop. This is probably more of a syntax question. How would I get my example to work? beneftisContent = new TimelineMax({paused:true}); beneftisContent.to($(".benefit-scroll"), 1, {top:0}, "label1") .to($(".floater"), 1, {css:{backgroundPosition: "150px 0px"}}, 0) .add(pause) .to($(".benefit-scroll"), 1, {top:-480}, "label2") .to($(".floater"), 1, {css:{backgroundPosition: "150px -400px"}}, 0) .add(pause) .to($(".benefit-scroll"), 1, {top:-960}, "label3") .to($(".floater"), 1, {css:{backgroundPosition: "150px -600px"}}, 0); function pause(){ beneftisContent.pause(); } $("a.security").click(function(){ beneftisContent.tweenTo("label1"); }) $("a.e-managment").click(function(){ beneftisContent.tweenTo("label2"); }) $("a.convenience").click(function(){ beneftisContent.tweenTo("label3"); }) Thanks

I really like this approach for a site Im working on, would this technique work inside of a 960px grid? Or is this site basically all position fixed? I've seen a few instances of the custom scroll bar lately specifically this site:http://www.jana-water.com/en/about-you I'm trying to create something like the pregnancy section of that page. Do you think I could pull it off if I work from your example?