0 votes
by (590 points)

I'm attempting to work a glitch effect for text into my project, and I found a cool SCSS code on codepen.io. I altered the code so that it would fit in my story, and made those same alterations in the pen to make sure it would still work. However, when I attempted to run the code in my project, nothing happened. Does SCSS not work in Twine, and only vanilla CSS works in the stylesheet? I'm not sure what the difference is or why SCSS wouldn't work, but this isn't the first time that a SCSS file has not worked for me in Twine Sugarcube. 

here is the SCSS code I tried to use: 

.glitch {
  position: relative;
  margin: 0 auto;
}

.glitch::before .glitch::after {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate-reverse;
  overflow: hidden;
  position: absolute;
  top: 0;
  clip: rect(0, 900px, 0, 0);
  content: attr(data-text);
}

.glitch::after {
  animation-name: glitch-animation;
  animation-duration: 4s;
  left: 4px;
  text-shadow: -1px 0 #ffa800;
}

.glitch::before {
  animation-name: glitch-animation-2;
  animation-duration: 6s;
  left: -4px;
  text-shadow: 1px 0 #00d8ff;
}

@mixin rect($top, $bottom) {
  clip: rect($top, 9999px, $bottom, 0);
}

/* Expanded Animations */
@keyframes glitch-animation {
  0% { @include rect(42px, 44px); }
  5% { @include rect(12px, 59px); }
  10% { @include rect(48px, 29px); }
  15.0% { @include rect(42px, 73px); }
  20% { @include rect(63px, 27px); }
  25% { @include rect(34px, 55px); }
  30.0% { @include rect(86px, 73px); }
  35% { @include rect(20px, 20px); }
  40% { @include rect(26px, 60px); }
  45% { @include rect(25px, 66px); }
  50% { @include rect(57px, 98px); }
  55.0% { @include rect(5px, 46px); }
  60.0% { @include rect(82px, 31px); }
  65% { @include rect(54px, 27px); }
  70% { @include rect(28px, 99px); }
  75% { @include rect(45px, 69px); }
  80% { @include rect(23px, 85px); }
  85.0% { @include rect(54px, 84px); }
  90% { @include rect(45px, 47px); }
  95% { @include rect(37px, 20px); }
  100% { @include rect(4px, 91px); }
}

@keyframes glitch-animation-2 {
  0% { @include rect(65px, 100px); }
  5% { @include rect(52px, 74px); }
  10% { @include rect(79px, 85px); }
  15.0% { @include rect(75px, 5px); }
  20% { @include rect(67px, 61px); }
  25% { @include rect(14px, 79px); }
  30.0% { @include rect(1px, 66px); }
  35% { @include rect(86px, 30px); }
  40% { @include rect(23px, 98px); }
  45% { @include rect(85px, 72px); }
  50% { @include rect(71px, 75px); }
  55.0% { @include rect(2px, 48px); }
  60.0% { @include rect(30px, 16px); }
  65% { @include rect(59px, 50px); }
  70% { @include rect(41px, 62px); }
  75% { @include rect(2px, 82px); }
  80% { @include rect(47px, 73px); }
  85.0% { @include rect(3px, 27px); }
  90% { @include rect(26px, 55px); }
  95% { @include rect(42px, 97px); }
  100% { @include rect(38px, 49px); }
}

and then to run the code on a selected piece of text, I would do: 

<span class="glitch" data-text="hell no">help me</span>

and it should flicker/glitch between the two. Again, it works just fine when I tested it on the codepen.io site, but does absolutely nothing when I try to run it on my project. 

I tried to ask this question once before, but I'm pretty sure the system deleted it because I tried to link to the codepen where I found the glitch effect; at the very least, i can't find the old question anywhere. So I'm not sure how to cite the source without this getting auto-flagged. (don't get me wrong, i'm extremely glad that a measure is now in place to reduce spam. if you need me to cite the source, i can try to put the link in a comment below) 

1 Answer

0 votes
by (68.6k points)
selected by
 
Best answer
Sass extensions do not work outside of their preprocessor.  Thus any SCSS style chunk that contains said extensions will not properly work as-is in browsers.

The style pane on Codepen can give you the post-processed standard CSS.  Switch it to display CSS and copy that instead.
by (590 points)
Ahh, okay. thank you :D
...