Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how animate a shape with a path #109

Open
sarahBuisson opened this issue Apr 9, 2021 · 1 comment
Open

how animate a shape with a path #109

sarahBuisson opened this issue Apr 9, 2021 · 1 comment

Comments

@sarahBuisson
Copy link

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 :(

@coder787
Copy link

coder787 commented Apr 9, 2021

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.

https://codepen.io/coder787/pen/MWJreyo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants