Jump to content


Irregular error on scale

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

Hello again,
I have been building my portfolio site and im very nearly there! I have an issue on my home page at http://www.mmurad.com

In Chrome the "hellos" on the left are supposed to rotate and scale up but sometimes (not always so you may need to refresh a few times to see it happen) the scaling just stops and I notice the sizing on the other animation in the background wecomes weird as well.

Any idea why this is happening?

Link to comment
Share on other sites

Moral of the story: Seems my mistake was to tween both scale and fontsize. Removing fontsize seemed to fix the isse

Link to comment
Share on other sites

I didn't see anything at that link. Hm. And I can't imagine why tweening the font size would somehow break the scaling. If you can whip together a codepen or jsfiddle that clearly demonstrates the issue in a simple fashion, that'd be awesome. 

Link to comment
Share on other sites

Thansk for the reply.

Yes, as it is a portfolio site and the code was broken I had to take it down,

Ive put it back at http://www.mmurad.com/index2.html with the font sizing put back aswell. I also found my "solution" didnt actually fix the problem as the tween would then stop half way through the rotation

Its definitely more prevalent in chrome than firefox

Link to comment
Share on other sites

Can I target a list of li's using $('.class li') using stagger as that is the only thing left that i can see causing this issue

Link to comment
Share on other sites

I think the problem is that your js is executing before the external css is loaded and applied.


Try putting your js script tags right before the closing <body> tag and definitely after the external css

<body><div id="Hcontainer">
<ul class="hellos"> <li>Hello</li> <li>¡Hola</li> <li>مرحبا</li> <li>こんにちは</li> <li>你好</li> <li>Hallo</li> <li>Bonjour</li> <li>Dia duit</li> <li>Salve</li> <li>привет</li> <li>Ciao</li> <li>Γεια σας</li> <li>Hej</li> <li>Olá</li> </ul>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/custom2.js" type="text/javascript"></script>
  • Like 1
Link to comment
Share on other sites

What can I say Carl, sometimes the hardest problems to fix are the ones with the easiest solutions! After approximately 3 hours of refreshing I have yet to see the problem recur after applying your suggestions so I owe you one, thank you!

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.