Jerky Tweens in IE

[kanderson450]

I'm having trouble with TweenMax and IE.  My usage is very basic at the moment, I'm only calling TweenMax.fromTo().  It works well in Chrome & Firefox, but in IE it is really jerky.  My supposition is that there's something wrong with my code but I'm not sure what.

 

https://github.com/kanderson450/react-gsap-issue

 

I've linked to a sample project on GitHub that illustrates the issue.  Sorry it was a little too complicated for CodePen.

 

To run the demo simply use the following commands:

npm install
npm start

Then check localhost:8080

 

The first component is a Table and the second component is a Video Player.

Click on any Table row to transition the Table out and bring in the Video Player.

Click the Button to transition out the Video Player and bring back in the Table.

 

Notice the Video Player transition in IE is not smooth at all.  That is what I'm struggling with.  Your guidance is really appreciated.

 

Tested on Windows 8.1 with IE 11.

See the Pen by kanderson450 (@kanderson450) on CodePen

[GreenSock]

I'm not familiar with React at all yet, but I hope to look into it soon. My understanding, though, is that one thing that makes React a bit tricky to deal with is that it mutates the DOM underneath you, meaning the element that you started with (and began tweening) might be completely deleted and a new element rebuilt in its place...whenever React decides it's "best". I wonder if perhaps that's the problem you're running into here. Like maybe GSAP is animating the properties correctly, but that element is swapped out for a different one by React and that one isn't animating properly because the reference fed to GSAP is the old one. Tough for me to say without React experience or know-how yet. 

 

Perhaps someone else here who has some React knowledge could chime in? 

 

Generally we much prefer that you provide a reduced test case in codepen if at all possible so that we can poke around and see what's happening. You wouldn't happen to have something like that, do you? 

[kanderson450]

Yes, React does abstract away the DOM and provides a Virtual DOM that makes re-renders really fast. However when using libraries, such as Greensock, that need to manipulate the DOM directly, they do provide an API and lifecycle hooks that let you get back to business as usual for all intents and purposes.

 

That's not to say that there couldn't be a React specific issue; it's entirely possible. I just haven't been able to pinpoint anything yet. It seems to work fine in Chrome and Firefox, but I.E. is struggling.

 

Yes I can try to make a simpler CodePen demo tomorrow. I hope I'm able to reproduce it.

 

In the meantime if anyone's curious, take a look at my GitHub repo.

 

Thanks y'all.

[OSUblake]

Doesn't seem jerky to me. More like styling problems.

See the Pen MeKOOE?editors=0010 by osublake (@osublake) on CodePen

[GreenSock]

Thanks for throwing that codepen together, Blake. Could you elaborate on what "styling problems" there are? When I inspect the DOM, it does seem like GSAP is doing exactly what it's supposed to (opacity is fading when the video exits), but visually the video doesn't fade in IE (it does in the other browsers). I'm trying to diagnose what's causing that exactly. It's weird because again, the value appears to be getting set properly the whole time; it's like a rendering issue or something. Any ideas? 

[GreenSock]

I even tried isolating that one fade with the same HTML and CSS (I think) without React and it seems to work fine in IE: http://codepen.io/anon/pen/oLbGeo (I slowed down the fade to really study it). It sure seems like React is interfering somehow but I can't identify exactly what's happening yet. Got any theories? I'm probably missing something obvious.

[OSUblake]

It's probably just React. Adding a slight rotation makes it go away.

See the Pen PzZEVQ?editors=0010 by osublake (@osublake) on CodePen

[Jonathan]

To get it to show in IE11 i had to open the code inspector. Then it showed like 30 seconds later. After refreshing a couple of times with the inspector open, it started to animate in on load. That was using the first original codpen Blake created above for kanderson450,

[kanderson450]

The first CodePen that Blake put together accurately represent what I'm seeing in my full GitHub sample project.

 

Blake's 1st CodePen showcasing the problem in IE: 

See the Pen MeKOOE?editors=0010 by osublake (@osublake) on CodePen

 

The problem occurs when the Video Player is transitioned out with a move to the left and a fade out.  Instead of a smooth move of the Video element towards the left, it nearly instantly is moved entirely to the left edge of the window and remains there until the duration completes.

 

 

 

For some reason this only happens in IE.

 

Blake's 2nd CodePen with slight rotation, no issues: 

See the Pen PzZEVQ?editors=0010 by osublake (@osublake) on CodePen

 

Adding that slight rotation seems to mitigate the issue.  So now the question becomes, where does this problem live? And what is it about the rotation workaround that seems to help?

[Jonathan]

Thanks for making those codepen examples Blake!

 

The slight rotation is probably helping offset the element while translating your element onto its own rendering layer. But i did not see any video markup in the examples. So that will be hard to tell what is going on without that video element for context.

 

Based on what you describe and your image. To me it looks like the CSS and markup is not setup right. IE has a really strict CSS and HTML parser. Your best bet is to first take the animating of the elements out of the equation. Then setup your CSS and HTML so that your video and table elements are in their final position. Once that passes muster in IE, Chrome and Firefox for the box-model. Then you can start animating your elements. IE's box model is really strict as well so you want to make sure your elements fit right by honoring the box-model or by using CSS box-sizing.

 

And for cross browser goodness i would animate a parent div of the table, and not animate the table element directly due to table issues in IE. I also noticed your using a span tag as the parent of your table. If your doing that then you should set that span's display property to block, since by default it is inline.

 

I also see no height or min-height set for your container class and or your span. No height is being inherited either. Which can cause clearing issues and the proper box-model definition of your nested elements. So you also might want to look into using some type of CSS clearfix for your containing elements.

 

If you can please setup a limited codepen that is close enough to the HTML markup and CSS with both the video and table. IE is a pain to debug. But by having both those elements in place we can see what affects what. Since the proper HTML and CSS can a have a great impact on how elements are rendered, especially in a Microsoft browser.

 

 

Thanks

[kanderson450]

Hi Jonathan,

 

The video element is in both of Blake's codepens at lines 122 & 123 of the JavaScript respectively.  Let me know if you're able to find it.  Thanks!

[Jonathan]

Hello, kanderson450,

 

The JS on line 122 & 123 is just one part of the puzzle. I am not seeing the actual HTML rendered output for the video. Without seeing both the table and video in the HTML when rendered will make it more difficult to debug and test whats going on!

 

[kanderson450]

This is what I'm seeing in the IE Developer Tools: