Varunbht Posted October 15, 2020 Share Posted October 15, 2020 Hi guys, I am sharing a very close example to my current work which I am doing with GSAP using ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. When you scroll down you will see a SVG line drawing there which is going fine but just when you reach half way on Section 9, you will notice that the SVG line goes on drawing before reaching next section. In other words, it draws ahead of the scrolled section. Also, when I scroll up and down, the entire line starts shaking. I am stuck on these 2 issues. Can anyone please help me solve this? See the Pen eYzJVLe by Swooshant (@Swooshant) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted October 15, 2020 Share Posted October 15, 2020 Hey @Varunbht, As mentioned in this thread To compensate for the 'faster' vertical movement, a logic could be defined that counteracts the position of the SVG. Here is a simple experiment adapted to certain sectors (a fixed width of the SVG!). Here quick modification of your case See the Pen eYzJrQJ by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 5 1 Link to comment Share on other sites More sharing options...
Varunbht Posted October 15, 2020 Author Share Posted October 15, 2020 Thank you so much @mikel. I was having a big trouble solving these issues. 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