draw svg on scroll

[proweb1991]

hi there

i create a draw svg on scroll effect on demo.

i have 2 questions ...

 

1: this svg paths not draw on scroll and and draw all paths when arrived at target point ...
how can config this svg paths draw only on scroll??

 

2:in inverse scroll svg paths must be inverse draw ,However in my sample it dose not happend ...

 

can anyone help me please??

 

thanks

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

[Dipscom]

Hi proweb1991,

 

Are you by any chance inspired by this site: http://le-mugs.com/ ? This is just out of curiosity as there's been a few questions in the past couple of weeks that were either directly referencing the site or, like yours, seem to be inspired by the site's animation.

 

Anyhow, firstly, the main issue here is to do with how ScrollMagic is being triggered, please bear in mind that ScrollMagic was not created by Greensock nor it is maintained by the folks behind GSAP. 

 

Having said that, there's no harm in helping you out.

 

The main issue seems to be due to the fact that you are defining the trigger object as your main object container and thus, when the page loads, it is automatically triggering the start of the animation. If you offset the position of the container, things seem to work as one would expect.

 

See a simplified version here: 

See the Pen jVxNRV?editors=0110 by dipscom (@dipscom) on CodePen

[proweb1991]

Hi proweb1991,

 

Are you by any chance inspired by this site: http://le-mugs.com/ ? This is just out of curiosity as there's been a few questions in the past couple of weeks that were either directly referencing the site or, like yours, seem to be inspired by the site's animation.

 

Anyhow, firstly, the main issue here is to do with how ScrollMagic is being triggered, please bear in mind that ScrollMagic was not created by Greensock nor it is maintained by the folks behind GSAP. 

 

Having said that, there's no harm in helping you out.

 

The main issue seems to be due to the fact that you are defining the trigger object as your main object container and thus, when the page loads, it is automatically triggering the start of the animation. If you offset the position of the container, things seem to work as one would expect.

 

See a simplified version here: 

See the Pen jVxNRV?editors=0110 by dipscom (@dipscom) on CodePen

 

thank you my dear friend ...

yes I have to get my inspiration from this site , because i have a order from customer to create a template Similar to that site(with all of effects) ... And I am not professional  in the Gsap + ScrollMagic animation ... 

 I am learning this interesting features      But I do not have a good reference to use this plugins

 

 thank you bro for your Guidance... 

so , if  use offset my problem is solved ,

[proweb1991]

• hi dear Dipscom
• i try your solution but It seems that it is only effective on the first path and other path draw automatically Regardless of the scroll ...
• please  look on my pencode again :
•  

 

thx ...