Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About buster808

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. Thanks Carl, I missed that but will go through. daaaaahhhhhh
  7. https://codepen.io/snorkltv/pen/ExWZJNY Hi, How can I set the circles too autoRotate: false like on motion path. Thanks
  8. 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
  9. 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
  10. Hi, I noticed on scottie Lottie thats theres duration. Is it possible to add this too LottieScroll Trigger. Thanks
  11. 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/
  12. I just tested this in windows 10 Chrome and works fine. But not in Mac Google Chrome
  13. 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