Jump to content
Search Community

Animating className to/from

ahren 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

Obviously we can animate between classes by either adding or removing them... but can we do both, without affecting other classes attached to the element?

 

For example, if I have:

<div id="my-div" class="item position-1"></div>

Can I replace position-1 with position-2 ?

 

I also note that CSS3 transforms are supported, but all vendor prefixes are required -- so how would this work with IE<9?

 

As a side note, I'm working with:

* VERSION: beta 1.9.6
 * DATE: 2013-05-07
 
So if any of these issues have been addressed in the latest versions I'm more than happy to upgrade.
Link to comment
Share on other sites

About the class 'swap': I don't think it's supported directly, but I'm not too sure. Someone more knowledgeable should swing by at some point.

 

In terms of CSS3 transforms, both 2D and 3D transforms are definitely supported and definitely don't require any vendor prefixes. You should be able to do things like

TweenMax.to(target, 1, { x: 100, z: 20, rotationX: 50, scale: 2 });
without any prefixes - GSAP handles all that for you, and even tries to apply the transforms as IE filters wherever they are available. If you are having trouble with a particular transform, let us know and we'd be glad to sort it out for you.

 

Because of the nature of web development, and the fast pace at which browsers are evolving, it would be a good idea to keep on top of updates to GSAP. Jack is working his butt off to make sure that GSAP performs as smoothly as possible and that all the browser quirks users encounter are handled.

  • Like 2
Link to comment
Share on other sites

Yeah I know the CSS3 transforms work well in normal situations, however I mean when the transform is defined by the class(es) you're tweening between.

 

For example, 

 

.position-1{

  -webkit-transform: rotate(15deg);

}

 

.position-2{

  -webkit-transform: rotate(-10deg);

}

 

This works (on webkit), but all vendor prefixes are required for a cross-browser solution, so I'd also have to figure out the matrix for it. This may have been addressed in a later issue, which wouldn't surprise me - you're right, Jack has been working hard and for the benefit of everyone who uses the web! Very grateful.

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

Sure you can, one of the many features of the CSSPlugin is the ability to add and remove classes with className. Although I'm not sure id this can be done with a fromTo() instance, perhaps two different to() instances or a timeline, inserting two tweens at a specific label position, if the timeline has more tweens in it. Like this:

//Two different tweens at the same time
TweenMax.to(element, time, {className:'-=class1'});
TweenMax.to(element, time, {className:'+=class2'});

//A timeline with two to instances positioned at the same label

var tl = New TimelineMax();

tl
    .add('classChange')//insert label
    .to(element, time, {className:'-=class1'}, 'classChange')//add the tween at the 'classChange' vlabel position
    .to(element, time, {className:'+=class2'}, 'classChange')//this will tween at the same time since it is at the same position, given by the label

You can see a simple example here:

See the Pen tHBAE by rhernando (@rhernando) on CodePen

 

As for the vendor prefixes you don't have to worry about that, the CSSPlugin does all the work under the hood.

 

It'll be a very good idea to update the files, also you can use cdn links. You can check all those links in the get GSAP button at the top-left corner of the screen.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks guys.

 

Have you tried just doing the string conversion yourself?:

TweenMax.to(element, 1, {className:element.className.split("position-1").join("position-2")});

That just swaps position-2 for position-1, without touching any of the other class names. You could get fancier with a RegExp, but hopefully this at least demonstrates the concept. 

 

Happy tweening!

  • Like 2
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...