Jump to content
Search Community

Show/Reveal part of image slowly SVG

timdt test
Moderator Tag

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

@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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 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...