Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Problem with Glitch Text Effect CSS Script

Hey, everyone!

I'm trying to get this glitch text CSS script ( working in Twine but something seems to be off and just doesn't seem to be working as it should.

I have put all the CSS code in a passage tagged "stylesheet" and added HTML code in the normal passage, yet all I get is the simple GLITCH text without any effect.

Any idea why this might be happening?



  • You probably copied the SCSS (Sass CSS) version, not the compiled CSS.  Click the eye icon on the CSS area and it should switch to a view of the compiled CSS, copy that.
  • No, I did paste the compiled CSS. It still doesn't show the desired effect.  :-\
  • I just created a new story, copied the "Compiled Preview" version of the CSS into a stylesheet passage, and added the following into the Start passage:

    <link href='' rel='stylesheet' type='text/css'>
    <div class="glitch" data-text="GLITCH">GLITCH</div>
    I viewed the generated Sugarcane/SugarCube HTML output in Firefox 34.0.5 on Windows and both worked, but neither worked using Chrome 39.0.2171.95 even though the codepen page does.

    Chrome's CSS viewer says there is a property error in the animation: call in both the .glitch:before and .glitch:after selectors.
  • Yeah, it's a Chrome-specific issue of keyframe CSS not working.
    Tried it in Firefox and it worked properly.

    Thank you for the help!
  • There are two issues with the CSS in relation to Chrome:

    1. According to canius css-animation Chrome only supports the -webkit-animation version of the property, so you need to edit the .glitch:before and .glitch:after rules and duplicate each of the animation properties so that there is also a -webkit-animation one.
    The end result will look something like the following:

    .glitch:before {
    animation: noise-anim-2 3s infinite linear alternate-reverse;
    -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse;

    .glitch:after {
    animation: noise-anim 2s infinite linear alternate-reverse;
    -webkit-animation: noise-anim 2s infinite linear alternate-reverse;
    2. As you know Chrome does not support the standard @keyframes selector so you need to include a @-webkit-keyframes as well.
    To do this first take a copy of the @keyframes noise-anim selector and its contents, then paste that below the original and change the copy's selector to @-webkit-keyframes noise-anim. Do the same for the @keyframes noise-anim-2 and its contents except this time rename the inserted copy as @-webkit-keyframes noise-anim-2

    If you do the above correctly it will work in Chrome. (I tested it in v39.0.2171.95)
  • That worked perfectly. Thank you, greyelf!
Sign In or Register to comment.