Jump to content
Search Community

Is it possible to use MotionPath to start at the end of a path and go backward?

SamStAubyn test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

As title says, I have an SVG path that on scroll goes from 100% length to 0% effective disappearing, when I add an element to it, it naturally follows the path but in reverse to the direction that I need it to go in. 

 

Currently I have duplicated the same SVG, used illustrator to invert the data points then added it inline with no stroke with to achieve the desired result, but now I need to add it to multiple paths and it's very time consuming to do this for all of them, is there a way I can just reverse the direction? 

 

Have attached a codepen with just my HTML and JS just to show how I'm doing it currently.

See the Pen MWRGxjY by SamStAubyn94 (@SamStAubyn94) on CodePen

Link to comment
Share on other sites

  • Solution

sure - just use the start/end properties

  motionPath: {
    align: sparklePath,
    path: sparklePath,
    alignOrigin: [0.5, -0.5],
    start: 1,
    end: 0
  },

Happy tweening. :) 

  • Like 4
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.
×
×
  • Create New...