foundartfactory

Thanks @PointC & @Rodrigo for your super fast insights -- this.x - this.startX it is! Dragging aweigh ?, Patrick

Hi Craig! ? Thanks for that -- I have no issue getting the current x value, a la scScrubDragger.deltaX: ${this.x} ...But what I'd like is the amount that the Draggable instance has moved since it started being dragged. Here's what the Greensock help doc says for .deltaX: Is this value since the drag began (ie, an aggregate or sum total), or is it a value gotten at some certain interval along the way (which would explain the tiny numbers)? Should I just roll my own usingthis.x and check that against the starting position x of the dragging? Thanks! Patrick

Howdy Folks! I have a draggable instance that's type: x, got its bounds set, and I want to track how far it's moved along its track. I'm already tracking its position successfully as a percentage and figured I could use the Draggable.deltaX to see *how far* it's moved since being dragged. I'm getting some really low numbers. Are these how far it's moved since the last check, or since it started being dragged? See the round circle at bottom to drag in the 'pen, and check console. Thanks for any insight as to what I'm missing/misunderstanding!

I wasn't sure where to post this, but it was neat to come across this old project of mine. Wish I could just drop the files on some plugin somewhere and have it all transliterated to something more useful Looks like it was using TweenLite 7.03, 07/2008! Fun! Patrick

AHA, thanks! Makes total sense, and thanks for running through that. I broke it out like you suggested and set the width & height in their own call, before setting the offsets etc. Works as expected, now! The pen reflects the changes. Noted re: conflicting animations, and setting timeline defaults! Apologies for the messy code. Thanks again, Jack!

Howdy folks! I've run into an issue with rotating some SVG rects around an arbitrary transformOrigin, using gsap.set and then gasp.to. I've had great success in other projects, but I'm scratching my head on this one. It's gotta be some typo of mine, I'm guessing. Once the page loads, you can click on it; Some rects get created and placed, and then animated -- rotation around arbitrary transformOrigin. Various approaches work, most don't on a per-rect basis. The only time I get the expected rotation is when I use a classname a la gsap.set(".firstRectShot", { transformOrigin: "50% 90%" });, rather than say gsap.set(`.${rectID}`, { transformOrigin: "50% 90%" }); . If I use standard setAttribute lingo, then hilarity ensues when gsap picks up the animation (svgOrigin is set to the percentages, and everything rotates around that point, rather than at that point on themselves) Here's the pertinent code below (starting around line 125 in CodePen example), which sets up the rects, then calls a function that displays the rects, which then calls the animation. Ideas? I'm sure it's so obvious I'm missing it! Thanks! Patrick function makeNewScattershot() { // DEFINE RANGES FOR HSL, type of shape, size(s), etc const someDot = { name: "firstRectShot", shape: "rect", w: 60, h: 95, x: 0, y: 0, jitterXY: [-2, 2, false], jitterOrigin: [45, 60, true], jitterRotation: [-30, 30, true], fillHue: [90, 120, true], fillSat: [50, 70, true], fillLight: [50, 80, true], fillOpacity: [0.035, 0.085, false], strokeHue: [58, 62, true], strokeSat: [80, 95, true], strokeLight: [70, 90, true], strokeOpacity: [0.05, 0.15, false] }; const someDots = [someDot]; //DEFINE NEW SCATTERSHOT //(how many elements, width, height, rand variance, color/placement object array) const myNewScattershot = new Scattershot(50, 1600, 700, 1, someDots); // > 4000 gets pokey const rectShots = myNewScattershot.scattershotArray; //COLOR & 'JITTER': const fillHue = rectShots[0][0].fillHue; const fillSat = rectShots[0][0].fillSat; const fillLight = rectShots[0][0].fillLight; const strokeHue = rectShots[0][0].strokeHue; const strokeSat = rectShots[0][0].strokeSat; const strokeLight = rectShots[0][0].strokeLight; const jitterXY = rectShots[0][0].jitterXY; const jitterOrigin = rectShots[0][0].jitterOrigin; const jitterRotation = rectShots[0][0].jitterRotation; const fillOpacity = rectShots[0][0].fillOpacity; const strokeOpacity = rectShots[0][0].strokeOpacity; const rectWidth = `${rectShots[0][0].w}`; const rectHeight = `${rectShots[0][0].h}`; let rectClass; rectClass = `${rectShots[0][0].name}`; for (let i = 1; i < +rectShots.length; i++) { const rectElement = makeElement("rect"); const rectID = rectShots[i].id; rectElement.setAttribute("class", `${rectID} ${rectClass}`); rectElement.setAttribute("id", rectID); //No-go for expected animated rotation around point at 50% 90%: //rectElement.setAttribute("transform-origin", "50% 90%"); svg.appendChild(rectElement); /*WORKS on all in class (which is all of them, currently):*/ // gsap.set(".firstRectShot", { transformOrigin: "50% 50%" }); /*WORKS on all in class (which is all of them, currently):*/ //gsap.set(`.${rectClass}`, { transformOrigin: "30% 90%" }); /*NO-GO on all in class (should be just one, as each uses its ID as also a classname):*/ //gsap.set(`.${rectID}`, { transformOrigin: "50% 90%" }); /*NO-GO using ID:*/ gsap.set(`#${rectID}`, { transformOrigin: "50% 90%" }); gsap.set(rectElement, { //No difference: gsap.set(`#${rectID}`, { x: `${(rectShots[i].x += getRandomInt( jitterXY[0], jitterXY[1], jitterXY[2] ))}`, y: `${(rectShots[i].y += getRandomInt( jitterXY[0], jitterXY[1], jitterXY[2] ))}`, width: `${rectWidth}`, height: `${rectHeight}`, /*WHAT I WANT TO HAVE WORK: transformOrigin: `${getRandomInt(jitterOrigin[0], jitterOrigin[1], jitterOrigin[2])}% ${getRandomInt(jitterOrigin[0], jitterOrigin[1], jitterOrigin[2])}%`,*/ /*WORKS, oddly enough: svgOrigin: "30 45",*/ rotation: `${getRandomInt( jitterRotation[0], jitterRotation[1], jitterRotation[2] )}`, fill: `${hsl2hex( getRandomInt(fillHue[0], fillHue[1], fillHue[2]), getRandomInt(fillSat[0], fillSat[1], fillSat[2]), getRandomInt(fillLight[0], fillLight[1], fillLight[2]) )}`, fillOpacity: `${getRandomInt(fillOpacity[0], fillOpacity[1], 0).toFixed( 3 )}`, stroke: `${hsl2hex( getRandomInt(strokeHue[0], strokeHue[1], strokeHue[2]), getRandomInt(strokeSat[0], strokeSat[1], strokeSat[2]), getRandomInt(strokeLight[0], strokeLight[1], strokeLight[2]) )}`, strokeWidth: 2, strokeOpacity: `${getRandomInt( strokeOpacity[0], strokeOpacity[1], 0 ).toFixed(3)}`, autoAlpha: 0, visibility: 1 }); } showSatellites(`${rectClass}`); }

And you are of course absolutely correct! ??‍♂️ Makes perfect sense Thanks Craig @PointC for that quick response, advice and fix! Now to think about stacking versus not stacking, Patrick

Howdy folks! I went looking for ScrollTrigger stuff, and came across Observer which may be all I need. I was trying to use the ignore parameter, but it doesn't appear to affect anything. Ideas as to what I'm not doing correctly? In my HTML I have something like: <section class="second scrollignore"> //(i've tried putting the class on the div, etc) ...and in the Javascript: Observer.create({ type: "wheel,touch,pointer", wheelSpeed: -1, onDown: () => { !animating && gotoSection(currentIndex - 1, -1); }, onUp: () => { !animating && gotoSection(currentIndex + 1, 1); }, tolerance: 10, preventDefault: true, ignore: ".scrollignore" }); I should note -- I was working from the original example found in https://greensock.com/docs/v3/Plugins/Observer; When I went to that page today, there's a similar looking but very different under the hood example there. Consider me confused! Thanks, Patrick

Oh, cool! Thanks @PointC & @OSUblake. I can see I'm going to have to get out of GSAP 101 and into the quickSetter(), morphSVGPlugin, and on and on ? ...I'll keep ya posted!

Thanks Craig for the welcome! Ha, I appreciate that -- I already felt a little cheat-y, using the example's slick motion+clipping. ...I'll need to keep the viewBox static for this one. I figure I'll just need to define the path, morph it with some slightly funky math, track the morphing, and use that to update the target (?) Thanks y'all for the quick responses! Patrick

Hi there: Long time listener, first time caller I'm trying to animate an object across a moving path. I started from @PointC's pen example for animating an element across a static path, and it works great. When I animate the target-path, my target doesn't follow the movement of the target-path (it follows the OG static path). The waves animation is from an example by Chris Gannon on CodePen. I looked around and was tracking the forum post (linked below). I'll admit to having gotten lost, not having used GSAP effects yet. Is that the best practice way to approach doing this? This example animation is a small part of a bigger project, but there is potential for dozens or more of these objects to be animated. Apologies if this example code is messy or has other stuff going on; it's stripped down believe me ...The motion path code is on or about lines 63-111 in the JS. Many thanks in advance for any insight! Patrick