Jump to content
GreenSock

Maddy_007

How can I stop the movement of the card when it touch to the bottom

Recommended Posts

Hello, 
I want to stop the motion path when the card reach to the bottom, I have also use the end property in the motion path object but it not works well. And also my card it not in the view while scrolling. It been two days I am working on it, can Any please help me out.

See the Pen abGPaWj by maddy_001 (@maddy_001) on CodePen

Link to comment
Share on other sites

Hi,

 

Indeed @mvaneijgen is right, if you add a new post to the ongoing thread, we will attend that one and will answer your questions there.

 

SVG is not my strongest suit so I'm not completely sure that what I tried is the best possible approach. Basically I tinkered a bit with the general structure of the SVG path and it's location on the viewport. Also I made the viewport a bit bigger to give some space at the top and bottom of the SVG.

See the Pen VwxqRJE by GreenSock (@GreenSock) on CodePen

 

I  think the best approach is to tinker with the viewport size, the position of the path in the viewport (give some space at the top and bottom, not make the path's height the viewport size) and play with the start and end positions. Finally in this cases, is super important to give the animation an ease: "none" in order to have the progress of the animation linear throughout it's entire duration.

 

Hopefully this is enough to get you started.

 

Happy Tweening!

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.
×