Jump to content
GreenSock

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

Scaling table causes gap in tds

Recommended Posts

Scaling table causes tiny gap between <TD>'s.

Any ideas?

 

 

Share this post


Link to post
Share on other sites

Hey Roddy,

 

Can you please create a minimal example of the behavior that you're talking about? From what it sounds it doesn't seem to be related to GSAP, but it would really help us figure out exactly what's going on. 

 

 

Share this post


Link to post
Share on other sites

Thanks for the demo!

 

This boils down to a miscalculation in Chrome. In Firefox is looks great, as it does at a scale of 0.5 in Chrome (for me at least). 

 

The trick is to work around this bug is to set the perspective to something slightly different (like 999px compared to the default of 1000px). You should be able to do that in GSAP using the transformPerspective property, but the below doesn't seem to work in this case (but setting the transform manually to transform: perspective(999px) scale(0.786); works just fine).

 

resizeTimeline.to('#ani-holder', 0, {transformPerspective: "999px", scale: 0.786, transformOrigin: "50% 50%"});

Setting perspective: 999px; on the parent doesn't seem to fix it either. Chrome be weird.

 

I've asked Jack to look into it. So far he said "Hm, never seen that before" :D 

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the quick response. Though, doesn't seem to do the trick. I have updated.

Tell Jack that Dave Rodman says hello!

See the Pen yLBOOpq by Roddyguy (@Roddyguy) on CodePen

Share this post


Link to post
Share on other sites

I understand that it doesn't currently work in the latest version of GSAP. I said it should work :) For some reason when GSAP converts the transforms to what should be an equivalent matrix, it doesn't fix the issue in Chrome. Maybe @GreenSock can give us more info on that.

 

The good news is that in the next version of GSAP, matrices are no longer created for transforms, so the above code would fix the bug. 

 

In your project it might be best to use an onComplete for the .to() in order to set the transform to the working one in my last post. 

 

See the Pen VwZajqQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Alternatively, you could animate this one piece in non-GSAP code for now (at least until the next version of GSAP comes out). 

  • Like 1

Share this post


Link to post
Share on other sites

Unfortunately, I am animating the scaling. Thanks for trying to help me.

Share this post


Link to post
Share on other sites

I think I found something that works. 

var resizeTimeline = new TimelineMax();
    resizeTimeline.to($ani_holder, 0, { perspective: 999, x: x_pos, y: y_pos}).addCallback(startAni, 0);

The above "perspective: 999" for some reason fixes the actual animation below. Then I use your OnComplete suggestion in order to fix the final rendering. (it renders those gaps when it finishes if I don't) 

 

No idea why this works, but it seems to do the trick.

    tl.to($feathers, 6, {rotation: '180'}, 'start')
        .to($background_cover, 8, {left: '300%'}, 'start')
        .to($frame_border, 3, {scale: 1}, 'start+=1')
        .to($frame_border, 3, {alpha: 1}, 'start+=1')
        .to($frame_background, 3, {perspective: 999, scale: 1}, 'start+=2')
        .to($frame_background, 3, {alpha: 1, onComplete: function() {
                document.querySelector(".frame-background").style.transform = "perspective(999px) scale(0.999)";
            }}, 'start+=2').addCallback(fixBackground, 0)
        .to($h1, 3, {scale: 1}, 'start+=2')
        .to($h1, 5, {alpha: 1}, 'start+=2')

 

The object "$ani_holder" holds my entire animation. I scale this using window resize (as to be responsive).
Then the $frame_background is the table that I scale from 0, and had the issue with.
 

 

  • Like 1

Share this post


Link to post
Share on other sites

Problem solved. Thanks so much for your help. I wouldn't have solved it without the information you gave me.

  • Like 1

Share this post


Link to post
Share on other sites

I know it's solved, but just to chime in - if your goal is to add a perspective(999px) to the transform while it's animating, you could try doing an onUpdate:

tl.tl(element, 2, {scale:0.7, onUpdate:function() {
  		element.style.transform += " perspective(999px)";
	}
});

Just a thought. It could be made even easier with a helper function that'd automate some of that. 

 

Anyway, happy tweening!

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

That would be a new subject altogether. But thanks for trolling. 

Share this post


Link to post
Share on other sites
2 hours ago, Roddy said:

That would be a new subject altogether. But thanks for trolling. 


Might want to check someone’s history, skill set, and experience before you accuse them of trolling. 

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

Hah. I probably shouldn't have used the word "trolled". A bit tongue in cheek.

 

To be clear, we were talking about one issue, and then I am sure OSu was only trying to be helpful -- but all he had to say was "Did you think about using CSS Grid instead of tables." I guess it was the way he posed the question - "Why are you even using a table?" that seemed a  bit off-putting. It also seemed a bit off topic (especially after we had solved the issue). I was much more interested in the reason those lines would even show up. Why I've decided to use a table is besides the point. This table is only one element among many and there was a reason I did it this way.

 

No offense to OSUblake. 

Share this post


Link to post
Share on other sites

Now that I think more about it --

History, skill set, and experience aside - Shaun's correct that I should not have called OSU a troll. I had a very stressful day yesterday, and was a bit sensitive. Not an excuse and I apologize for my quick retort.  

  • Like 4

Share this post


Link to post
Share on other sites
1 hour ago, Roddy said:

I guess it was the way he posed the question - "Why are you even using a table?" that seemed a  bit off-putting. It also seemed a bit off topic (especially after we had solved the issue). 

 

Sorry if it came off that way. I brought up CSS grid because animating tables can be very problematic. Tables were not designed with animations in mind, which is why you still have to use attributes to get some table elements to display correctly. 

 

And there is usually more than one way to solve a problem. Using CSS grid was part 1 of my recommendation. You called me a troll before I got to part 2 below.

 

1 hour ago, Roddy said:

I was much more interested in the reason those lines would even show up.

 

The gaps are caused because of rounding. An 81px wide element at a scale of 0.786 is 63.666000000000004 pixels. Not exactly a whole number, so you might see artifacts bleeding through. To get rid of those gaps, you can use will-change: transform; in your css. The browser can rasterize (take a snapshot) of the layout before scaling gets involved. 

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

 

 

 

  • Like 7
  • Thanks 1

Share this post


Link to post
Share on other sites

You can also get rid of that gap line by adding z: 0.01 on your tween with the transform perspective function.

 

Its like using will-change: transform or having transform: translateZ(0) in your CSS.

 

Its the same like we used to do back in the day with crappy IE, by adding zoom: 1.

 

Perspective fixes that Chrome bug, which is really not a bug, but Chrome requires that CSS 3D Transform helper property perspective and the transform perspective function so it can render correctly. Same goes for other helper properties... transform-style and backface-visibility.

 

That just my two "non trolling" cents.. or is it ?  :)

  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×