is there an event for indicating when the yoyo is going backward or forward?

[tahirw]

I want to manipulate my img when its going backward/forward for example like this, is this possible?

if(yoyo is moving forward){
	img.addClass('bg-green')
}else{
	img.addClass('bg-red')
}

 

my current code is like this:

  const tween = gsap.timeline()
  tween.to(
    "#cart1",
    {
      duration: 5,
      ease: "linear",
      motionPath: {
        path: "#cart_path",
        align: "#cart_path",
        autoRotate: true,
        alignOrigin: [0.5, 1],
      },
      repeat: -1,
      yoyo: true,
    },
    "start"
  )

Thanks in advance

[akapowl]

Welcome to the forum @tahirw

 

I'm not sure if there is a dedicated method for that, but what you could do is use the .iteration() to determine wether the yoyo is moving 'forwards' or 'backwards'.

 

// e.g. in an onRepeat callback

onRepeat: function() {
  if (this.iteration() % 2 === 0) {
    console.log('yoyo is moving backwards')
  } else {
    console.log('yoyo is moving forwards')
  }
}

 

See the Pen XWqZwyw by akapowl (@akapowl) on CodePen

[tahirw]

Thank you so much its working