Jump to content
Search Community

toggle className

helio 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

Hi. I would like to add class to my element when animation started, and remove class when animation is completed. 

var tl = new TimelineLite();
tl.from('#heroPreloader', 2, {onStart: onStart, onComplete: onComplete})
.from('#heroContent', 3, {autoAlpha: 0});

function onStart() {
  tl.set('#heroPreloader', {className: '+=preloader_show'});
}

function onComplete() {
  tl.set('#heroPreloader', {className: '-=preloader_show'})
}

But nothing is happened. Class not adding and not removing. Anyone tell me why?

Link to comment
Share on other sites

In cases like this it really helps to provide a demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

It should be pretty easy given the amount of code you have.

 

One thing that jumps out is that  

 

tl.set() is always going to get placed at the end of the timeline. So onStart you are telling the timeline to place the set() at the END of the timeline after all the existing animations in the timeline play. Same for the set() you trigger via the onComplete callback. Since set()s have no duration. both will get placed at the exact end of the timeline (not good).

 

I think you would do fine to just put those set()s in the timeline (not execute them via callbacks) but if for some reason you must do it that way, try just using TweenLite tweens like

 

function onStart() {
  TweenLite.set('#heroPreloader', {className: '+=preloader_show'});
}


function onComplete() {
  TweenLite.set('#heroPreloader', {className: '-=preloader_show'})
}
  • Like 1
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...