Jump to content
GreenSock

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

svg wave

Recommended Posts

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

Link to post
Share on other sites

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?

 

oi4a_test.png

Link to post
Share on other sites

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?

Link to post
Share on other sites

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})
  • Like 6
Link to post
Share on other sites

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

Link to post
Share on other sites

 

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%") ??  :geek:

what is this Hundred precentages?  :geek:

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

Hi DAM,

 

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

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.

×