buster808

Thanks Rodrigo

Hi, Ive created a drawsvg animation with text and next button and want the next animation to start in same position. Ive tried using display none with no joy. I have hidden the second animation I wish to start in css file. I have used a css framework UIKIT so I change position for mobile. Thanks for any help.

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

fantastic thanks a lot

Hi, Is their a way to have all the X's aligned horizontal with no rotation. thanks

Hi, do you know of a way to create sprite sheet from short video, easy to export frames, maybe Ill have to stitch them together. Thanks

Hi, Is it possible to loop a lottie file more than once on scroll or would you have to add extra frames to the file. Thanks

Daaaah Thanks

Yes trying background image using below but no cigar. const bimage = ["images/acs.png", "images/pbj.png"] gsap.set(circle, {backgroundImage:gsap.utils.wrap(bimage, i)})

Thanks Carl gsap.utils.wrap() perfect. I was able to change text using: const text = ["c", "x", "a", "p"] gsap.set(circle, {textContent:gsap.utils.wrap(text, i)}) But want to add images to the circles like icons. const icons = ["images/icon1.png", "images/icon2.png"", "images/icon3.png"", "images/icon5.png""] Can this be achieved?

Hi, This is code from the fabulous https://www.creativecodingclub.com/ I want to be able to change the background colour for each circle also add a separate SVG in each circle. I tried adding id to each circle then using gsap.set with no joy. Thanks for any help.