https://github.com/friedrith/animated-light-effect

Animated light effect tutorial
https://github.com/friedrith/animated-light-effect

animation css scroll svg web

Last synced: 4 days ago
JSON representation

Animated light effect tutorial

• Host: GitHub
• URL: https://github.com/friedrith/animated-light-effect
• Owner: friedrith
• License: mit
• Created: 2017-12-04T19:04:07.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T18:31:53.000Z (almost 2 years ago)
• Last Synced: 2024-04-15T02:03:05.864Z (7 months ago)
• Topics: animation, css, scroll, svg, web
• Language: JavaScript
• Homepage: https://friedrith.github.io/animated-light-effect/
• Size: 3.53 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Animated light effect

Demo available [here](https://friedrith.github.io/animated-light-effect/)

This project is a demo using SVG and animation on scroll like Invision studio. This demo is explained

in this [Medium article](https://medium.com/@Daneel_Olivaw/how-to-create-a-handsome-gradient-scroll-animation-like-invision-studio-landing-page-fbc890d7e318).

## Getting started

```bash

$ npm install

# development

$ npm run start

# production

$ npm run build

```

## Project initialization

### Development setup

```bash

# initialization npm module

$ npm init -y

# install webpack

$ npm install --save-dev cross-env webpack webpack-dev-server html-webpack-plugin

# install sass for webpack

$ npm install --save-dev css-loader style-loader sass-loader node-sass

# install babel for webpack

$ npm install --save-dev babel-loader babel-core babel-preset-react babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread babel-plugin-transform-es2015-modules-commonjs babel-preset-es2017 babel-preset-es2015 babel-preset-stage-0 # using babel-preset-react to load style file from js file

```

## useful libraries:

* https://github.com/necolas/normalize.css/

* https://designmodo.com/animate-svg-gradients/

* http://svgjs.com/

* https://github.com/svgdotjs/svg.filter.js#examples

* http://scrollmagic.io/