Jump to content
Search Community

Can drawsvg plugin draw paths oneByOne

weiyan test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

render path/circle/rect in svg structure  oneByOne or sync or delayed

 

https://camo.githubusercontent.com/f43cf260e6ba5badcb4fb05f99270ea6cd1c539f/68747470733a2f2f7261772e6769746875622e636f6d2f6d617877656c6c69746f2f76697675732f6d61737465722f6173736574732f6f6e6542794f6e652e706e67[]

 

 

here is the example

http://maxwellito.github.io/drafts/vivus-issue-85/

 

i am compare vivus and  greensock , it same vivus (https://github.com/maxwellito/vivus)

has more control on animation timeline

I am a greensock newbee, i have no idea does the gsap timeline api can control path in svg

Link to comment
Share on other sites

Sure. The plugin can be controlled with a timeline or regular tween. Vivus is meant to do 1 thing, draw lines. GSAP can animate more than that, like say the stroke color or position. Simple example of one-by-one.

See the Pen cb71ed6bccaa98ce404b802d2d8c4595 by osublake (@osublake) on CodePen

 

.

In fact, i want a effect like this:  http://www.devmeng.com/vivus/demo/

codepen: 

See the Pen BpqXXV by mactive (@mactive) on CodePen

two point about advance effect

1. path has different color 

2. path can be filled. no mater when all paths drawn or i can control each path's fill

Link to comment
Share on other sites

@OSUblake thanks a lot, I tried again. and i get the point 

 

See the Pen zNMOBr by mactive (@mactive) on CodePen

your demo has same color, because of css> svg * > stroke: currentColor

 

and i saw that in vars:Object ,autoCss  we can set css-property so i can control opacity to  show or hide

 

and i can give paths different class or id, and control them one by one if

 

I tried like this 

See the Pen zNMOBr by mactive (@mactive) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

and i saw that in vars:Object ,autoCss  we can set css-property so i can control opacity to  show or hide

 

Sounds like you understand it. AutoCSS will take care of animating most SVG properties. The demo I provide was rather simple. For more control over the animation, I would use a timeline like this.

See the Pen 6d497f25833c9fdffa848de6ccaf4233?editors=1010 by osublake (@osublake) on CodePen

 

Here are some good resources for understanding timelines better...

Position parameter - https://greensock.com/position-parameter

ImmediateRender - https://greensock.com/immediateRender

 

.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...