Jump to content
Search Community

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

makis2404 test
Moderator Tag

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 comment
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 comment
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 comment
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.
×
×
  • Create New...