Jump to content
GreenSock

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

Timelinemax: add classes

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 want to add a class to an object on a specific position in the timeline.

tree.add($('#map-container').toggleClass('show-map'),3);

didn't work. (tree is a timeline)

 

How can I make something like this?

Thanks in advance: Thomas131

Share this post


Link to post
Share on other sites

Hi,

 

What you're looking for is a TimelineLite/Max method call . 

See the Pen qpsno by bassta (@bassta) on CodePen

- here is a simple codepen how to use it. Here is the code:

 

tree.call(function() {
    //addClass, toggleClass, or your custom logic.  
    $('#map-container').addClass("red");
}, null, null, 2);
  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Hello,

THANKS for answering! And how to define another callback on reversing the animation? I also found out, that this didn't work when the timeline is played multiple times.

 

Another time thanks in advance: Thomas131

Share this post


Link to post
Share on other sites

Hello,

I think I've found an other way by looking into the source:

tree.add(TweenMax.to(function(){},0,{onComplete:function(){$('#map-container').addClass('show-one').removeClass('show-two').removeClass('show-tree').removeClass('show-four');}, onReverseComplete:function(){$('#map-container').removeClass('show-one');}, immediateRender:false}));

Now, reversing is possible, but it pauses the animation.

 

Another information, that is maybe helpfull for helping: I'm also using Tweendeck

 

Thanks for helping in advance.

Edited by Thomas131

Share this post


Link to post
Share on other sites

I might be misunderstanding something here about your goal, but couldn't you simply do this:? 

tree.set("#map-container", {className:"+=show-map"});

Remember, CSSPlugin allows you to animate between classes, and you can use "+="/"-=" prefixes to do relative values. 

  • Like 12
  • Thanks 1

Share this post


Link to post
Share on other sites

Hello,

Thank you, user GreenSock!!!

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×