svg wave

[proweb1991 2 Likes (Newbie)]

hi 

a have 2 svg path , i want  create a animation wave  draw with gsap .

1 line animated from right to left and other line  left to right wave repeatly ,,, how can create this?

 

thanks  

See the Pen vyVYJr by proweb1991 (@proweb1991) on CodePen

[Dipscom 2,815 Likes (Superhero)]

In many ways:

 

With DrawSVG Plugin:

See the Pen zomYXE?editors=1010 by dipscom (@dipscom) on CodePen

 

Without DrawSVG Plugin: 

See the Pen rWqNom?editors=1010 by dipscom (@dipscom) on CodePen

 

[proweb1991 2 Likes (Newbie)]

In many ways:

 

With DrawSVG Plugin:

See the Pen zomYXE?editors=1010 by dipscom (@dipscom) on CodePen

 

Without DrawSVG Plugin: 

See the Pen rWqNom?editors=1010 by dipscom (@dipscom) on CodePen

 

it's awesom,

you are my hero ... 

[Dipscom 2,815 Likes (Superhero)]

I am nuthin'

 

These are the ones you should look up to: http://greensock.com/forums/topic/15588-dragging-masked-svg-path/?p=67966

[proweb1991 2 Likes (Newbie)]

I am nuthin'

 

These are the ones you should look up to: http://greensock.com/forums/topic/15588-dragging-masked-svg-path/?p=67966

I will definitely study, thx

 

just a question :

 

in my sample  (

See the Pen vyVYJr by proweb1991 (@proweb1991) on CodePen

 ) when svg draw completely , i want the line #1  (line Right to left ) countio draw svg even draw is complete to exit from display pane  (like picture ):

 

how can do this?

 

[Dipscom 2,815 Likes (Superhero)]

Hey proweb1991, can you re-phrase your question? I am not sure I understand the question.

 

Are you asking: Can the line be drawn from right to left, then be erased from right to left, instead of reversing?

[Diaco 1,948 Likes (Superhero)]

in addition to  Dipscom  answer , if I understand correctly ; pls try this :

 

var tl = new TimelineMax({ repeat:-1, yoyo:true, repeatDelay:1 })
.from(["#path1","#path2"], 1, {drawSVG:"0%", ease:Power2.easeInOut})
.to(["#path1","#path2"], 1, {drawSVG:"100% 100%", ease:Power2.easeInOut})

[proweb1991 2 Likes (Newbie)]

Hey proweb1991, can you re-phrase your question? I am not sure I understand the question.

 

Are you asking: Can the line be drawn from right to left, then be erased from right to left, instead of reversing?

Exactly ...

[proweb1991 2 Likes (Newbie)]

 

in addition to  Dipscom  answer , if I understand correctly ; pls try this :

 

var tl = new TimelineMax({ repeat:-1, yoyo:true, repeatDelay:1 })
.from(["#path1","#path2"], 1, {drawSVG:"0%", ease:Power2.easeInOut})
.to(["#path1","#path2"], 1, {drawSVG:"100% 100%", ease:Power2.easeInOut})

 

 

thank you bro ... My problem was solved

thank Dipscom too ...

 

just a question . in to state , why use two 100% (drawSVG:"100% 100%") ?? 

what is this Hundred precentages? 

[Dipscom 2,815 Likes (Superhero)]

It's because one is for the start of the path and the other is for the end of the path.

 

If you wanted your line to be drawn from the center to the extremities, you would do something like:

 

TweenMax.fromTo("path", 1, {drawSVG:"50% 50%"}, {drawSVG:"100% 100%"})

 

The docs have all of the details nicely explained and examples.

[DAM 0 Likes (Newbie)]

how to change background from the line to the bottom of the div (on complete)? thanks

[Dipscom 2,815 Likes (Superhero)]

Hi DAM,

 

I am not sure I understand your question here. Can you rephrase it?