Jump to content
Search Community

How to undraw svg based on scroll progress

midnightgamer test
Moderator Tag

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

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

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

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.
×
×
  • Create New...