Jump to content
Search Community

Motion Path with multiple paths

Corentin Darras test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi team!

 

I have a ball wich follow a line with motionPath.

This line have curves and changing colors, so the svg contain multiple paths.

     <svg id="Line" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
           viewBox="0 0 1084.7 4581.9">
        <path class="drawline2 st1" d="M1082.7,410.6 1082.7,600.4 1082.7,819.6 "/>
        <path class="drawLine1 st0" d="M796.4,2.8c0,0,201.1-1,262.4-1.3c8.2,0,23.9,0,23.9,22.7c0,14,0,0,0,0v386.3"/>
        <circle class="ball ball01" r="14" cx="14" cy="14"></circle>
      </svg>

My question is, how can i use differents paths on the same motionPath ? Or how can i force my animation to follow the next path when the ball have follow the previous ? 

 

I use scrollTrigger and motionPath in an angular env.  This is how i draw the motion but it work only for one path. 

 

buildLine(trigger: string, start: string, end: string, idEl: string, type?, isFr?, mk?) {
  var defaultMarker = false;
  var endSize = '+=' + end;
  var target;
  var ball;

  if (type === 'tb') {
    target = '.drawLineTB' + idEl;
    ball = '.ballTb0' + idEl;
  } else if (type === "mob") {
    target = '.drawLineM' + idEl;
    ball = '.ballM0' + idEl;
  } else if (isFr) {
    target = '.drawLinefr' + idEl;
    ball = '.ballfr0' + idEl;
  } else {
    target = '.drawLine' + idEl;
    ball = '.ball0' + idEl;
  }

  if (mk) {
    defaultMarker = mk;
  }

  return gsap.timeline({
    defaults: {duration: 1},
    scrollTrigger: {
      trigger: trigger,
      scrub: true,
      start: start,
      markers: defaultMarker,
      end: endSize,
    }
  })
    .to(ball, {duration: 0.01, autoAlpha: 1})
    .to(ball, {
      motionPath: {
        path: target,
        alignOrigin: [0.5, 0.5]
      }
    }, 0)
}

Thanks in advance :) 

Capture d’écran 2021-07-14 à 08.55.59.png

Capture d’écran 2021-07-14 à 08.56.07.png

Link to comment
Share on other sites

  • Solution

 

Hey there Corentin!

My first thought - If the path it's following is purely 'split up' because of visual differences, then just draw another path over the top for the ball to follow and set it's opacity to 0 (or remove from the DOM entirely and just use in in JS).

If this isn't helpful - would you be able to put together a  minimal demo for us to take a closer look? No need for angular - just the bare essentials. the path and the GSAP code.

  • Like 2
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...