how animate a shape with a path
sarahBuisson opened this issue · comments
I draw a line with Shape, I want to change it with the time, how do I do?
I've try:
let s=new Zdog.Shape({ addTo: illo, path: [ // triangle { x: 0, y: -40 }, { x: 40, y: 40 }, { x: -40, y: 40 }, ], closed: false, // unclosed stroke: 20, color: '#636' }); s.path= [ // triangle { x: 0, y: -90 }, { x: 10, y: 40 }, { x: -40, y: 40 }, ]
but it seems that the new value of path is not updated :(
you can't just update shape sizes in zdog to animate, basically to do any kind of animation you should use GSAP as you can make timelines and control movement, within GSAP you then put the zDog shapes that animate from one state to the next. Instead of editing a shape you create 2 shapes and transition between them for example to create the illusion. I created a drawing triangle example here for you, which I think is what you are trying to do. I recommend searching codepen for zdog to see what is possible with animation. hope that helps.