Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
edswartz@yahoo.com

other divs are "vibrating" as scrambeText is animating

Recommended Posts

I have a scrambleText span that animates a series of words successfully. However, as it plays, a neighboring div (#homeHeader) vibrates. This happens across Chrome, Safari and their iOS versions. The divs are styled using css grid and media queries and are meant to sit side by side on landscape and vertically stacked on portrait queries.

 

Note that this "vibration" doesn't happen all the time, but I can't identify what makes it vibrate exactly. I've tried to force reloading of cache on the browser but that does not seem to impact it. As stated above, I've tried across different browsers and different devices.

 

I've tried fiddling with tweenLength, but the words are 4-6 characters long so I would not think it would impact the divs sizes that much. In fact, when I look at the divs in Chrome's devTools I don't see their size change at all.

 

 

Let me know if you need anything else to try to troubleshoot.

 

See the Pen VWPevg by edswartz (@edswartz) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Very helpful.

As ScrambleText scrambles the text the amount of text and width of each character is going to change the width of the span and thus change the flow of the text around it. I slowed down the animation and gave the span a red background. 

 

EDIT: demo below: 

Link to comment
Share on other sites

Thank you for the quick response!  So what's the best strategy to prevent the other divs from changing size when the span increases/decreases? Since all elements are in a css grid I don't think I can "fix" the dimensions of the parent element.

Link to comment
Share on other sites

I haven't worked with CSS Grids at all, sorry.

ScrambleText effects are most often used as headlines or text that "stands alone". As you found, its a bit problematic in the middle of a sentence.

It helps if the start and end words have the same number of characters and you use a fixed-width font. 

  • Like 1
Link to comment
Share on other sites

Hi,

 

A good solution is to use monospace typo -  as CARL recommended:  

See the Pen qjRjNm by mikeK (@mikeK) on CodePen

 

For example ROBOTO mono

 

Happy scrambling ...

  • Like 3
Link to comment
Share on other sites

Thank you! Actually after your suggestions I changed the type face (for aesthetic reasons) but the real solution was to change the grid specifications from 'auto' to specific percentages. 

So I changed:

  grid-template-columns:auto;

to:

  grid-template-columns:50% 50%;

 

 

This keeps the parent divs a specific size and does not force it to recalculate the layout.

 

Really appreciate all the help and suggestions.

  • 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.
×