Get started with pts CDN

Apache-2.0 licensed

PTS library ensures smooth, accurate scrolling and positioning of off-screen elements.

Tags:
  • visualization
  • coding
  • creative

Stable version

Copied!

How to start using pts CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with pts CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/pts/0.12.2/pts.min.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div id="timer"></div>

  <script>
    const startButton = document.querySelector('#start');
    const stopButton = document.querySelector('#stop');
    const timer = document.querySelector('#timer');

    let pts;

    startButton.addEventListener('click', () => {
      pts = new PTS();
      pts.start();
      startButton.disabled = true;
    });

    stopButton.addEventListener('click', () => {
      pts.stop();
      startButton.disabled = false;
      timer.textContent = `Elapsed: ${pts.elapsed()}`;
    });

    pts.on('tick', (time) => {
      timer.textContent = `Current: ${time}`;
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions