Jump to content
Search Community

How can I clear gsap inline style?

AsKadir test
Moderator Tag

Recommended Posts

Hi!

I have a problem with inline styles,

Can I clear only gsap inline styles?

Because I have my own inline styles and they are all dynamic,

after tweening I want to return them.

 

For example:

I have tabs, and when user click on navigation item, it will get new background color,

and old should be cleared and back to its old background color.

And old background color can be inside inline styles.

 

Can you help me, please?

Thanks in advance.

Link to comment
Share on other sites

6 minutes ago, ZachSaucier said:

Hey Aslan.

 

You can specify which properties you'd like to clear inside of clearProps. For example clearProps: "backgroundColor" or clearProps: "backgroundColor, color" for multiple properties.

For example:

<h5 style="color: red;"></h5>

<h5 style="color: yellow;"></h5>

and when user click on first h5 it will tween its color to blue,

then user click on second h5 and it also tweens to blue,

but unselected previous h5 should return its old color, here it red.

I understand that I can write previous color inside my timeline,

but my colors are dynamic and by the way it can be as inline style and also can be as className.

Link to comment
Share on other sites

I think including a minimal demo of your setup would be helpful :) 

 

Most likely you have to write the logic for this sort of thing yourself, i.e. something like this:

const h5s = gsap.utils.toArray(document.querySelectorAll("h5"));

// Set things up
h5s.forEach(function(elem) {
  elem.origColor = gsap.getProperty("color");
  
  elem.addEventListener("click", handleClick);
});

function handleClick(e) {
  // This loops through each of them, but you may want to just animate the previous one instead.
  // To do that, you'd need to keep track of the previously clicked element using a variable
  h5s.forEach(function(elem) {
    gsap.to(elem, {color: elem.origColor});
  });
  
  // Make the clicked one blue
  const elem = e.target;
  gsap.to(elem, {color: 'blue', overwrite: true});
}

 

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

I think including a minimal demo of your setup would be helpful :) 

 

Most likely you have to write the logic for this sort of thing yourself, i.e. something like this:


const h5s = gsap.utils.toArray(document.querySelectorAll("h5"));

// Set things up
h5s.forEach(function(elem) {
  elem.origColor = gsap.getProperty("color");
  
  elem.addEventListener("click", handleClick);
});

function handleClick(e) {
  // This loops through each of them, but you may want to just animate the previous one instead.
  // To do that, you'd need to keep track of the previously clicked element using a variable
  h5s.forEach(function(elem) {
    gsap.to(elem, {color: elem.origColor});
  });
  
  // Make the clicked one blue
  const elem = e.target;
  gsap.to(elem, {color: 'blue', overwrite: true});
}

 

Thanks!!!!!

That's exactly what I need!

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...