sticky header - lazyload - navbar - floatingpoints

app/assets/js/App.js

@@ -1,3 +1,9 @@
+import $ from 'jquery';
 import MobileMenu from './modules/MobileMenu';
+import RevealOnScroll from './modules/RevealOnScroll';
+import StickyHeader from './modules/StickyHeader';
 
-var mobileMenu = new MobileMenu();
+var mobileMenu = new MobileMenu();
+new RevealOnScroll($(".how-it-works-1"), "79%");
+new RevealOnScroll($(".how-it-works-2, .how-it-works-3"), "90%");
+var stickyHeader = new StickyHeader();

app/assets/js/Vendor.js

@@ -1 +1,2 @@
-import '../temp/modernizr';  
+// import '../temp/modernizr';
+import 'lazysizes'; 

app/assets/js/modules/RevealOnScroll.js

@@ -0,0 +1,31 @@
+import $ from 'jquery';
+import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
+
+ class RevealOnScroll {
+ 	constructor(els, offset){
+ 		this.itemsToReveal = els;
+ 		this.offsetPercentage = offset;
+ 		this.hideInitially();
+ 		this.createWaypoints();
+ 	}
+ 	
+ 	hideInitially() { 
+ 		this.itemsToReveal.addClass("reveal-item");
+ 	}
+
+ 	createWaypoints() {
+ 		var that = this;
+ 		this.itemsToReveal.each( function(){
+ 			var currentItem = this;
+ 			new Waypoint({
+ 				element: currentItem,
+  				handler: function() {
+    				$(currentItem).addClass("reveal-item--is-visible");
+  				},
+  				offset: that.offsetPercentage
+ 			});
+ 		});
+ 	}
+ }
+
+ export default RevealOnScroll;

app/assets/js/modules/StickyHeader.js

@@ -0,0 +1,86 @@
+import $ from 'jquery';
+import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
+import smoothScroll from 'jquery-smooth-scroll';
+
+class StickyHeader {
+	constructor() {
+		this.lazyImages = $(".lazyload");
+		this.siteHeader = $(".site-header");
+		this.siteLogo = $(".site-header__logo");
+		this.siteNav = $(".primary-nav");
+		this.siteLanguage = $(".site-header__language");
+		this.siteButton = $(".site-header__btn-container");
+		this.headerTriggerElement = $(".large-hero__title");
+		this.createHeaderWaypoint();
+		this.pageSections = $(".page-section");
+		this.headerLinks = $(".primary-nav a");
+		this.createPageSectionWaypoints();
+		this.addSmoothScrolling();
+		this.refreshWaypoints();
+	}
+
+	refreshWaypoints(){
+		this.lazyImages.on('load', function() {
+			Waypoint.refreshAll();
+		});
+	}
+
+	addSmoothScrolling() {
+		this.headerLinks.smoothScroll();
+	}
+
+	createHeaderWaypoint() {
+		var that = this;
+		new Waypoint({
+			element: this.headerTriggerElement[0],
+			handler: function(direction) {
+				if (direction == "down") {
+					that.siteHeader.addClass("site-header--dark");
+					that.siteLogo.addClass("site-header__logo--small");
+					that.siteNav.addClass("primary-nav--small");
+					that.siteLanguage.addClass("site-header__language--small");
+					that.siteButton.addClass("site-header__btn-container--small");
+				} else {
+					that.siteHeader.removeClass("site-header--dark");
+					that.siteLogo.removeClass("site-header__logo--small");
+					that.siteNav.removeClass("primary-nav--small");
+					that.siteLanguage.removeClass("site-header__language--small");
+					that.siteButton.removeClass("site-header__btn-container--small");
+					that.headerLinks.removeClass("is-current-link");
+				}
+			},
+			offset: "10%"
+		});
+	}
+
+	createPageSectionWaypoints() {
+		var that = this;
+		this.pageSections.each(function(){
+			var currentPageSection = this;
+			new Waypoint({
+				element: currentPageSection,
+				handler: function(direction){
+					if (direction == "down"){
+						var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
+						that.headerLinks.removeClass("is-current-link");
+						$(matchingHeaderLink).addClass("is-current-link");
+					}
+				}
+			});
+
+			new Waypoint({
+				element: currentPageSection,
+				handler: function(direction){
+					if (direction == "up"){
+						var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
+						that.headerLinks.removeClass("is-current-link");
+						$(matchingHeaderLink).addClass("is-current-link");
+					}
+				},
+				offset: "-38%"
+			});
+		});
+	}
+}
+
+export default StickyHeader;

app/assets/scss/modules/_arrow.scss

@@ -35,14 +35,14 @@
 
 		@include atMedium{
 			position: relative;
-			bottom: -30px;
+			bottom: 0px;
 			left: 50%;
 			transform: translateX(-50%);
 		}
 
 		@include atLarge{
 			position: relative;
-			bottom: -30px;
+			bottom: 0px;
 			left: 70%;
 			transform: translateX(-50%);
 		}

app/assets/scss/modules/_headline.scss

@@ -24,7 +24,7 @@
 
 	&__title {
 		font-weight: 400;
-		font-size: 1.6rem;
+		font-size: 1.5rem;
 
 		@include atMedium(){
 			font-size: 2.1rem;

app/assets/scss/modules/_how-it-works.scss

@@ -54,7 +54,7 @@
 
 	p{
 		font-weight: 300;
-		line-height: 1.25;
+		line-height: 1.125;
 		margin: 0;
 		font-size: 1.2rem;
 

app/assets/scss/modules/_primary-nav.scss

@@ -3,6 +3,11 @@
 	
 	@include atMedium(){
 		padding: 22px 0px;
+		transition: padding .3s ease-out;
+
+		&--small{
+			padding: 2px 0px;
+		}
 	}
 
 	&--pull-right{

app/assets/scss/modules/_reveal-item.scss

@@ -0,0 +1,10 @@
+.reveal-item {
+	opacity: 0;
+	transition: all 1.5s ease-out;
+	transform: scale(1.15);
+
+	&--is-visible {
+		opacity: 1;
+		transform: scale(1);
+	}
+}

app/assets/scss/modules/_site-header.scss

@@ -12,13 +12,22 @@
 	@include atMedium(){
 		position: absolute;
 		position: fixed;
-		background-color: rgba(#000, 0.4);
+		background-color: rgba(#000, .4);
+
+		&--dark {
+			background-color: rgba(#000, .7);
+		}
 	}
 
 	&__btn-container{
 		@include atMedium(){
 			padding: 32px 0px 32px 0px;
 			float: right;
+			transition: padding .3s ease-out;
+
+			&--small{
+				padding: 13px 0px 13px 0px;
+			}
 		}
 	}
 
@@ -35,6 +44,11 @@
 			position: unset;
 			margin: 40px 20px 0px 0px;
 			float: right;
+			transition: margin .3s ease-out;
+
+			&--small{
+				margin: 22px 20px 0px 0px;
+			}
 		}
 	}
 
@@ -135,15 +149,22 @@
 		left: 50%;
 		transform-origin: 50% 0%;
 		transform: translateX(-50%) scale(.8);
-		transition: transform .3s ease-out;
+		transition: all .3s ease-out;
 		background-color: rgba(black, 0.5);
 
+		&--small {
+			transform: translateX(-50%) scale(.5);
+			background-color: rgba(black, 0.7);
+		}
+
 		&--orange-bg {
-			transition: background-color .3s ease-out;
+			transition: all .3s ease-out;
-			background-color: orange;
+			background-color: $myOrange;
+			transform: translateX(-50%) scale(.8);
 		}
 
 		@include atMedium(){
+			width: 170px;
 			padding: 0;
 			top: 3px;
 			position: relative;
@@ -151,6 +172,11 @@
 			left: auto;
 			transform: translateX(0);
 			background-color: rgba(black, 0);
+			transition: width .3s ease-out;
+
+			&--small {
+				width: 100px;
+			}
 		}
 	}
 

app/assets/scss/style.scss

@@ -17,6 +17,4 @@
 @import './modules/arrow';
 @import './modules/footer';
 @import './modules/sprite';
-
+@import './modules/reveal-item';
-
-

app/index.html

@@ -9,9 +9,9 @@
 	<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
 	<link rel="stylesheet" type="text/css" href="./temp/styles/style.css">
 
-	  <!-- build:js assets/scripts/Vendor.js -->
+	<!-- build:js assets/scripts/Vendor.js -->
-	  <script type="text/javascript" src="./temp/scripts/Vendor.js"></script>
+	<script type="text/javascript" src="./temp/scripts/Vendor.js"></script> 
-	  <!-- endbuild -->
+	<!-- endbuild -->
 </head>
 <body>
 
@@ -34,10 +34,10 @@
 				</div>
 				<nav class="primary-nav primary-nav--pull-right">
 					<ul>
-						<li><a href="#about-us">About us</a></li>
+						<li><a href="#about-us" id="about-us-link">About us</a></li>
-						<li><a href="#how-it-works">How it works</a></li>
+						<li><a href="#how-it-works" id="how-it-works-link">How it works</a></li>
-						<li><a href="#agenda">Agenda</a></li>
+						<!-- <li><a href="#agenda">Agenda</a></li> -->
-						<li><a href="#members-area">Members area</a>
+						<li><a href="https://foodsoft.biobulkbende.org">Members area</a>
 					</ul>
 				</nav>
 			</div>
@@ -56,13 +56,14 @@
 		<div class="large-hero__text-content">
 			<h1 class="large-hero__title">bio bulke bende</h1>
 			<h2 class="large-hero__subtitle">The organic autonomous foodcoop <br> of Rotterdam</h2>
-			<!-- <p class="large-hero__description">Good quality, delicious food from local suppliers and farmers. Located in Almondestraat 157, <b>bio bulk bende</b> is the first food co-op in Rotterdam. </p> -->
+			<p class="large-hero__description">Local and organic food produced by farmers in the Rijnmond region for an affordable price
+    Through cooperation, members gain access to high-quality organic products from transparent sources and for fair prices.</p>
 			<p><a href="#" class="btn btn--large">Join us!</a></p>
 		</div>
 	</div>
 
 <!-- ABOUT US -->
-	<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding">
+	<div id="about-us" class="page-section page-section--red page-section--b-margin page-section--tb-padding" data-matching-link="#about-us-link">
 		<div class="wrapper">
 			<div class="headline headline--s-width headline--centered headline--b-margin">
 				<h2 class="headline__title ">We started the coop in the summer of 2019...</h2>
@@ -90,94 +91,95 @@
 
 
 	<!-- HOW IT WORKS -->
-	<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding page-section--t-margin-external page-section--b-margin-external">
+	<div id="how-it-works" class="page-section page-section--darkGreen page-section--tb-padding page-section--t-margin-external page-section--b-margin-external" data-matching-link="#how-it-works-link">
 		<div class="wrapper">
-			<div class="how-it-works how-it-works--atSmall-t-margin how-it-works--atSmall-centered">
+			<div class="how-it-works how-it-works-1 how-it-works--atSmall-t-margin how-it-works--atSmall-centered">
 				<div class="row row--gutters">
 					<div class="row__medium-3--larger">
-						<img class="how-it-works__icon how-it-works__icon--1" src="./assets/media/images/foodcoop.png">
+						<img class="how-it-works__icon how-it-works__icon--1 lazyload" data-src="./assets/media/images/foodcoop.png">
 					</div>
 	        		<div class="row__medium-9--smaller">
 	        			<div class="headline headline--lt-margin">
 							<h2 class="headline__title ">What is a <strong>foodcoop?</strong></h2>
-							<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-yourself supermarket.</h2>
+							<h2 class="headline__subtitle">A co-op is a collective where everyone shares the workload for the benefit of the whole. A food co-op is a group of people that buy food from suppliers of their own choosing. A collective do-it-with-others supermarket.<br><br>
+							<b>Bio bulk bende</b> members order collectively from local suppliers and distributors. This means we get as close to the wholesale prices as possible by cutting out middle men and ordering in bulk. Bio bulk bende exists only through the cooperation of the members involved, there is no profit and everyone in the community takes part on a volunteer basis.</h2>
 						</div>
 					</div>
 				</div>
-				<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
 			</div>
+			<div class="arrow arrow--how-it-works-1 arrow--darkGreen"></div>
 		</div>
 	</div>
 
-	<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external">
+	<div id="how-it-works-2" class="page-section page-section--lightGreen page-section--t-padding-larger page-section--tb-padding page-section--b-margin-external" data-matching-link="#how-it-works-link">
 		<div class="wrapper">
-			<div class="how-it-works how-it-works--atSmall-centered how-it-works">
+			<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered how-it-works">
 				<div class="row row--gutters">
 					<div class="row__medium-6 row--large-only">
-						<img class="how-it-works__img" src="./assets/media/images/member_large.JPG" alt="Once you are member you are part of our community!">
+						<img class="how-it-works__img lazyload" data-src="./assets/media/images/member_large.JPG" alt="Once you are member you are part of our community!">
 					</div>
 					<div class="row__medium-6">
 						<h2 class="how-it-works__title-small"><span class="icon icon--membership how-it-works__icon--membership"></span> Become a <strong>Member</strong> </h2>
-						<p>If you’re a member of our BioBulkBende, you have access to great organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros, and contribute a bit of your time and energy to keep our co-op running.</p>
+						<p>If you’re a member of our BioBulkBende, you have access to high-quality locally produced organic food, straight from the producers, at lower prices than in the supermarket. In return, you pay a one-time non-refundable membership fee of 15 euros and contribute a bit of your time and energy each month to keep our co-op running. As a member of the co-op you have a say in how the co-op works, how decisions are made and what direction we take together.</p>
 					</div>
 				</div>
 			</div>
 		</div>
 		<picture>
-			<source srcset="./assets/media/images/member_medium.JPG 800w" media="(min-width: 650px)">
+			<source data-srcset="./assets/media/images/member_medium.JPG 800w" media="(min-width: 650px)">
-			<img srcset="./assets/media/images/member_small.JPG 650w" alt="Once you are member you are part of our community!" class="how-it-works__img--small-only">
+			<img data-srcset="./assets/media/images/member_small.JPG 650w" alt="Once you are member you are part of our community!" class="how-it-works__img--small-only lazyload">
 		</picture>
 
 		<div class="wrapper">
-			<div class="how-it-works how-it-works--atSmall-centered">
+			<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered" data-matching-link="#how-it-works-link">
 				<div class="row row--gutters">
 					<div class="row__medium-6">
 						<h2 class="how-it-works__title-small"><span class="icon icon--workgroup how-it-works__icon--workgroup-order"></span> Join a <strong>Work Group</strong> </h2>
-						<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, you have to join a work group.</p>
+						<p>A work group is a group of members who work together and are responsible for a specific need of our food co-op. Some examples of work groups are administration, membership, orders, financial, etc. As a member of our food co-op, joining a work group is a requirement. When you join, we help you pick what work group matches your interests as well as what matches the needs of the co-op. Members can change work groups when their interests change.</p>
 					</div>
 					<div class="row__medium-6 row--large-only">
-						<img class="how-it-works__img" src="./assets/media/images/workgroup_large.JPG" alt="Working togheter is part of being a foocoop!">
+						<img class="how-it-works__img lazyload" data-src="./assets/media/images/workgroup_large.JPG" alt="Working togheter is part of being a foocoop!">
 					</div>
 				</div>
 			</div>
 		</div>
 		<picture>
-			<source srcset="./assets/media/images/workgroup_medium.JPG 800w" media="(min-width: 650px)">
+			<source data-srcset="./assets/media/images/workgroup_medium.JPG 800w" media="(min-width: 650px)">
-			<img srcset="./assets/media/images/workgroup_small.JPG 650w" alt="The pick up day is arrived!" class="how-it-works__img--small-only">
+			<img data-srcset="./assets/media/images/workgroup_small.JPG 650w" alt="The pick up day is arrived!" class="how-it-works__img--small-only lazyload">
 		</picture>
 
 		<div class="wrapper">
-			<div class="how-it-works how-it-works--atSmall-centered">
+			<div class="how-it-works how-it-works-2 how-it-works--atSmall-centered">
 				<div class="row row--gutters">
 					<div class="row__medium-6 row--large-only">
-						<img class="how-it-works__img" src="./assets/media/images/order_food_large.JPG" alt="To order your food is easy!">
+						<img class="how-it-works__img lazyload" data-src="./assets/media/images/order_food_large.JPG" alt="To order your food is easy!">
 					</div>
 					<div class="row__medium-6">
 						<h2 class="how-it-works__title-small"><span class="icon icon--order how-it-works__icon--workgroup-order"></span> Order your <strong>Food</strong> </h2>
-						<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p>
+						<p>Only members can place an order, but anyone can become a member! For food ordering, we use a free software called <a href="https://foodcoops.net"> <b> Foodsoft </b> </a>. You can learn more about how to order by joining us at any upcoming pickup day.</p>
 					</div>
 				</div>
 			</div>
 		</div>
 		<picture>
-			<source srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)">
+			<source data-srcset="./assets/media/images/order_food_medium.JPG 800w" media="(min-width: 650px)">
-			<img srcset="./assets/media/images/order_food_small.JPG 650w" alt="To order your food is easy!" class="how-it-works__img--small-only">
+			<img data-srcset="./assets/media/images/order_food_small.JPG 650w" alt="To order your food is easy!" class="how-it-works__img--small-only lazyload">
 		</picture>
 		<div class="arrow arrow--how-it-works-2 arrow--lightGreen"></div>
 	</div>
 
 	<div id="how-it-works-3"  class="page-section">
 		<picture>
-			<source srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
+			<source data-srcset="./assets/media/images/pickup_day_large.jpg 1920w" media="(min-width: 1380px)">
-			<source srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
+			<source data-srcset="./assets/media/images/pickup_day_medium.jpg 1380w" media="(min-width: 990px)">
-			<source srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
+			<source data-srcset="./assets/media/images/pickup_day_small.jpg 990w" media="(min-width: 640px)">
-				<source srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 390px)">
+			<source data-srcset="./assets/media/images/pickup_day_smaller.jpg 640w" media="(min-width: 390px)">
-			<img srcset="./assets/media/images/pickup_day_extra_smaller.jpg 390w" alt="The pick up day is arrived!" class="large-hero__image">
+			<img class="lazyload" data-srcset="./assets/media/images/pickup_day_extra_smaller.jpg 390w" alt="The pick up day is arrived!" class="large-hero__image">
 		</picture>
-		<div class="how-it-works">
+		<div class="how-it-works ">
 			<div class="how-it-works--centered how-it-works--t-margin page-section--tb-padding">
 				<div class="wrapper wrapper--white wrapper--medium">
-					<div class="how-it-works__last-section">
+					<div class="how-it-works__last-section how-it-works-3">
 						<div class="wrapper wrapper--small">
 							<h2 class="how-it-works__title"><span class="icon icon--pickup how-it-works__icon--pickup"></span><strong>Pick-up day</strong></h2>
 							<p>Only members can place an order, but anyone can become a member! For food ordering, we use Foodsoft. You can learn more about how to order by joining us at any upcoming pickup day.</p><br><br>

app/temp/styles/style.css

@@ -356,11 +356,16 @@ img {
     .site-header {
       position: absolute;
       position: fixed;
-      background-color: rgba(0, 0, 0, 0.4); } }
+      background-color: rgba(0, 0, 0, 0.4); }
+      .site-header--dark {
+        background-color: rgba(0, 0, 0, 0.7); } }
   @media (min-width: 800px) {
     .site-header__btn-container {
       padding: 32px 0px 32px 0px;
-      float: right; } }
+      float: right;
+      transition: padding .3s ease-out; }
+      .site-header__btn-container--small {
+        padding: 13px 0px 13px 0px; } }
   .site-header__language {
     position: absolute;
     top: 10px;
@@ -373,7 +378,10 @@ img {
       .site-header__language {
         position: unset;
         margin: 40px 20px 0px 0px;
-        float: right; } }
+        float: right;
+        transition: margin .3s ease-out; }
+        .site-header__language--small {
+          margin: 22px 20px 0px 0px; } }
   .site-header__menu-icon {
     width: 20px;
     height: 19px;
@@ -448,26 +456,37 @@ img {
     left: 50%;
     transform-origin: 50% 0%;
     transform: translateX(-50%) scale(0.8);
-    transition: transform .3s ease-out;
+    transition: all .3s ease-out;
     background-color: rgba(0, 0, 0, 0.5); }
+    .site-header__logo--small {
+      transform: translateX(-50%) scale(0.5);
+      background-color: rgba(0, 0, 0, 0.7); }
     .site-header__logo--orange-bg {
-      transition: background-color .3s ease-out;
+      transition: all .3s ease-out;
-      background-color: orange; }
+      background-color: #FF9F2F;
+      transform: translateX(-50%) scale(0.8); }
     @media (min-width: 800px) {
       .site-header__logo {
+        width: 170px;
         padding: 0;
         top: 3px;
         position: relative;
         float: left;
         left: auto;
         transform: translateX(0);
-        background-color: rgba(0, 0, 0, 0); } }
+        background-color: rgba(0, 0, 0, 0);
+        transition: width .3s ease-out; }
+        .site-header__logo--small {
+          width: 100px; } }
 
 .primary-nav {
   padding-top: 10px; }
   @media (min-width: 800px) {
     .primary-nav {
-      padding: 22px 0px; } }
+      padding: 22px 0px;
+      transition: padding .3s ease-out; }
+      .primary-nav--small {
+        padding: 2px 0px; } }
   @media (min-width: 800px) {
     .primary-nav--pull-right {
       float: right; } }
@@ -661,7 +680,7 @@ img {
         max-width: 1000px; } }
   .headline__title {
     font-weight: 400;
-    font-size: 1.6rem; }
+    font-size: 1.5rem; }
     @media (min-width: 800px) {
       .headline__title {
         font-size: 2.1rem; } }
@@ -816,7 +835,7 @@ img {
         padding: 100px 0px 50px 0px; } }
   .how-it-works p {
     font-weight: 300;
-    line-height: 1.25;
+    line-height: 1.125;
     margin: 0;
     font-size: 1.2rem; }
     @media (min-width: 800px) {
@@ -903,13 +922,13 @@ img {
     @media (min-width: 800px) {
       .arrow--how-it-works-1 {
         position: relative;
-        bottom: -30px;
+        bottom: 0px;
         left: 50%;
         transform: translateX(-50%); } }
     @media (min-width: 1200px) {
       .arrow--how-it-works-1 {
         position: relative;
-        bottom: -30px;
+        bottom: 0px;
         left: 70%;
         transform: translateX(-50%); } }
   .arrow--how-it-works-2 {
@@ -979,4 +998,12 @@ img {
   height: 77px;
   background-position: 100% 93%; }
 
+.reveal-item {
+  opacity: 0;
+  transition: all 1.5s ease-out;
+  transform: scale(1.15); }
+  .reveal-item--is-visible {
+    opacity: 1;
+    transform: scale(1); }
+
 /*# sourceMappingURL=style.css.map */

gulpfile.js

@@ -12,7 +12,6 @@ svgSprite = require('gulp-svg-sprite'),
 rename = require('gulp-rename'),
 browserSync = require('browser-sync').create();
 
-
 // JS TASKS
 function cleanScripts(){
 	return del('./app/temp/scripts/App.js');

package-lock.json

@@ -5996,6 +5996,14 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
       "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
     },
+    "jquery-smooth-scroll": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jquery-smooth-scroll/-/jquery-smooth-scroll-2.2.0.tgz",
+      "integrity": "sha1-h9wa3YQWi39Gazza7rgcgD/SKio=",
+      "requires": {
+        "jquery": ">=1.7.0"
+      }
+    },
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
@@ -6133,6 +6141,11 @@
         "es6-weak-map": "^2.0.1"
       }
     },
+    "lazysizes": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/lazysizes/-/lazysizes-5.2.2.tgz",
+      "integrity": "sha512-fYgOv1Y35M86/7qyAdPPqoOhuyZrjxEAPxqwToRY2bO/PoBJ4lSqZYuZoavNp6eyuLpIAdHodpsPfj2Lkt86FQ=="
+    },
     "lazystream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
@@ -10884,6 +10897,11 @@
         }
       }
     },
+    "waypoints": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/waypoints/-/waypoints-4.0.1.tgz",
+      "integrity": "sha1-CZeaBXOBCylifLpDZqKEoGLsacg="
+    },
     "webpack": {
       "version": "4.44.2",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",

package.json

@@ -25,6 +25,9 @@
     "webpack-stream": "^6.1.0"
   },
   "dependencies": {
-    "jquery": "^3.5.1"
+    "jquery": "^3.5.1",
+    "jquery-smooth-scroll": "^2.2.0",
+    "lazysizes": "^5.2.2",
+    "waypoints": "^4.0.1"
   }
 }