Show/Reveal part of image slowly SVG

[timdt]

For some clarification: Sorry didnt translite the id's to english.

 

rood1 = circle2

rood2= circle2

lijn1 = the line i want to animate and reveal the part slowly.

 

 

See the Pen BmdBxQ by timdt (@timdt) on CodePen.

[Sahil]

What do you mean by slowly?

 

See the Pen vWJBoG?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

 

[timdt]

@Sahil Its not about the circles actually. its about the line. 

 

Animation should go like this:

 

circle 1 : from scale :0 to normal size.

line: Goes from circle 1 tot circle 2

circl2: ( on arrival of line ) from scale :0 to normal size. etc etc etc.

 

hope this maybe clarify's it a little more

[timdt]

I know it would be possible with the drawsvg plugin but since i dont have that. would it maybe we better to split the lines rotate them and then use scaleX or ScaleY to make the line like it is traveling from one circle to the other?

[Sahil]

You mean at every point line arrives, you want the circle to reveal? You will have to use multiple lines I guess, and on revealing each line you can reveal circle.

[timdt]

Yeah, it must look like the line is travelling from dot to dot. and on arrival the dot just pops. Thought maybe i was overlooking something and thought there must be a easier way. But Splitting the line into different paths and then reveal them one by one should also do the trick.

 

Thanks for the help i will post the finished result here when i am done. Maybe will not be today, or may be tomorrow

[Dipscom]

You can calculate and animate the stroke dash array and offset properties - I've got on the back of my memories that someone has shown how to do that somewhere in the forums.

 

But, the quick and easy way is as @Sahil suggests, a single line per section. If you start the lines all at 0,0 and translate a <g> nesting each line, you will be able to scale each line easily without deformation issues.

[timdt]

@Dipscom So you mean group each line in illustrator then export to svg and use the transform translate? or use the scale?

[Dipscom]

Yes. But it's really important that you draw all the lines at 0,0 and at the same angle. Then group them. Then, move the group.

 

That way, you're making sure the line itself is at 0,0. The group is whatever translation you used. Then, you scale the line, not the group and it should be fine.

 

However, that is only a simple solution if your graphic is static. If you have a dynamic one, you will want to animate the dash-array and dash-offset properties.

[Sahil]

Source

 

So I found out how you can use dasharray and dashoffset. But I am not sure how it can be used instead of multiple lines. I guess you will have to calculate distance between each circle then animate the offset.

 

See the Pen GOvgoB?editors=1010 by Sahil89 (@Sahil89) on CodePen.

 

[timdt]

See the Pen rYzapj by timdt (@timdt) on CodePen.

 

Ty guys for  all of your help thankt to you i am able to create things like this

[Dipscom]

Soon you will be one to be showing others the ropes.

 

[timdt]

@Sahil yeah maybe set a rotation? and then use it. then it will be pointing into another direction

[timdt]

@Dipscom that would be awesome

[Sahil]

Ya you can rotate it however you want or the trick works on complex shape too. Read that article, it explains it better. It uses CSS but same can be done with GSAP. See my codepen.

[timdt]

Oke, so i have created some new lines angle: 0 degrees.

I have included the svg file in the attachments because i dont know what i did wrong.
Created this line 4 times over and over again and still does the same thing 0.o

 

Could someone please explain why the other 2 lines work fine except for line 2 which i called "#Lijntje" 

line1 = #line1

Line3 = #line3

 

See the Pen bYrjXx by timdt (@timdt) on CodePen.

 

3.svg

[Sahil]

That's because of transformOrigin, the lines that go down look fine but line going up has problem due to transformOrigin.

 

Also can you please post your demos as normal codepen rather than copy/pasting everything in HTML? It becomes really time consuming to find every bit in single editor. It certainly makes it easy for you to copy/paste but anybody trying to help you has to take extra efforts every time.

 

See the Pen eeELXg?editors=1000 by Sahil89 (@Sahil89) on CodePen.

 

[OSUblake]

Why don't you just tween a line or polyline?

 

See the Pen gXojGb by osublake (@osublake) on CodePen.

 

[mikel]

Hi,

 

Just a suggestion for building up graphs: If more than one graph has to be developed, I find this Path Builder very elegant ...

 

See the Pen mewdyZ by anthonydugois (@anthonydugois) on CodePen.

 

[timdt]

@Sahil Will make sure next time everything is allingned properly. Promised.

 

@OSUblake Interesting, didn't know that was possible. Will look into it. seems like a simple straight forward solution.

 

@mikel Thanks! Awesome great looking tool. Getting so much info from all of you guys. Wish i had a bigger brain that would consume all the information at a faster rate so i could do more gsap haha.  Is it possible to animate all of this or is it only for making graphs?

 

 

 

 

[timdt]

Btw, sorry for the late response. have been sick for the  last couple of days.