Sites Built Fast

Struggling to figure out how to accomplish this in GSAP: <svg id="cubes" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100"> <g class="group-1"> <rect x="15" y="15" width="10" height="10"/> <rect x="35" y="15" width="10" height="10"/> <rect x="15" y="35" width="10" height="10"/> <rect x="35" y="35" width="10" height="10"/> </g> <g class="group-2"> <rect x="55" y="15" width="10" height="10"/> <rect x="75" y="15" width="10" height="10"/> <rect x="55" y="35" width="10" height="10"/> <rect x="75" y="35" width="10" height="10"/> </g> <g class="group-3"> <rect x="15" y="55" width="10" height="10"/> <rect x="35" y="55" width="10" height="10"/> <rect x="15" y="75" width="10" height="10"/> <rect x="35" y="75" width="10" height="10"/> </g> <g class="group-4"> <rect x="55" y="55" width="10" height="10"/> <rect x="75" y="55" width="10" height="10"/> <rect x="55" y="75" width="10" height="10"/> <rect x="75" y="75" width="10" height="10"/> </g> </svg> const group1 = document.querySelector('#cubes .group-1'); group1.style.transformBox = 'fill-box'; group1.style.transformOrigin = '50% 50%'; group1.style.transformStyle = 'preserve-3d'; let rot = 0; setInterval(() => { if (rot++ > 360) rot = 0; group1.style.transform = `rotateY(${rot}deg)`; }, 10); Tried as follows: gsap.set('#cubes .group-1', { transformBox: 'fill-box', transformOrigin: '50% 50%', transformStyle: 'preserve-3d', }); gsap.to('#cubes .group-1', { duration: 3.6, repeat: -1, rotationY: 360 }); The following attributes are applied to#cubes .group-1 but no animation occurs: <g class="group-1" data-svg-origin="30 30" transform="matrix(1,0,0,1,0,0)" style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px; transform-style: preserve-3d; transform-box: fill-box;"> As I understand it, GSAP is supposed to be applying some matrix magic under the hood, but that magic does not appear to be working for me.

That explains so much. Thank you!!

So I'm trying to animate all h1 elements on a page using ScrollTrigger, but running into an issue with the trigger property. Perhaps I am going about this all wrong, but my first attempt before RTFM was based on the knowledge that I can do this: gsap.to(gsap.utils.toArray('h1'), { ... backgroundColor: (index, element, elements) => (0 === index % 2 ? 'black' : 'white') ... }); I simply tried to do the same with the trigger property by using a function like so: gsap.to(gsap.utils.toArray('h1'), { ... scrollTrigger: { trigger: (index, element, elements) => elm } ... }); Alas, I cannot, because the only arguments passed to the trigger function seems to be an instance of ScrollTrigger itself. How does one go about specifying the current element as the trigger when using ScrollTrigger on an array?

Gosh, sometimes I really think I need better glasses. You are a lifesaver. Thank you, Mikel! So for future reference, to control a repeating animation with ScrollTrigger, use toggleActions. ?

I've searched through the forms and can't seem to find this documented anywhere. I have figured out how to use ScrollTrigger to play a timeline only once "start" point has been reached, however I also need to be able to pause the (infinite repeating + yoyo) timeline once the "end" point has been reached. I attempted to recreate a simple demo in Codepen, however for some reason the "start" and "end" points are way off (you will notice that the ScrollTrigger target is #div2, with start "top top" and end "bottom top", however, the start point appears at #div1 top and endpoint at #div2 bottom). I'm not sure what's going on there. Please help!

One more question: is there any way to switch the Morph Type for this tool?

Thank you, Zach! That did the trick! If I could make one suggestion, though: add high z-index at line 69. At first, I thought this version was broken also because I could not click on it. I fixed by adding this.

Hi all, We just became ShockinglyGreen, and we're trying to use the findShapeIndex() tool to fine tune an implementation of MorphSVGPlugin, but we're not having any luck due to the following error: Uncaught TypeError: TweenLite.selector is not a function at findShapeIndex (findShapeIndex.js:143) Update 1 Attempting to hack my way through this, I tried: window.TweenLite = window.gsap; TweenLite.selector = function(element) { return element; }; findShapeIndex(document.getElementById('#shape1'), document.getElementById('#shape2')); But now I get the following error: Uncaught TypeError: MorphSVGPlugin.pathDataToRawBezier is not a function at findShapeIndex (findShapeIndex.js:150) It seems like the findShapeIndex tool has not been updated for the latest version(s) of GSAP. Does anyone have an updated version?