Jump to content
GreenSock

peterPotter

There appears to be a bug when TimelineMac reverses DOM elements

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 have a form with some text fields, a select list, and a submit button.

 

I am simply passing the form as a jQuery object to TimelineMax, so that TimelineMax can animate all the form's DOM elements:

timelineMaxAni.staggerTo($(form), aniSpeed, props2, 0.04); 

Everything is fine so far.

 

Then later, I do a reverse on the timeline:

timelineMaxAni.reverse();

 

The reverse animation runs fine, too.

 

The Problem:

The select list drop-down shows up under the submit button after the timeline reverses. And no matter how much z-index I add on the select list or the submit button, the submit button continues to be above the select list drop down. This problem only occurs after the timeline reverses.

 

Look at the attached screenshot. It shows the drop-down from the select list under the submit button.

 

 

post-5007-0-78463300-1383263119_thumb.png

Link to comment
Share on other sites

Hi Pete,

 

Mhh I see no screenshot on your post.

 

Could you set up a codepen or jsfiddle in order to see this?, or perhaps a live page?.

 

Just a blind suggestion, but try staggerFrom perhaps that could help.

 

Rodrigo.

Link to comment
Share on other sites

Hi RHernando, I just uploaded the screenshot again. It is attached to the original post above.

 

Could you set up a codepen or jsfiddle in order to see this?, or perhaps a live page?.

 

 

Well, that would take a bit of effort to reproduce. I will eventually if all else fails.

 

Just a blind suggestion, but try staggerFrom perhaps that could help.

 

I can't use staggerFrom because it is a completely (the opposite of) different animation from staggerTo, and I need staggerTo. My animation is working perfectly fine. The only issue is what I noted in the post above.

Link to comment
Share on other sites

Hi,

 

I'm not sure if I can offer anything else with just that, sorry.

 

Could you describe how the animation goes?, You're passing all the form children in $(form) or that's the entire form?, any a chance you could post the link to a live page?. If not copy paste the part of the code involved in this issue (form's HTML, form's CSS and Timeline JS).

 

Rodrigo.

Link to comment
Share on other sites

With just one screenshot like that it's kind of impossible to diagnose. We really need a live sample to inspect and tweak if we're going to figure it out. Someone is going to have to make a demo, and you've already got the code ;)

 

 

If you really can't post a link to the live site or make a reduced test case, could you at least post some relevant HTML, CSS, and the complete TimelineMax call (e.g. what is in props2)? Are there any other tweens or manipulation of the form prior to reversing? Is this occurring on all browsers?

  • Like 2
Link to comment
Share on other sites

Sorry about not posting enough code earlier.

 

The project is not online, but the code below illustrates the issue:

 

The HTML:

<form id="submitForm">
<input type="text" class="form-control" id="title" placeholder="Title:">
<input type="text" class="form-control" id="message" placeholder="Message:">
<select>
  <option value="item1">Item 1</option>
  <option value="item2">Item 2</option>
  <option value="item3">Item 3</option>
  <option value="item4">Item 4</option>
</select>
<button>Submit</button>
</form>

 

The JavaScript:

 var twiAni = new TimelineMax ();
    twiAni.staggerTo($("#submitForm").children(), 0.4, {y:"-=100"}, 0.04);

// And then later, the reverse code:
twiAni.reverse(); 

Again, the problem is that after the reverse, the submit button is above the select list drop-down items.

Link to comment
Share on other sites

Using the code you posted I don't see anything wrong:

 

See the Pen vHsqd by rhernando (@rhernando) on CodePen

 

Please fork and play with it in order to accommodate your scenario and the issue you're having.

 

Rodrigo.

Link to comment
Share on other sites

Okay, now that we have established that TimeLineMax is working with that barebones setup, the last bit I left out was this:

 

I am using the Selectize jQuery plugin on the select list. I couldn't add it to the CodePen example, but here is the external js link:
http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js

 

And this is the selectize JS code to add to the example:
 

$('select').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});

Add these to the CodePen example and let's see how it goes.

Link to comment
Share on other sites

Done. It doesn't look pretty but still works as it should.

 

Check the link.

Link to comment
Share on other sites

Thanks much. The submit button is moving, though. It should stay in place.

 

So, we have to get the drop-down list in the example to not push the submit button down. The submit button has to stay in place.

 

BTW, I am wondering why the submit button is moving in this example. I have never seen that.

Link to comment
Share on other sites

Basically because the submit button is a form children and that's the selector used in the tween:

var twiAni = new TimelineMax ();
    twiAni.staggerTo($("#submitForm").children(), 0.4, {y:"-=100"}, 0.04);

All the form's childrens are the tween's targets, so you have to select the childrens that aren't the submit button, pretty easy with JQuery.

 

As for the button being pushed down by the select my best guess is that the issue has to do with the style modifications made by the plugin.

 

You can download the codepen by clicking in the share button and then in export .zip button, so you can play around with it locally.

 

Is updated with the button not being animated.

 

Rodrigo.

Link to comment
Share on other sites

No, I wasn't saying to not tween the submit button. I was saying that the drop-down from the select list is pushing the submit button down when it is expanded, and that is not normal. 

 

You can only see the problem I am here for if the select list does NOT push the submit button down. When the select list expands (as with all the examples on the selectize page), the select list works like a normal drop-down menu: it displays over the other items below it without moving the other items.

 

Right now we cannot see the issue because in the CodePen example, the select list is pushing the the submit button out of the way, instead of displaying the drop-down list over the submit button.

 

Do you understand the problem?

Link to comment
Share on other sites

Okay, I just reproduced the problem on CodePen.

 

I will post the CodePen link in a couple minutes.

Link to comment
Share on other sites

Here is the CodePen example that shows the exact problem. Simply click on the select list after the animation completes:

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

 

Note that if you remove the TimeLineMax code, the select list drop-down works fine (it is above the submit button). But only after the reverse animation runs does the problem occurs.

Link to comment
Share on other sites

Aha!!! now we're cooking mate!!

 

My best guess is that the plugin might be a cause of this.

 

Easy as pie, just use clearProps and you're done, like this:

var twiAni = new TimelineMax ({onReverseComplete:clearProps});
    twiAni.staggerTo($("#submitForm").children(), 0.4, {y:"-=150"}, 0.04);

// And then later, the reverse code:
TweenLite.delayedCall(2, function(){twiAni.reverse();});

function clearProps()
{
  TweenLite.set($("#submitForm").children(), {clearProps:"y"});
}

You see why we always ask for a live and reduced sample? ;)

 

Best,

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Ah, I thought this might have been related to a custom select replacement.
 
I can see the problem now. The transform style added by the tweens to move the elements, is giving all of the elements a stacking context, which in turn means the submit button has a higher automatic z-index than the root element for the selectize. The selectize root element only has position: relative to contain its absolutely positioned elements, which isn't enough to force it above the submit button once it gains its stacking context.
 
The fix is easy, just add the following CSS:

.selectize-control {
    z-index: 1;
}
  • Like 4
Link to comment
Share on other sites

Excellent, Rodrigo!

 

That fixed the problem. Thanks very much for sticking with it and for solving the problem.

 

What exactly does clearProps do anyway?

  • Like 1
Link to comment
Share on other sites

Yeah, providing an accurate codepen definitely helps us assess the problem better. It looks like multiple solutions have surfaced simultaneously.

 

Another thing I found was that if you animated ONLY the elements that need to be animated there really isn't an issue at all. Using $("#submitForm").children() is a bit messy as it selects your br tags

 

If you animate just the items that need animating like so:

twiAni.staggerTo(["#title", "#message", $("#selectList").parent(), "#submitBtn"], 0.4, {y:"-=150"}, 0.04);

There doesn't appear to be any issue or need to clear anything at all. 

 

http://codepen.io/GreenSock/pen/yhefa

 

Excellent work Rodrigo and Jamie.

  • Like 2
Link to comment
Share on other sites

clearProps removes any or all inline styles set by GSAP

 

 

clearProps - A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes.

//tweens 3 properties and then clears only "left" and "transform" (because "scale" affects the "transform" css property. CSSPlugin automatically applies the vendor prefix if necessary too)
TweenLite.from(element, 5, {scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

  • Like 1
Link to comment
Share on other sites

Thanks very much for explaining the issue, Jamie. Your explanation sounds spot on. 

 

I didn't try your solution because i tried changing the z-index previously and it did not work. But I will give it a go.

 

The clearProps solution worked after I tried it. I did not see your post before I attempted the clearProps solution.

Link to comment
Share on other sites

Thanks for extra bit of information, Carl. I agree that .children could be messy when there are other DOM elements besides the target elements that are children to the form tag. I will make of this.

 

And thanks for the clearProps explanation. Good to know.

  • Like 2
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.
×