Run other function(s) when x resets in seamless loop with modifiers plugin

[pils 2 Likes (Newbie)]

Hi,

 

This codepen is from the modifiers plugin page and i'm trying to adjust it so that when a box goes beyond the 500 point, it not only resets x:0 but also let's me run another function. I want to be able to for example change the background-color of the box when it goes over the 500 point, or maybe the number that is in the box (only change for the one that is going back to x:0).

 

What i tried so far:

- In onUpdate run a function when a box goes over 500 > Not sure if i was doing it right but didn't seem consistent. 

 

Is there a way to do this?

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

[OSUblake 18,533 Likes (Superhero)]

Hi pils,

 

The best place to do that will probably be in the modifiers function, so I'm thinking this will work. Compare the last x value to the next x value, and if the next x value is less than the last x value, that means it has repeated.

 

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

 

[pils 2 Likes (Newbie)]

Thank you kind sir! I can start working with this.

 

Had a small issue when adding a ease like "back.in" to it. Because, off course, the next value will be less then the last value while doing the easing animation. I now fixed this where the condition also checks that the value is lower then a certain value(-100 now), this feels a bit hacky tho. 

 

You have any ideas on this? See codepen: 

See the Pen GROgKRO by luffyy (@luffyy) on CodePen

 

let difference = newX - lastX;

if (newX < lastX && difference < -100) {
  gsap.set(box, {
    text: symbols[Math.floor(Math.random()*symbols.length)]
  });
}

 

[OSUblake 18,533 Likes (Superhero)]

Yeah, that's probably the only way to do that due the ease making it go backwards for a bit.

 

BTW, GSAP has a wonderful random utility, so you can easily get a random symbol like this.

 

const symbols = ["T", "J", "Q", "K", "A", "🍕", "🍔", "🍟", "🌭", "🍿", "🥓"];
const randomSymbol = gsap.utils.random(symbols, true);

// usage
gsap.set(box, {
  text: randomSymbol
});