Jump to content
Search Community

Position information is incorrect in last animation

Trev 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

Hi Greenies

I have successfully designed my animations of lines of skills (except perfection in portrait) 

As the last effect I am loading a graphic of my business card ("#ezpc") and want it full screen

The start position (except in 1920x1080) appears in the wrong position

The destination Left & Top are also appearing in the wrong position

When I debug the code the start and stop positions are correct but the graphic has it's own mind!

I am sure that I am not "clearing" properly or perhaps I cannot use the same #demo container

You may see my addGraphic() function attempting to kill the previous Tweens but that stops the first bit 

I know the majority of the code is quite unreadable due to it's complexity but can anyone give me any tips about resetting the page somehow prior to the loading of the graphic? 

The code is on CodePen as: http://cdpn.io/xHytr (full page) or

See the Pen xHytr by thorntontf (@thorntontf) on CodePen

Thanks for any help you can give



Link to comment
Share on other sites



It would be best if you could take some time to boil this down to just the key elements.

We really only need to see code that:


  • determines the final, centered position of the graphic in question
  • animates the final graphic

and if necessary the code that reloads the page on resize.


Right now there are just too many variables and calculations to sort through and testing the animation requires us to watch things animate that aren't necessary and take time.


The simpler the codepen is the quicker we can get to the bottom of the issue.



  • Like 1
Link to comment
Share on other sites

Carl - I had a feeling that you took the code from the pen on CodePen

I think you are looking at my live code with all the text items flowing across - I have tried many ties now to make a Pen with just the item in question but cannot get it to work without the surrounding code. I have just spent the whole day trying to strip the rest. Every time it crashes the whole page as it's heavily inter-related.

Could you tell me how you view the code when it's posted (ie. on CodePen or via my site) and I will try again tomorrow.

Thanks for looking though.

Have a good evening


Link to comment
Share on other sites

I only saw links to Codepen. Not sure what or where your site is. 


Codepen is definitely the best tool for allowing us to easily troubleshoot your issues.

Unfortunately if your code is so complex that you can't reduce it to just the parts necessary to illustrate what the problem is, I don't know how we are going to figure it out.


Some of the brightest developers actively read these threads eager to help folks.

Perhaps its better to start from scratch and just get as far as you can with that one thing you are having trouble with. I'm confident at the very least we can point you in the right direction once its possible to clearly assess what and where the issue is. 

  • Like 1
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...