svgdotjs / svg.js

The lightweight library for manipulating and animating SVG
https://svgjs.dev
Other
11.01k stars 1.07k forks source link

animation of dashoffset path in svg.js #1181

Closed nikkisingh111333 closed 3 years ago

nikkisingh111333 commented 3 years ago

hey i wants to simply animate path with dashaarray and dashoffset heres what i trying but not working. ` var g1=introd.group()

      g1.path('M898.022 208L923 237H382.847L351 208H898.022Z').fill('lightyellow').attr({"stroke-dasharray":1000,
          "stroke-dashoffset":0}).move(-2000,250).animate({
            duration: 2000,
            delay:1000,
            when: 'now',
            swing: true,
            times: 1}).attr({"stroke-dasharray":1000,"stroke-dashoffset":1000}).move(2000, 200).during(function() {
            console.log(p2)
            console.log(this)
            if (p2==19) {
                console.log("great")
                this._timeline._speed=0.05  //THIS Will Adjust speed of animation on runtime without starting it from scratch
            }
            if(p2==70){
                    this._timeline._speed=0.9  //THIS WONT CHANGE ON RUNTIME START FROM START IF WE DOES IT

            }
            p2++
        })`

i have done it on css but i dont want to do it on css.I want to try it out using SVG.js suggest me if i m going right or is there another way

Fuzzyma commented 3 years ago

There you go: https://codepen.io/fuzzyma/pen/gOwGYwr

Also: DONT USE PRIVATE PROPERTIES