how can i autoRotate in motion path container without affecting inner images

[shadysw]

hi there

i'm making circular slider using motion path plugin. i only need to use autoRotate for those orange dots as it gives the effect I want to achieve. is there some way to make the images stay the same and not be affected by autoRotate?

See the Pen ZEVzYdw by vyazemskaya (@vyazemskaya) on CodePen

[Rodrigo]

Hi @shadysw and welcome to the GreenSock forums!

 

Based on the setup you already have and the fact that the entire element (that contains the image and the dots) is the one being animated along that path, is not going to be possible, unless you start rotating the image to counter the effect of the path's rotation.

 

What you could do is get the dots in the target element and rotate them independently as you tween the progress of your timeline here:

function moveWheel(amount, i, index) {
  let progress = tl.progress()
  tl.progress(wrapProgress(snap(tl.progress() + amount)))
  let next = tracker.item
  tl.progress(progress)

  setClasses(items, next)

  gsap.to(tl, {
    progress: snap(tl.progress() + amount),
    modifiers: {
      progress: wrapProgress,
    },
  })
  // Create another tween to rotate the dots
}

That should be the simplest way to approach this IMHO.

 

Here is a fork of your codepen:

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

 

Hopefully this helps.