[Scaling table causes gap in tds]

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.  

[Scaling table causes gap in tds]

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. 

[Scaling table causes gap in tds]

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

[Scaling table causes gap in tds]

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

[Scaling table causes gap in tds]

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.
 

 

[Scaling table causes gap in tds]

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

[Scaling table causes gap in tds]

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

[Scaling table causes gap in tds]

How's this? FYI - If you don't run the scaling script, the small space doesn't show.

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

[Scaling table causes gap in tds]

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

Any ideas?

 

 

[Phone Performance]

OK. Thanks.

[Phone Performance]

Hi Guys,

I've built this animation of a pinata exploding. It looks great on desktop, but really, really sluggish on IPhone and IPad. Does anyone have any tips on improving performance? Is it my code, or just too many tweens going on at once?

 

Thank you,

Dave Rodman

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

[Possible to scale pathDataToBezier]

I may have read my animation wrong because I was also rotating an object and might have mistaken it for the motion of the path. I tried to delete my previous post, but did not have the option.

 

If someone could clarify that it is possible to scale the motion path, that would be great.

 

Thank you.

[Possible to scale pathDataToBezier]

I'm using the pathDataToBezier to create a path for my tween to follow. All is good...

 

...except I would like to be able to scale the path for responsive screen sizes.

 

I have not figured out a way to do this. I've tried to scale the path smaller before calling "var path = MorphSVGPlugin.pathDataToBezier", but there seems to be no effect.

 

Any ideas? Am I missing something?