Jump to content
GreenSock

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

Timelinemax: add classes

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 11
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×