I have a single page website design in html, javascript and css. There are lots of images on the webpage and all have different-different animation effects according to their categories. I have used wow.js for animation effects on window scroll. While scroll through images, CPU and GPU usage is going very high, due its effect the scrolling is jerky, not smooth. Could anyone please look into this. I have created a codepen example. Please have a look:-
(https://codepen.io/Sny220/pen/jjyEPj)
Code below:-
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
<img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
<img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
<h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
<img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
<img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
<div class="inner">
<h1 class="wow fadeInDown">Hello, world!</h1>
<p class="wow fadeInUp">Whouaa !!!</p>
</div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
<div class="inner">
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
<div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
<div class="inner">
<img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
</div>
</div>
<div data-wow-duration="2s" class="foo foo-2 col-md-3 wow scale-in-ver-top">
<div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
<div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
body {
padding-top: 20px;
}
/* set colors*/
:root {
--color-1: forestgreen;
--color-2: lightskyblue;
--color-3: darksalmon;
--color-4: palegoldenrod;
--color-5: mediumvioletred;
}
img {
width: 100%;
}
.foo {
margin-bottom: 10px;
color: white;
}
.navbar {}
.foo .inner {
padding: 5px;
min-height: 20vh;
}
.foo-text .inner {
min-height: 60vh !important;
}
/* apply colors */
.foo-1 .inner {
background-color: var(--color-1);
}
.foo-2 .inner {
background-color: var(--color-2);
}
.foo-3 .inner {
background-color: var(--color-3);
}
.foo-4 .inner {
background-color: var(--color-4);
}
.foo-5 .inner {
background-color: var(--color-5);
}
.bg-color {
background-color: var(--color-5);
color: #fff;
margin-top: 20px;
margin-bottom: 20px;
}
.over-hidden {
overflow: hidden;
}
.swing {
overflow: hidden;
}
.scale-in-ver-top {
-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
@keyframes scale-in-ver-top {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
.swing-in-top-fwd {
-webkit-animation-name: swing-in-top-fwd;
animation-name: swing-in-top-fwd;
}
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
}
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
50% {
transform: scale(2, 2);
webkit-transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
webkit-transform: scale(1, 1);
}
}
.zoominoutsingle {
animation-name: zoominoutsinglefeatured;
webkit-animation-name: zoominoutsinglefeatured;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
wow = new WOW();
wow.init();
$(".foo-5").hover(function(e) {
$(this).addClass('animated pulse');
}, function(e) {
$(this).removeClass('animated pulse');
});
var $animation_elements = $('.wow');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.removeClass('animated');
$element.addClass('animated');
} else {
$element.css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}
});
}
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
$window.on('scroll resize', check_if_in_view);
update:- This is just an example that i am using in webpage. Web page has different number of sections apporx. 20 sections and all are having 10 or more images. So when we are running that much images with animations the performance goes down.
I have checked it on mac Safari 11 & 12, the animation and scroll is not smooth. There is jerkiness while scrolling and animations are very slow with jerks.