AsKadir Posted January 28, 2020 Share Posted January 28, 2020 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 More sharing options...
ZachSaucier Posted January 28, 2020 Share Posted January 28, 2020 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. Link to comment Share on other sites More sharing options...
AsKadir Posted January 28, 2020 Author Share Posted January 28, 2020 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 More sharing options...
ZachSaucier Posted January 28, 2020 Share Posted January 28, 2020 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 More sharing options...
AsKadir Posted January 28, 2020 Author Share Posted January 28, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now