buster808

Hi Craig really appreciate this, great code to understand how to loop svgs and using array for data. I went through your master.add starwars tutorial recently - excellent.

Hi, I have function below and want to add the function to timeline and be-able to change count parameter so can create seperate items. have tried numerous things but stuck. function dialcalc() { console.clear(); const count = 600; const targetPercentage = count / 1140; newRotation = targetPercentage * 180; drawTarget = DrawSVGPlugin.getLength(".maskRingTwo") * targetPercentage; } gsap .timeline({ scrollTrigger: { trigger: "#fastdial", toggleActions: "restart none none reset" } }) .fromTo(".maskRingTwo", { drawSVG: 0 }, { duration: 4, drawSVG: drawTarget }) .to(".needleTwo",{ duration: 4, rotation: newRotation, svgOrigin: "225 200" },0); Thanks for any help or even a tutorial.

Hi I want create lots of Speed/Meter's with seperate speeds and have animation sync. (I used code from https://www.motiontricks.com/svg-skill-level-meter/ to get started with scrolltrigger) Ive created two speed dials one is at 1140 and the dial and mask ring is full. The second won is at 600 and I can set the dial but need help with setting the mask ring so it stays with the dial. Im sure theres a way of doing this with code so I can set the number say 700 and the animation happens via an overall percentage of say 1140. Thanks for any help.

Hi, I just discoverd working with Adobe Animate and Greensock, great. AA animations never feel as polished as gsap animations but what I do like is using AA as a layout tool and development area. I guess my questions is are there any pitfalls when working with both of them. Thanks

Hi, I'm using this code from the remarkable https://www.creativecodingclub.com/ I want to use the counter with a svg tspan. <text id="portValueNum" class="cls-29" transform="translate(298.56257 235.84268)"> <tspan id="manage" xml:space="preserve">1000</tspan> </text> Is this even possible. I tried changing, let elements = document.querySelectorAll("tspan") but no cigar. Thanks

Thanks Carl, I missed that but will go through. daaaaahhhhhh

https://codepen.io/snorkltv/pen/ExWZJNY Hi, How can I set the circles too autoRotate: false like on motion path. Thanks

Yes thanks exactly what I was expecting perfect

I added end:+=4000 to my first scroll now the animation is exactly what I want.. Then added the below to my second trigger trigger: ".boxContainer", start: "top -4000", end: () => "+=" + innerHeight, This works fine so I guess my question is, is this the best way to get the second trigger to line up. Thanks

HI, When I resize the window the scroll-trigger animation stops working but the lottie trigger animation is fine. I'm using smooth-scrollbar but had same issue using locomotive. On Mac Chrome Thanks

Hi, I noticed on scottie Lottie thats theres duration. Is it possible to add this too LottieScroll Trigger. Thanks

Thanks again PERFECT.

Hi, Theres two scroll triggers in the pen exactly the same animation. First load only one animation will scroll but when window is resized then it will scroll both animations. This is an example online using a lottie scroll and a Scrolltriiger. same issue ... thanks http://justgym.xtracreative.co.uk/

I just tested this in windows 10 Chrome and works fine. But not in Mac Google Chrome

Hi, I'm using lottie with scrolltriggers and locomotive. It works fine when I resize the browser window but not on first load. Tried adding refresh into function but no joy. Thanks