Jump to content
GreenSock

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

How to undraw svg based on scroll progress

Go to solution Solved by mikel,

Recommended Posts

Hi everyone, I am trying to get hands on scrollTrigger so I took a pen and tried to apply some tweens. I am successfully moving hands as I scroll down. What I want is to undraw the line as I scroll down. I tried but it didn't worked. Help me out and if there is something is wrong in my code please correct me.

See the Pen ZEBzxON by midnightgamer (@midnightgamer) on CodePen

Link to comment
Share on other sites

Hey @midnightgamer,

 

A reduced case would be more helpful.
So here's a simple version.
Note the structure of the path: from below!

 

See the Pen LYbPBNN by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 1
Link to comment
Share on other sites

28 minutes ago, mikel said:

Hey @midnightgamer,

 

A reduced case would be more helpful.
So here's a simple version.
Note the structure of the path: from below!

 

 

 

 

Happy tweening ...

Mikel

 

Thanks mike but this idea is not working from me as .draw not a single svg. It is array of svgs which i am trying to undraw as hand reach near the particular item. You can see animation when page load , I need revers the same animation but using scroll trigger. 

Link to comment
Share on other sites

Hey @midnightgamer,

 

I don't really understand your intention.
As I said, a simple example would help.
Here is a case where elements appear (instead of disappearing) in the scrolling process.

 

See the Pen rNOBLBV?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening ...

Mikel

 

  • Like 2
Link to comment
Share on other sites

2 hours ago, midnightgamer said:

draw not a single svg. It is array of svgs which i am trying to undraw as hand reach near the particular item

I'd guess that you should set up a ScrollTrigger for each section and then do what mikel is doing in that case. As he said, if you'd like a more help a minimal demo would be very helpful.

  • Like 1
Link to comment
Share on other sites

2 hours ago, mikel said:

Hey @midnightgamer,

 

I don't really understand your intention.
As I said, a simple example would help.
Here is a case where elements appear (instead of disappearing) in the scrolling process.

 

 

 

 

Happy tweening ...

Mikel

 

 

44 minutes ago, ZachSaucier said:

I'd guess that you should set up a ScrollTrigger for each section and then do what mikel is doing in that case. As he said, if you'd like a more help a minimal demo would be very helpful.

See the Pen RwobvNX by midnightgamer (@midnightgamer) on CodePen

 

 

In this codepen I used code given by @mikel and added some thing what i need is when we scroll down and green triangle reaches red circle it should undraw just like the line.

Link to comment
Share on other sites

  • Solution

Hey @midnightgamer,

 

Just use onUpdate to check the progress, choose the point which fits and ...

 

See the Pen mdObvvr?editors=1010 by mikeK (@mikeK) on CodePen

 

The scrubbed tweens have a duration of 1.
So you can position the individual circ tweens according to the progress that fits.

 

Happy analysing cases ...

Mikel

 

  • Like 1
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.
×