[Next button Animation]

Thanks Rodrigo

[Next button Animation]

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.

See the Pen NWMzdOM by buster808 (@buster808) on CodePen

[Adding function paramter in timeline]

On 1/21/2022 at 5:55 PM, PointC said:

Hi @buster808 

 

Looks like you're stuck with the meters. Here's a fork of your demo in which I used a forEach loop to make the animations and add a ScrollTrigger to each one. I think it should get you moving in the right direction. I used a small array for the dial values, but you can also use data attributes as @elegantseagulls mentioned above. Lots of ways to make it happen. 

 

 

 

 

Happy tweening and thanks for reading Motion Tricks.

 

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. 

[Adding function paramter in timeline]

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.

[Speed/Meter need help to work as items.]

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.

See the Pen gOGJLyg by buster808 (@buster808) on CodePen

[Working with Adobe Animate and Greensock]

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

[Use SVG tspan in code]

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

See the Pen NWRqmOv by snorkltv (@snorkltv) on CodePen

[Change properties in loop animation]

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

[Change properties in loop animation]

See the Pen ExWZJNY by snorkltv (@snorkltv) on CodePen

 

Hi, How can I set the circles too
autoRotate: false

like on motion path.

 

Thanks

[Scroll-trigger animation stops when using smooth scrollbar on window resize]

Yes thanks exactly what I was expecting perfect

[locomotive not playing scrolltriggers until window resized.]

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

[Scroll-trigger animation stops when using smooth scrollbar on window resize]

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

See the Pen gOmReEY by buster808 (@buster808) on CodePen

[locomotive not playing scrolltriggers until window resized.]

Hi,

I noticed on scottie Lottie thats theres duration.

Is it possible to add this too LottieScroll Trigger.

Thanks

[locomotive not playing scrolltriggers until window resized.]

Thanks again PERFECT.

[locomotive not playing scrolltriggers until window resized.]

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/

[locomotive not playing scrolltriggers until window resized.]

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

[locomotive not playing scrolltriggers until window resized.]

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

See the Pen OJpmvwV by buster808 (@buster808) on CodePen

[ScrollTrigger with canvas animation]

1 hour ago, sbest58 said:

Hi Buster,

My workflow is to export video from After Effects as numbered frames, load the frames into Adobe Animate then select all frames in the library panel, right click and select create sprite sheet - create without spaces. I then import sprite sheet into Photoshop and crop any empty space so I have the right size for the rows and columns of frames, I usually sharpen and boost the colours also. Then I will run the image through ImageOptim to bring the size down to something acceptable to Google DoubleClick Studio.

Hope this helps.

fantastic thanks a lot

[Change properties in loop animation]

14 hours ago, buster808 said:

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.

 

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

 

 

[ScrollTrigger with canvas animation]

On 7/27/2020 at 2:19 PM, ZachSaucier said:

That's probably less due to the event listeners themselves and more due to your animation. Drawing bunch of images with little time between is probably not the best approach. I'd probably use <img> elements or a sprite instead. Here are a couple of examples using ScrollTrigger:

 

 

 

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

[Loop lottie file more than once on Scroll]

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

 

 

See the Pen QWdjEbx by GreenSock (@GreenSock) on CodePen

[Change properties in loop animation]

10 minutes ago, OSUblake said:

Those aren't valid properties for backgroundImage. 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

 

const bimage = ["url(images/acs.png)", "url(images/pbj.png)"]

 

Daaaah Thanks

[Change properties in loop animation]

32 minutes ago, OSUblake said:

If you are using <img> elements, then set src attribute.

 

33 minutes ago, OSUblake said:

Assuming you plan on use background-image, just do it the same way.

 

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)})

[Change properties in loop animation]

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?

[Change properties in loop animation]

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.

See the Pen rNyjPrw by buster808 (@buster808) on CodePen