Share Posted July 1, 2021 i want paper to go to conus but it moves backwards and i cannot understand how to change it, help please See the Pen vYxbYvm by alexanderbredun (@alexanderbredun) on CodePen Link to comment Share on other sites More sharing options...
Share Posted July 1, 2021 Heya! - So that path it's following is a shape with a stroke all the way around it. The toilet paper is following the stroke around the shape. See the Pen e79d8f7c17c8a5bf164fcbb6b769048f by cassie-codes (@cassie-codes) on CodePen You'll need to redraw that path so that it's a single stroke without a fill. Shout if that doesn't make sense and I'll find you an article or something 4 Link to comment Share on other sites More sharing options...
Author Share Posted July 1, 2021 18 minutes ago, Cassie said: Heya! - So that path it's following is a shape with a stroke all the way around it. The toilet paper is following the stroke around the shape. You'll need to redraw that path so that it's a single stroke without a fill. Shout if that doesn't make sense and I'll find you an article or something thank you very much for quick reply) but i dont really know how to create such a thing) Link to comment Share on other sites More sharing options...
Author Share Posted July 1, 2021 30 minutes ago, Cassie said: Heya! - So that path it's following is a shape with a stroke all the way around it. The toilet paper is following the stroke around the shape. You'll need to redraw that path so that it's a single stroke without a fill. Shout if that doesn't make sense and I'll find you an article or something where can i create something like this? Link to comment Share on other sites More sharing options...
Share Posted July 1, 2021 Hey @alal111 On the one hand, it is much easier to combine all the elements in the SVG. And: a path can easily be coded by hand. See the Pen yLbNOLV?editors=1010 by mikeK (@mikeK) on CodePen And for the scroll-effect you could use GSAP ScrollTrigger. Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Author Share Posted July 1, 2021 5 minutes ago, mikel said: Hey @alal111 On the one hand, it is much easier to combine all the elements in the SVG. And: a path can easily be coded by hand. And for the scroll-effect you could use GSAP ScrollTrigger. Happy tweening ... Mikel thank for reply, but even in your example paper moves from conus, i need it like when i scroll down it moves to conus, i tried to use rotate3d on parent but then paper rotates too, i just need your exact example but paper moves in opposite direction Link to comment Share on other sites More sharing options...
Share Posted July 1, 2021 That's very easily done. I suggest giving the docs a read to find out which values to tweak - you can find them here - motionPathPlugin See the Pen bc4d022311889462ab769042e8cc8152?editors=1010 by cassie-codes (@cassie-codes) on CodePen 4 Link to comment Share on other sites More sharing options...
Share Posted July 1, 2021 Just swap the start and end point of the path. //old d="M 120 160 Q 300 0 500 150" //new d="M 500 150 Q 300 0 120 160" 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