Leaderboard

This uses 3 different canvases. The top canvas is for the circles. The middle canvas if where you draw the lines. When the coordinates change, the middle canvas is drawn on the bottom canvas before being cleared.

You can get the element in the callback using this.target. Note that arrow functions aren't scoped, so you would need to use a regular function. // BAD onComplete: () => { console.log(this.target) } // GOOD onComplete: function() { console.log(this.target) } If you need the index, you can create the stagger in a loop. That's all GSAP is doing.

Hi @denken Your lines are jagged because you're drawing over the same parts. You need to change the moveTo coordinates after each update. You should also be careful when using setTimeout/setInterval with animations. Those functions will continue to fire if the user changes tabs, and can mess your animations up if left running. You can use TweenLite.delayedCall() or a repeating tween instead. // like setInterval TweenMax.to({}, 1, { repeat: -1, onRepeat: myCallback }); // like setTimeout const timer = TweenLite.delayedCall(1, myCallback); // you can restart it if you want timer.restart(true);

Hi @therddlr, A CodePen, which clarifies your structure, would be - as always - very helpful. If every staggered object is affected, then cycle (used in a second tween, positioned as you want) offers itself: Best regards Mikel

Hi @namisuki I added an info panel to your demo so you can see what's going. It makes debugging a lot easier. Before getting to the switching of the timeline part, there are some issues/questions you should look at first. Your check for the collision will never be true. It's a pixel short because of the border. Notice in my code how I'm adding 151 instead of 150. Are the animation/timeline changes supposed to happen only once, or every time the scroll position passes a certain break point? For example, if the second timeline is playing, and you scroll up, should it switch back to the first timeline? If so, rotating the building will cause the building's left positional value to change, which might mess stuff up. And what progress value are you going to feed to the second timeline? You can see that the window scroll value goes above 1 after the boxes are colliding. Progress should be a value from 0 to 1.

A better version. Uses the BezierPlugin for more natural looking movement. Best viewed on CodePen. The embedded pen isn't large enough to see.

@mikel's got the right idea. There's no rule that says you have to use same element. Check out how I'm using 3 different elements to pull off a full screen animation here. A "from" element, a "to" element, and a clone to animate between the two elements. Another option is to reparent your element. The transition is completely seamless.

@mikel That's a great, concise example and I learned quite a lot from it. Thank you. @OSUblake Wow thanks for the different examples. That Bezier example is impressive. Really big thanks for your help.

Hi @rflc, How about this version - calculate the necessary data: Tip: autoAlpha Best regards Mikel

@PointC Very Thanx ? but great @Sahil, a prodigy of the GSAP, has no way of competing with him. Especially when typing like this (me in case):

I would love to do that. First lesson. SVG is not magic. Under the hood, the browser renders SVGs using canvas drawing commands. ? Viewing the Layers panel in Chrome's dev tools. It's not same as HTML5 canvas, but the API is really close.

Haha, that's me looking for the missing comma, lol!

Maybe you're doing it wrong. Step 1: Draw something. DO NOT do something like Outline Stroke or Offset Path. If you need to change the stroke's appearance, click on the Stroke options next to the stroke color box. It's also at the top-left part of the screen. Step 2: Copy and paste path into CodePen. Step 3: Animate.

RESPONSE: "Can you post a reduced test case showing the problem?" That reminds me of this. Programming involves staring at code for countless hours.

Yeah - great job @Noturnoo. It's good to see you jumping into the forum more. Getting to 1,000 likes is tough when you're up against @Sahil. You'll have to type really fast to beat him. I'm not sure, but I'm guessing he types about this fast when he sees a new question on the forum.

That's not exactly a trivial task, but here's my crack at it: I built it out with ratios and variables to make it easier to port to whatever you're doing "for real". Does that help?

Good info, thanks Jonathan. UPDATE: Here's the same pen using the Attr plugin - works in all browsers! Yay! http://codepen.io/kgrote/pen/mPxzZY

Hello kgrote, do you have a live codepen example? From what I see css clip-path is not supported yet in MS Edge. http://caniuse.com/#search=clipPath Also make sure your SVG clipPath element is not wrapped in a SVG <defs> element. If so animating the transform attribute won't work since elements within a <defs> element are not directly rendered with CSS. So you would have to animate the svg <clipPath> attributes instead. For example using the GSAP AttrPlugin by wrapping your vars properties in your tweens with attr:{} http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/ And here is animating an SVG element that uses a svg <clipPath> via a CSS clip-path URL identifier with GSAP: http://codepen.io/jonathan/pen/LpVrPL