cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
      <p class="scramble scramble--1" 
         data-eng="Entangled in a web of bass frequencies, I have isolated my world within an army of techno lovers. All dancing. Everything is blurry, and I am unable to see who is near. The stroboscope starts sending rapid flashes of white light, changing my blurred vision to a black and white filter. All I see are the silhouettes of the dancing people. Between every flash, their posture changes. The stroboscopes took the fluidity of my vision away. The temporal lobe, a part of my brain that oversees my eyes can’t keep up with all the input. "
         data-kor="베이스 주파수가 가득히 얽혀있는, 낮은 베이스 비트에 사로잡혀, 낮은 베이스음들의 그물/늪 사이에서 꼼짝 못하고 있는, 나는 나만의 세계에 고립되어 있다. 이 테크노 군단들의 사이에서. 모두 춤을 추는구나. 모든것이 흐릿하고, 나는 누가 내게 가까이 있는지조차 볼 수 없어. (스트로보스코프 조명이 = 깜박이는 조명이) 눈부신 흰 섬광을 빠르게 내 보내기 시작하고 나의 시야가 흑백 필터로 뿌옇게 변해가고. 오직 내가 볼 수 있는건 춤추는 사람들의 (실루엣 = 윤곽) 번득이는 모든 섬광 속에서 그들의  (자세/형태/포즈)가 변한다. 이 번득이는 섬광은 나의 유동적인/부드러운 시야를 앗아가버렸어/ 가져가버렸어. 측두엽 , 나의 시야를 감독하는 뇌의 일부. 이 모든 (입력>상황)을 쫓아오지 못하는구나."
      >
        Entangled in a web of bass frequencies, I have isolated my world within an army of techno lovers. All dancing. Everything is blurry, and I am unable to see who is near. The stroboscope starts sending rapid flashes of white light, changing my blurred vision to a black and white filter. All I see are the silhouettes of the dancing people. Between every flash, their posture changes. The stroboscopes took the fluidity of my vision away. The temporal lobe, a part of my brain that oversees my eyes can’t keep up with all the input. 
      </p>
      <p class="scramble scramble--2"
        data-eng="The tempo of the music sets my heart rate, and the DJ is playing all out. My limbs are making repetitive movements, and everyone else seems to dance with me. The music commands us— we’re all subjugated to the same beat and forming a synchronized movement. That’s probably why we feel so connected as we march through the night. An army of lost souls. Drunk or drugged and dancing on delusional melodies, we all march forth purposely. "
        data-kor="베이스 주파수가 가득히 얽혀있는, 낮은 베이스 비트에 사로잡혀, 낮은 베이스음들의 그물/늪 사이에서 꼼짝 못하고 있는, 나는 나만의 세계에 고립되어 있다. 이 테크노 군단들의 사이에서. 모두 춤을 추는구나. 모든것이 흐릿하고, 나는 누가 내게 가까이 있는지조차 볼 수 없어. (스트로보스코프 조명이 = 깜박이는 조명이) 눈부신 흰 섬광을 빠르게 내 보내기 시작하고 나의 시야가 흑백 필터로 뿌옇게 변해가고. 오직 내가 볼 수 있는건 춤추는 사람들의 (실루엣 = 윤곽) 번득이는 모든 섬광 속에서 그들의  (자세/형태/포즈)가 변한다. 이 번득이는 섬광은 나의 유동적인/부드러운 시야를 앗아가버렸어/ 가져가버렸어. 측두엽 , 나의 시야를 감독하는 뇌의 일부. 이 모든 (입력>상황)을 쫓아오지 못하는구나."
      >
        The tempo of the music sets my heart rate, and the DJ is playing all out. My limbs are making repetitive movements, and everyone else seems to dance with me. The music commands us— we’re all subjugated to the same beat and forming a synchronized movement. That’s probably why we feel so connected as we march through the night. An army of lost souls. Drunk or drugged and dancing on delusional melodies, we all march forth purposely. 
      </p>
      <p class="scramble scramble--3"
        data-eng="I close my eyes as the strobes become too intense. With my eyes closed, my brain relaxes momentarily, but my body is unable to withstand the pounding waves. Then, the leading synths evaporate, giving space and time for our bodies to recuperate. The bass slowly fades out. "
        data-kor="베이스 주파수가 가득히 얽혀있는, 낮은 베이스 비트에 사로잡혀, 낮은 베이스음들의 그물/늪 사이에서 꼼짝 못하고 있는, 나는 나만의 세계에 고립되어 있다. 이 테크노 군단들의 사이에서. 모두 춤을 추는구나. 모든것이 흐릿하고, 나는 누가 내게 가까이 있는지조차 볼 수 없어. (스트로보스코프 조명이 = 깜박이는 조명이) 눈부신 흰 섬광을 빠르게 내 보내기 시작하고 나의 시야가 흑백 필터로 뿌옇게 변해가고. 오직 내가 볼 수 있는건 춤추는 사람들의 (실루엣 = 윤곽) 번득이는 모든 섬광 속에서 그들의  (자세/형태/포즈)가 변한다. 이 번득이는 섬광은 나의 유동적인/부드러운 시야를 앗아가버렸어/ 가져가버렸어. 측두엽 , 나의 시야를 감독하는 뇌의 일부. 이 모든 (입력>상황)을 쫓아오지 못하는구나."
      >
        I close my eyes as the strobes become too intense. With my eyes closed, my brain relaxes momentarily, but my body is unable to withstand the pounding waves. Then, the leading synths evaporate, giving space and time for our bodies to recuperate. The bass slowly fades out. 
      </p>
      <p class="scramble scramble--4"
        data-eng="Collectively, we slow down, except for a couple of people, with beats that still echo in their minds. While the dark sounds are hypnotizing our brains, our bodies keep anticipating the next beat. We feel — but we cannot explain. I open my eyes again. The lights have dimmed along with the music. Both humans and machines seem to take a rest in harmony. I look around and see mostly young people. Some of them laughing, others chatting. "
        data-kor="베이스 주파수가 가득히 얽혀있는, 낮은 베이스 비트에 사로잡혀, 낮은 베이스음들의 그물/늪 사이에서 꼼짝 못하고 있는, 나는 나만의 세계에 고립되어 있다. 이 테크노 군단들의 사이에서. 모두 춤을 추는구나. 모든것이 흐릿하고, 나는 누가 내게 가까이 있는지조차 볼 수 없어. (스트로보스코프 조명이 = 깜박이는 조명이) 눈부신 흰 섬광을 빠르게 내 보내기 시작하고 나의 시야가 흑백 필터로 뿌옇게 변해가고. 오직 내가 볼 수 있는건 춤추는 사람들의 (실루엣 = 윤곽) 번득이는 모든 섬광 속에서 그들의  (자세/형태/포즈)가 변한다. 이 번득이는 섬광은 나의 유동적인/부드러운 시야를 앗아가버렸어/ 가져가버렸어. 측두엽 , 나의 시야를 감독하는 뇌의 일부. 이 모든 (입력>상황)을 쫓아오지 못하는구나."
      >
        Collectively, we slow down, except for a couple of people, with beats that still echo in their minds. While the dark sounds are hypnotizing our brains, our bodies keep anticipating the next beat. We feel — but we cannot explain. I open my eyes again. The lights have dimmed along with the music. Both humans and machines seem to take a rest in harmony. I look around and see mostly young people. Some of them laughing, others chatting. 
      </p>
      <p class="scramble scramble--5"
        data-eng="I see a couple kissing next to me. Others are in pure ecstasy with their eyes closed and hands raised in the air. As if they vow themselves to an unknown greater force. The music is slowly gaining momentum and building up. "
        data-kor="베이스 주파수가 가득히 얽혀있는, 낮은 베이스 비트에 사로잡혀, 낮은 베이스음들의 그물/늪 사이에서 꼼짝 못하고 있는, 나는 나만의 세계에 고립되어 있다. 이 테크노 군단들의 사이에서. 모두 춤을 추는구나. 모든것이 흐릿하고, 나는 누가 내게 가까이 있는지조차 볼 수 없어. (스트로보스코프 조명이 = 깜박이는 조명이) 눈부신 흰 섬광을 빠르게 내 보내기 시작하고 나의 시야가 흑백 필터로 뿌옇게 변해가고. 오직 내가 볼 수 있는건 춤추는 사람들의 (실루엣 = 윤곽) 번득이는 모든 섬광 속에서 그들의  (자세/형태/포즈)가 변한다. 이 번득이는 섬광은 나의 유동적인/부드러운 시야를 앗아가버렸어/ 가져가버렸어. 측두엽 , 나의 시야를 감독하는 뇌의 일부. 이 모든 (입력>상황)을 쫓아오지 못하는구나."
      >
        I see a couple kissing next to me. Others are in pure ecstasy with their eyes closed and hands raised in the air. As if they vow themselves to an unknown greater force. The music is slowly gaining momentum and building up. 
      </p>
      <p class="scramble scramble--6"
        data-eng="A moment of silence before the endless kicks start pounding again. This tiny moment makes me realize I’m alone. I can’t see any of my friends and the sense of being surrounded by strangers strikes a spike of anxiety within me. Then, the bass drum starts kicking and the sum of everyone's experience squashes down my momentary feeling of despair. I am dancing with the crowd, laughing together, taking drugs together. With these existential beings, I feel sane, in a hidden basement in the slums of Pyongyang, North Korea."
        data-kor="베이스 주파수가 가득히 얽혀있는, 낮은 베이스 비트에 사로잡혀, 낮은 베이스음들의 그물/늪 사이에서 꼼짝 못하고 있는, 나는 나만의 세계에 고립되어 있다. 이 테크노 군단들의 사이에서. 모두 춤을 추는구나. 모든것이 흐릿하고, 나는 누가 내게 가까이 있는지조차 볼 수 없어. (스트로보스코프 조명이 = 깜박이는 조명이) 눈부신 흰 섬광을 빠르게 내 보내기 시작하고 나의 시야가 흑백 필터로 뿌옇게 변해가고. 오직 내가 볼 수 있는건 춤추는 사람들의 (실루엣 = 윤곽) 번득이는 모든 섬광 속에서 그들의  (자세/형태/포즈)가 변한다. 이 번득이는 섬광은 나의 유동적인/부드러운 시야를 앗아가버렸어/ 가져가버렸어. 측두엽 , 나의 시야를 감독하는 뇌의 일부. 이 모든 (입력>상황)을 쫓아오지 못하는구나."
      >
        A moment of silence before the endless kicks start pounding again. This tiny moment makes me realize I’m alone. I can’t see any of my friends and the sense of being surrounded by strangers strikes a spike of anxiety within me. Then, the bass drum starts kicking and the sum of everyone's experience squashes down my momentary feeling of despair. I am dancing with the crowd, laughing together, taking drugs together. With these existential beings, I feel sane, in a hidden basement in the slums of Pyongyang, North Korea.
      </p>

    </div>
    
  </div>
            
          
!
            
              .container {
  width: 300px;
  margin: 0 auto;
  padding: 5vh 5vw;
  border: 25px solid firebrick;
}

.scramble {
  border: 5px solid greenyellow;
}
            
          
!
            
              (function() {
  const INTERSECTION_OBSERVER_SUPPORTED = 'IntersectionObserver' in window

  if (!INTERSECTION_OBSERVER_SUPPORTED) return

  /**
   * scramble text
   */
  const elements = document.querySelectorAll('.scramble');

  // first we replace the text with the korean version
  elements.forEach((el) => el.innerText = el.dataset.kor)

  // scroll into view
  const inView = (e) => {
    if (e[0].intersectionRatio < 0.3) return
    const target = e[0].target;

    TweenLite.to(target, 1, {
      scrambleText: {
        text: target.dataset.eng,
        chars: target.dataset.kor, 
        revealDelay: .25,
        speed: .3
      }
    });	

    observerScramble.unobserve(target);
  }

  const observerScramble = new IntersectionObserver(inView, { threshold: .5 });

  elements.forEach( (el) => observerScramble.observe(el));
})()
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console