Show/Reveal part of image slowly SVG

[timdt 29 Likes (Newbie)]

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 2,541 Likes (Superhero)]

What do you mean by slowly?

 

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

 

 

[timdt 29 Likes (Newbie)]

@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 29 Likes (Newbie)]

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 2,541 Likes (Superhero)]

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 29 Likes (Newbie)]

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 2,815 Likes (Superhero)]

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 29 Likes (Newbie)]

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

[Dipscom 2,815 Likes (Superhero)]

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 2,541 Likes (Superhero)]

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 29 Likes (Newbie)]

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 2,815 Likes (Superhero)]

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

 

[timdt 29 Likes (Newbie)]

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

[timdt 29 Likes (Newbie)]

@Dipscom that would be awesome

[Sahil 2,541 Likes (Superhero)]

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 29 Likes (Newbie)]

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 2,541 Likes (Superhero)]

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 9,990 Likes (Superhero)]

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

 

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

 

[mikel 1,823 Likes (Superhero)]

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 29 Likes (Newbie)]

@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 29 Likes (Newbie)]

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