Jump to content
Search Community

CSSRulePlugin - clearing mods

Guest
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I'd like to know how to clear/cancel/revert all changes made by the CSSRulePlugin. The "clearProps All" method works well for a single element but since the CSSRulePlugin can make changes to multiple selectors, I'm not sure how to do the same thing here.

 

What I'd like to do: TweenLite.set(allMyAffectedElements, {clearProps: "all"});

 

Maybe it's quite simple, I just can't figure it out.

Link to comment
Share on other sites

clearProps isn't about clearing only the properties that a specific GSAP plugin affected (GSAP doesn't keep a centralized record of those things...that could cause memory problems) - it's just about clearing whatever inline styles you want. So if you say "all", it'll clear all the inline styles. For CSSRulePlugin, that's not really a thing but you have 2 options that I can think of:

  1. If you want to clear all the styles in that rule, you can simply set the rule's cssText to "". Like yourRule.cssText = "";
  2. If you want to revert only the changes that a particular tween made, you could just jump back to the beginning of that tween, like:
ver tween = TweenLite.to(..., {cssRule:{...}});
//then later...
tween.pause(0); //rewinds to the beginning and stops (reverts changes made by this tween)

Does that help? 

  • Like 1
Link to comment
Share on other sites

clearProps isn't about clearing only the properties that a specific GSAP plugin affected (GSAP doesn't keep a centralized record of those things...that could cause memory problems) - it's just about clearing whatever inline styles you want. So if you say "all", it'll clear all the inline styles. For CSSRulePlugin, that's not really a thing but you have 2 options that I can think of:

  1. If you want to clear all the styles in that rule, you can simply set the rule's cssText to "". Like yourRule.cssText = "";
  2. If you want to revert only the changes that a particular tween made, you could just jump back to the beginning of that tween, like:
ver tween = TweenLite.to(..., {cssRule:{...}});
//then later...
tween.pause(0); //rewinds to the beginning and stops (reverts changes made by this tween)

Does that help? 

 

Not sure that would work for me. My interface is a little demo for the plugin that allows me to enter values in multiple inputs to test my tweens. Every time I press submit a new tween gets generated, overwriting the old one.

 

I tween from computedStyles to the new ones. I can do this any number of times. That works well.

 

Here's the tween that gets generated every time:

cssRuleTween = TweenLite.fromTo(CSSRulePlugin.getRule(selector), duration, {cssRule: computedStyles}, {cssRule: tweenValues, ease: easeValue, onComplete: activateResetButton});
 
The chosen selector as well as the properties and values can change every time.
 
I need my reset button to wipe clean everything that was done up to that point and start fresh (equivalent of doing a page reload).
 
For #1 to work I guess I would have to keep track of everything that's been done up to that point and manually revert it back.
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...