Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pils

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

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

Link to comment
Share on other sites

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)]
  });
}

 

Link to comment
Share on other sites

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
});

 

  • Like 1
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.
×