An instant flare at the bottom, a black strip on top!

[makis2404]

Preface

I have an Odyssey in the "space" of D3.js, until I found GreenShock.

I wish have found it earlier! I didn't need the (big?) data, just the animation!

 

Chapter 1

Here is the problem of my gsap-animated page.

 

When the page opens there is a black strip on top of image instead of 
   

 $("#field"), {scaleY: 2}

 

(If you replay, it corrects).

 

After 5 sec  begining  the animation,  an instand flare fires  in frond and under the tank!

 

See the Pen PBKdRY by makis2404 (@makis2404) on CodePen.

Edited July 26, 2018 by makis2404
streep insteed of strip

[Acccent]

Hi makis,

 

Thanks for the codepen. Could you post a screenshot of what you're seeing? I'm not sure what I have is normal or not. I don't see any flare

[makis2404]

try it on jsbin. The flare can't be screeshot -ed. It is just an instant think. But the black strip yes. It is the black rectangle over the bird.

[makis2404]

Here is the bit of sec  that the black rect doesn't fill the horizontal level of the image and there is a fire in front and under the tank that looks like a flare!!!

[Carl]

Thanks for the demo. Its always good to work with a reduced test case, so I removed all the extraneous stuff.

 

See the Pen qyPEBP?editors=1010 by GreenSock (@GreenSock) on CodePen.

 

I'm able to see that on initial page load, sometimes, you will see a big black bar (as if the image is being pushed down), however when you press the "run" button in codepen it renders correctly (small, equal height bars on top and bottom of image). Still looking into why this is happening.

 

As for your flare, isn't that just part of the image?

https://greensock.d.pr/USv5cV

 

[makis2404]

It is like a flash on camera, a couple of seconds after the tank begins!

[GreenSock]

That's because the image hasn't finished loading when that JavaScript runs, so it literally has no height at all, thus transformOrigin:"50% 50%" ends up basically at the very top edge (because again, there's no height, thus 50% of 0 is 0). Either use px like transformOrigin:'550px 157px' or set up an event listener to delay the execution of the code until the image has finished loading. Does that clear things up? 

[makis2404]

Thank you very much! Yes this is the solution of the problem!