Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Giuseppe Simonetti

Svg drawing line animation

Recommended Posts

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.

example.jpg

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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.

:)

 

  • Like 1
Link to comment
Share on other sites

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 by GreenSock
Domain had inappropriate content
Link to comment
Share on other sites

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.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@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

 

 

  • Like 3
Link to comment
Share on other sites

Nice work @mikel ?

 

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

  • Like 1
  • Haha 1
Link to comment
Share on other sites

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!!

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.
×