Share Posted January 28 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 More sharing options...
Share Posted January 28 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 28 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 More sharing options...
Share Posted January 28 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 2 Link to comment Share on other sites More sharing options...
Share Posted January 28 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted January 28 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 More sharing options...
Solution Solution Share Posted January 28 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now