Jump to content
Search Community

Handling classes

SigSam 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

I'm struggling to apply and remove classes. This is the final scene on a timeline and you can scroll up and down which scrubs the paused timeline. I don't know if i'm using it correctly. I've also tried with .to but I don't want it to try and handle the animation, just changing classes. This works almost as desired, when returning, the class is removed, but only temporarily (until the next previous slide) and then the class is unexpectedly added back.

 menuReturn: function() {

        var doc = document.documentElement;

        var scene = new TimelineLite();

            .add("start", 0)
            .add("end", 5);

            .set(doc, {
                css: {
                    className: '-=menu-active'
            }, "start")
            .set(doc, {
                css: {
                    className: '+=menu-active'
            }, "end")

        return scene;


Had great help here last time, so thanks in advance!

Link to comment
Share on other sites

Thanks, Diaco. I'm struggling to understand the issue.


SIgSam, is it necessary to add a reversed version of tl to scene to replicate the issue? 

var tltwo = tl.reverse();
Its certainly make it more confusing to understand what is happening and what the desired results are.
A simple demo that replicates the problem will really help us help you. I know you are trying.
  • Like 1
Link to comment
Share on other sites

Sorry that's just a pen I was using to try and quickly recreate the bug as it maybe because of the nested timelines. The classes are added and removed at when they should be but then also they do it when they shouldn't, and I was trying to make a reduced case without spending too much time on it. For some reason at the very start it reapplies classes that GSAP hasn't even been given, but was previously on the element. Does GSAP store the classes then reapply them or something similar? I've got it working for now, but still has it's quirks so I will return to it on refactoring and see if I can make a proper reduced case.


Thanks for your help guys. Hopefully will write an article eventually on the way I'm using GSAP once everything is correct. I love being able to nest timelines.

Link to comment
Share on other sites

Nested timeline's that have set()s at time(0) are a little tricky because GSAP does in fact need to manage how elements in nested timelines should render when the parent timeline's playhead is at a time BEFORE the nested timeline begins. That's a mouthful.


I think this video will help a little:



If you still have trouble with your className tweens, just get us a simple demo and I'm sure we can help figure it out.


Oh, and I saw that you were using an onReverse callback in your demo, that callback doesn't exist.

  • Like 2
Link to comment
Share on other sites

I'm just amazed you even made a video, but definitely helped try bring some context to the issue, but I'll have to get a demo over.


I've managed to ease some of it's wild className death throes. Could you link to that codepen you used in the video? I think it maybe struggling with applying/removing classes to the same element at the same time. The weird starting className changing seems eased by:

  timeline.set(doc, {css:{className:'-=menu-active'},immediateRender: false}, 0);
  timeline.set(doc, {css:{className:'+=page-visible'}, immediateRender: true});
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...