[Trying to get repeatDelay without it being applied to yoyo]

Perfect! Thanks for the quick answer, Carl. The second example is exactly what I'm after. I'd played around with timeline parameters too, but obviously not in that configuration 😅

[Trying to get repeatDelay without it being applied to yoyo]

I've got a super-simple staggered tween that increases the height of a sequence of lines:
 

let midPoint = 210;

gsap.to('.eq-line', { attr: { 'y1': (midPoint - 30), 'y2': (midPoint + 30) }, duration: 0.3, stagger: { from: 'start', each: 0.02, yoyo: true, repeat: -1, repeatDelay: 1 }, ease: 'sine.inOut' });

What I'm aiming for is for the lines to do a Mexican-wave style animation from left to right, then pause and start again: so each line would go up-down-pause. However, what's currently happening is it goes up-pause-down-pause, because of the yoyo. I totally get why: yoyo is reversing the tween, and the tween has a repeatDelay, so it's simply applying the same repeatDelay when it runs backwards. But this isn't what I want, and I'm sort of struggling to figure out a graceful way around it.

 

My 'best' idea is to just animate each line in a forEach loop and apply a regular delay of i * 0.02, but I feel like I'd just run into the same problem; plus I wanted it in a named timeline so I can control it from other areas of my code, and this method feels like it could get messy.

 

Is there a straightforward way to get what I'm after?

See the Pen JjzGgPz by indextwo (@indextwo) on CodePen

[Getting current rotation of object]

I knew there was a proper way to do it! And this is helpful for future reference.

I was using it in an onEvent callback just to see what the 'over' rotation was when I used an ease like back.out(1.7) - it was just a quick & dirty piece of code to see what that value was on the console before I deleted it.

(Also I'm positive I've used getProperty in other code before - it's just so long between gsap projects for me that I forget!)

[Getting current rotation of object]

For anyone finding this thread via Google (like I did): the GSAP 3 way to get the same property is to use _gsap rather than _gsTransform:

document.getElementById('my_element')._gsap.rotation

Note that this returns the CSS-transform style value, e.g. '45deg', so you'll want to either parseInt() or parseFloat() that if you want just the number.

There may well be a neater GSAP-utilities way to do it, but this was all I needed for a quick on-the-fly calculation.

[Getting responsive, zoomable, draggable SVG to move to a particular set of coordinates]

Hallo! So this is a minimal version of the thing I'm actually working on, but essentially it's a map of a campus. Dragging works great, and zooming works fine; but what I'm trying to achieve is, whenever you click on a 'building' (read: brightly-coloured block), it moves to the left side of the viewport, vertically centred. I'm using data-attributes on my buildings for this, and I thought I had it, but:

 

a) it doesn't account for different viewport sizes (so it's not vertically centred); and
2) once you zoom in, that positioning all goes out the window, and clicking on a building doesn't put it anywhere near the intended place.

I just realised I might be able to get away with resetting the zoom level to 1 whenever someone clicks on a building (maybe?), so at least the x co-ords would (probably?) still work; but the vertical centring is a bust no matter what.

Maths is not my strong suit, so any ideas on how to tackle this would be gratefully received 😬

See the Pen WNyvKvY by indextwo (@indextwo) on CodePen