tween add class name, but not tweening some properties?

[Andy]

hi!

 

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?

 

thanks,

Andy

[Jonathan]

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
      background-repeat:no-repeat;
      background-color:#111111;
      width:100px;
      height:100px;
}

#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?

[Carl]

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:

 

//css
.over {
  left:200px;
  top:200px;
}


//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"})

http://codepen.io/GreenSock/pen/Cuksn?editors=011

 

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

[Andy]

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)

.over{
// styles I want to change immediately
Background-position: 20px 0;
}

.overtween{
// 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,
Andy

 

I made a codepen to illustrate;

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

Edited June 25, 2014 by Andy