Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
timdt

Show/Reveal part of image slowly SVG

Recommended Posts

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

Link to post
Share on other sites

@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

Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

  • Like 4
Link to post
Share on other sites

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

 

  • Like 3
Link to post
Share on other sites

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

 

;)

  • Like 1
  • Thanks 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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

 

  • Like 1
Link to post
Share on other sites

@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?

 

 

 

 

  • Like 1
Link to post
Share on other sites

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

Link to post
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.

×