MotionPathPlugin change starting point of svg path

[alal111]

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.

[Cassie]

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

[alal111]

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)

[alal111]

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?

[mikel]

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

 

[alal111]

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

[Cassie]

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.

[mikel]

 

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"