Jump to content
GreenSock

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

Handling classes

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();

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

        scene
            .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 post
Share on other sites

I'm trying to, but it's working in the example, yet in my version it seems to reapply the final classes, once it's rolled back over the start and the onComplete and onStart events don't refire so can't use those. There's gotta be something

 

See the Pen Jomdmv by anon (@anon) on CodePen

Link to post
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();
scene.add(tl).add(tltwo);
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 post
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 post
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:

http://greensock.com/forums-support-files/nestedSet.mp4

 

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 post
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 post
Share on other sites

Thanks for the demo SigSam. Very helpful. We are looking into the transforms + className issue further. Stay tuned.

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

  • Recently Browsing   0 members

    No registered users viewing this page.

×