Jump to content
GreenSock

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

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

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

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 by makis2404
streep insteed of strip
Link to post
Share on other sites

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 :)

Link to post
Share on other sites

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.

Χωρίς τίτλο.jpg

Link to post
Share on other sites

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!!!

Χωρίς τίτλο1.jpg

Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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? 

  • Like 4
Link to post
Share on other sites

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

Link to post
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.

×