Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iondrimba/interactive-repulsive-effect
:chocolate_bar: An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".
https://github.com/iondrimba/interactive-repulsive-effect
animation codrops creative demo javascript motion repulsion threejs threejs-example threejs-learning tutorial webgl
Last synced: about 1 month ago
JSON representation
:chocolate_bar: An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".
- Host: GitHub
- URL: https://github.com/iondrimba/interactive-repulsive-effect
- Owner: iondrimba
- License: other
- Created: 2018-12-06T11:31:01.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-30T12:08:45.000Z (over 2 years ago)
- Last Synced: 2024-09-29T03:37:32.452Z (about 2 months ago)
- Topics: animation, codrops, creative, demo, javascript, motion, repulsion, threejs, threejs-example, threejs-learning, tutorial, webgl
- Language: JavaScript
- Homepage: https://tympanus.net/codrops/?p=36627
- Size: 1.04 MB
- Stars: 196
- Watchers: 8
- Forks: 45
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Interactive Repulsion Effect with Three.js
A tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot ["Holographic-Interactions"](https://dribbble.com/shots/5515695-Holographic-Interactions). By Ion D. Filho.
[Article on Codrops](https://tympanus.net/codrops/?p=36627)
[Demo](https://tympanus.net/Tutorials/InteractiveRepulsionEffect/)
## Requirements
* nodejs 14+
### Contents
````bash
first-demo/ and second-demo/
src/
scripts/...
styles/...
index.html
index.js
config files...
LICENSE
README.md
````
### Installation
```sh
cd first-demo or second-demo
npm install
npm start
```
### Build
```sh
cd first-demo or second-demo
npm run build
```
### output folder
````bash
first-demo/ and second-demo/
public/
app.##hash##.js
app.##hash##.css
index.html
````
## Credits
* [Threejs](https://threejs.org/)
* [TweenMax](https://greensock.com/tweenmax)
* [RoundedBox Mesh](https://github.com/pailhead/three-rounded-box)
## License
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.
## Misc
Follow Ion Drimba Filho: [Twitter](https://twitter.com/code__music), [Codepen](https://codepen.io/iondrimba/), [GitHub](https://github.com/iondrimba)
Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)
[© Codrops 2018](http://www.codrops.com)