Jump to content
Search Community

tween add class name, but not tweening some properties?

Andy test
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



I'm doing something a bit like this;


TweenMax.to(element, 0.3, {className:'+=over'});
where the .over class has different colour, position etc, but also different background-position.
My problem is, i'd like the background-position to not tween, while the rest of the properties do.
is there a way to add an exception to the tween?
Any ideas?
Link to comment
Share on other sites

Hello Andy, and Welcome to the GreenSock Forum!


What you could do is set your default background-position on your element. Then have your .over class have the same background-position property. And then it can be animated in and out with GSAP, without affecting your background-position


Try using the non-shorthand CSS background properties, and set them separately. Or you could use the shorthand background property, but you would have to apply it to both CSS rules ( the element and the .over class for the element ).


So if your HTML was this:

<div id="box"></div>

The CSS is this:

#box {
      background-image: url("image/myimage.jpg");
      background-position: 0 0; // set the CSS property on element

#box.over {
      background-position: 0 0;  // this stays the same
      background-color:#CC0000; // this changes
      width: 300px; // this changes
      height: 300px; // this changes

Then when GSAP animates the class in and out you know that the background-position will not change since it is the same value in both of the CSS rules.


Does that help? :)

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Sorry, currently there is not a way to make  exceptions for one or a group of properties within a className tween.


Although I haven't tested this extensively and nots very elegant, you could try to create a conflicting tween that tweens the background position to its current position. Here is a little example:


.over {

//the over class should tween the top to 200 but I'm overwriting it
TweenLite.to(".box", 1, {top:0})
TweenLite.to(".box", 1, {className:"+=over"})



If at all possible, it is recommended that your .over class only has the properties and values that you want changed.

Link to comment
Share on other sites

Ah I see what you're saying. I'm not sure I was very clear about what I needed (sorry!)

The problem is, I /do/ want the background to move, I just don't want it to animate.

I think I've worked out a way to do it. :)
I'll need 2 over classes instead of one, .over and .overtween (hopefully I can think of a better classname :s)

// styles I want to change immediately
Background-position: 20px 0;

// styles I do want to tween

Then I can do;
TweenLite.to(div, 0, {className:"+=over"});
TweenLite.to(div, 0.5, {className:"+=overtween"});

Make sense?

Is there a better way?

Thanks again,


I made a codepen to illustrate;

See the Pen Jyzha by agsystems (@agsystems) on CodePen

Edited by Andy
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...