SuperEventsJavaScript Events Library

SuperEvents Lets you to run actions when events are detected.
Support most events action like:- Scroll, Click, Hover, Mouse Move,

Here you will find some examples that will help you to work with SuperEvents

Click Event Example Mouse Moving Event Example Hover Event Example Scroll Event Example

Click Example

With this event you can handel the

Source
Target 1
Target 2
Target 3
Target 4
HTML 
<div class="click-example-source">Source</div>

<div class="click-example-target">Target 1</div>
<div class="click-example-target">Target 2</div>
<div class="click-example-target">Target 3</div>
<div class="click-example-target">Target 4</div>
JS 
let eventFrom = { backgroundColor: '#FF4971', scale: 0.5 }
let eventTo = { backgroundColor: '#4693FF', scale: 1 }

const source = document.querySelector('.click-example-source');
const target = document.querySelectorAll('.click-example-target');

const clickExample = new SuperEvents({
  source: source,
  target: target
});
clickExample.click().fromTo( eventFrom, eventTo ).easing({ timing: 'ease-out', duration: 0.3, delay: 0.1 });

Mouse Move Example

With this event you can handel the

Source
Target 1
Target 2
Target 3
Target 4
HTML 
<div class="mousemove-example-source">Source</div>

<div class="mousemove-example-target">Target 1</div>
<div class="mousemove-example-target">Target 2</div>
<div class="mousemove-example-target">Target 3</div>
<div class="mousemove-example-target">Target 4</div>
JS 
let eventFrom = { backgroundColor: '#FF4971' }
let eventTo = { backgroundColor: '#4693FF' }

const source = document.querySelector('.mousemove-example-source');
const target = document.querySelectorAll('.mousemove-example-target');

const mousemoveExample = new SuperEvents({
  source: source,
  target: target
});
mousemoveExample.mousemove().fromTo( eventFrom2, eventTo2 )

Hover Example

With this event you can handel the

Source
Target 1
Target 2
Target 3
Target 4
HTML 
<div class="hover-example-source">Source</div>

<div class="hover-example-target">Target 1</div>
<div class="hover-example-target">Target 2</div>
<div class="hover-example-target">Target 3</div>
<div class="hover-example-target">Target 4</div>
JS 
let eventFrom = { translateX: '300px', opacity: 0.1 }
let eventTo = { translateX: '0', opacity: 1 }

const source = document.querySelector('.hover-example-source');
const target = document.querySelectorAll('.hover-example-target');

const hoverExample = new SuperEvents({
  source: source,
  target: target
});
hoverExample.hover().fromTo( eventFrom, eventTo ).easing({ timing: 'ease-out', duration: 0.3, delay: 0.3, cubicBezier: false });

Scroll Example

With this event you can handel the

Target 1
Target 2
Target 3
Target 4
HTML 
<div class="scroll-example-target">Target 1</div>
<div class="scroll-example-target">Target 2</div>
<div class="scroll-example-target">Target 3</div>
<div class="scroll-example-target">Target 4</div>
JS 
eventFrom = { backgroundColor: '#FF5549', scale: 0.2 };
eventTo = { backgroundColor: '#464EFF', scale: 1 };
 
var target2 = document.querySelectorAll('.scroll-example-target-2');
 
new SuperEvents(target2).scroll({
  indicator: '80%',
  duration: '50%',
}).fromTo( eventFrom, eventTo ).easing( { timing: 'ease-out', duration: 0.3, delay: 0.1, cubicBezier: false } );

Scrolling Element Example

With this event you can handel the

Scroll Down
Target 1
Target 2
Target 3
Target 4
HTML 
<div class="scroll-example-target">Target 1</div>
<div class="scroll-example-target">Target 2</div>
<div class="scroll-example-target">Target 3</div>
<div class="scroll-example-target">Target 4</div>
JS 
eventFrom = { backgroundColor: '#FFAAA4' }
eventTo = { backgroundColor: '#9BA0FF' }

let source3 = document.querySelector('.scroll-div-container')
let target3 = source3.querySelectorAll('.scroll2-example-target')

new SuperEvents({ source: source3, target: target3}).scroll({
  indicator: '80%',
  duration: '20%',
}).fromTo( eventFrom, eventTo ).easing( { timing: 'ease-out', duration: 0.3, delay: 0.15, cubicBezier: false } );