https://github.com/callmearta/thanos

https://github.com/callmearta/thanos

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/callmearta/thanos
• Owner: callmearta
• Created: 2024-02-29T09:50:05.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-01T17:09:53.000Z (10 months ago)
• Last Synced: 2024-03-01T19:35:42.022Z (10 months ago)
• Language: JavaScript
• Size: 847 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Screenshot](http://github.com/callmearta/thanos/blob/main/thanos.gif?raw=true)

## Thanos snap effect using JS

This is a simple implementation which can still be improved visually or performance wise, but would be a good starting point for achieving more complex animations like this.

Main code is written in `thanos.js` and can be used after import with initializing like this:

```

  const btn = document.querySelector('.my-btn');

  const yourNode = document.querySelector(".your-node");

  const thanos = new Thanos(yourNode);

  btn.addEventListener("click", function (e) {

    e.preventDefault();

    thanos.explode();

  });

```

## Dependencies

This project uses `dom-to-image` so be sure to import it as well.