Svg drawing line animation

[Giuseppe Simonetti]

Hi everyone! I'm trying to find a good solution for an animation that i have to create. My goal is to have a line in svg that draws a constellation, in every corner of this line there is a "star", and i would like to have something like a "pulse" animation whenever the line reaches the single star, and a text near every star with a fade in animation. I attach an image that shows the final result i want to reach. Does anyone has some tips? I made some tries so far, but i can't reach a good looking animation.

[mikel]

Hi @Giuseppe Simonetti,

 

Welcome to the GreenSock Forum.

 

This is just a test (problem timing in relation to window size; open it in Codepen) ...

 

See the Pen PgKjjG by mikeK (@mikeK) on CodePen.

 

Maybe there are a few suggestions for you in it.

 

Happy tweening ...

Mikel

 

[mikel]

Hi @Giuseppe Simonetti,

 

... and another test:

 

See the Pen QREjpr by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[PointC]

Hi @Giuseppe Simonetti,

 

Welcome to the forum.

 

I think @mikel has a nice solution for you there.

 

It was unclear to me if this was a scroll triggered animation or something full screen. You mentioned trying some things so we'd certainly take a look at what you have so far. Maybe you could make a demo? More info:

Happy tweening and welcome aboard.

 

[Giuseppe Simonetti]

5 hours ago, PointC said:

Hi @Giuseppe Simonetti,

 

Welcome to the forum.

 

I think @mikel has a nice solution for you there.

 

It was unclear to me if this was a scroll triggered animation or something full screen. You mentioned trying some things so we'd certainly take a look at what you have so far. Maybe you could make a demo? More info:

Happy tweening and welcome aboard.

Hi! i just recreated the image in svg with path, text and circle elements.. now i "just" have to animate them one by one, now i'm working on local so i can't submit my other tries, but the first try that i made is : 

 

[link removed for domain with inappropriate content]

Now that i have the svg, i'm looking for a good animations (on page load, not on-scroll). As you see in my first try, i made some animations but with all the delays set manually, and it's very  weary for me, and the result isn't what I need: the animations should be faster, and cool.. the "timeline" should be something like: the star appears in with a blink effect, the first text on the left fades in, then the text on the right , meanwhile the line starts the draw animation, whet it reaches the second star, this one blinks as the first, second text fades in and the third as well... and so on until the end of the line

 

Quote

 

 

Edited June 28, 2019 by GreenSock
Domain had inappropriate content

[PointC]

Okay, I think I understand what you're trying to do. Here's one way to do it with a SVG polyline along with some circles and text. It's a basic example, but maybe it'll help.

 

See the Pen ZdvaRb by PointC (@PointC) on CodePen.

 

Happy tweening.

 

[mikel]

@PointC:  that is excellent!

 

For beginners it could also be like this - step by step:

 

See the Pen ydppYJ by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[PointC]

Nice work @mikel ?

 

It's definitely easier with separate lines/paths rather than using a polyline. 

[Giuseppe Simonetti]

Thanks a lot guys.. i'll try and get back soon!! I know i'm a beginner but i hope to become an expert as soon as possible.. thanks again!!

[dada78]

Hey @PointC, this is really helpful, thanks for posting. Would you be able to share the illustrator file for the line with the dots so I can see how the asset set-up is done? I need to create something for a subway map, so it would be good to see how the lines need to be set up in Illustrator. Thanks!

[ZachSaucier]

@dada78 You should be able to copy the <svg> and paste it into a file (saving it with .svg file extension) and then be able to open it up in Illustrator. Or just look at the SVG code, it's pretty readable  

[dada78]

Hey Zach, I did that but it tells me the SVG is invalid. I copy and pasted into Sublime, saved as svg then tried to open in Illustrator...

[ZachSaucier]

Try adding <?xml version="1.0" standalone="no"?> to the top of it. Or if you have Inkscape, open it in that and export it as an AI file.

[eavitan]

On 6/28/2019 at 9:41 AM, mikel said:

Hi @Giuseppe Simonetti,

 

... and another test:

 

 

 

 

Happy tweening ...

Mikel

 

 

any inspiration of this in horizontal?

[Rodrigo]

Hi @eavitan and welcome to the GSAP Forums!

 

Do you have a minimal demo that we can have a look at?

 

We have a pathEase helper function that can help in those cases as mentioned in this thread:

 

You can fork this demo that loads all the GSAP Plugins in order to create your own (just remember to keep it simple)

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[eavitan]

Hey Im working on this currently:

See the Pen yLdWdNj by Eyal-Avitan-the-builder (@Eyal-Avitan-the-builder) on CodePen.

 

and this is the brief that i got: https://tinyurl.com/25p9dgtj

 

A customer asked me to find someone to do it but kinda found it amusing to try myself as I used to do Webgl for pleasure.

 

it suppose to scroll on the left and load this extra SVG, managed to do this for now, what im missing is:

loading the points on the svg grid on scroll,

load a vertical line

and load the text.

 

I think my main struggle is to declare the positioning on scroll, and from there i think its just drawing SVG's

 

this is kind of the goal, but horizontal  

See the Pen QREjpr by mikeK (@mikeK) on CodePen.

 

thanks for your help

[Rodrigo]

You have to find a way to move the SVG in the same amount as the horizontal movement as the DrawSVG Plugin draws the line.

 

You can create a single timeline and add both instances (the one that draws the SVG and the one that moves the SVG horizontally) at 0 seconds and give them the same duration. You can use the position parameter for that.

 

Also you can try the approach in these demos:

See the Pen MWPOQmo by GreenSock (@GreenSock) on CodePen.

 

See the Pen MWqWvom by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!