Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alal111

MotionPathPlugin change starting point of svg path

Recommended Posts

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

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 :)

  • Like 4
Link to comment
Share on other sites

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

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

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

 

  • Like 3
Link to comment
Share on other sites

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

 

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

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.

×