Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Andy

tween add class name, but not tweening some properties?

Recommended Posts

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
Link to post
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
      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? :)

Link to post
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:

 

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

Link to post
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)

.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 by Andy
Link to post
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.

×