Canvas Animations

for (let width = 0; width < image.width; width += 8) {
  for (let height = 0; height < image.height; height += 8) {
     const color = image.data[(height * image.width * 4) 
		+ (width * 4) - 1];
     // The pixel color is white? So draw on it...
     if (color === 255) {
        particlePositions.push({
           x: width,
           y: height,
           radius: randomBetween(1, 10),
           randomPositionFactor: 0.08
        });
     }
  }}


Async page loading

JavaScript:

document.addEventListener('pjax:send', () => {
  const container = document.querySelector('[data-pjax="sideBySide"]');
  addClass(container, 'pjax--adding');
  removeClass(container, 'pjax--added');
  removeClass(container, 'pjax--complete');
});

document.addEventListener('pjax:complete', () => {
  const container = document.querySelector('[data-pjax="sideBySide"]');
  removeClass(container, 'pjax--adding');
  addClass(container, 'pjax--complete');
  
  const toyota = document.querySelector('.toyota-container');
  
  // script for filtered projects, when returning to projects page
  const projectFilter = document.querySelector('[data-project-filters]');
  if (projectFilter) {
     projectFiltering(projectFilter);
  }
  // init custom parallax
  conductor(modules).start();
});

document.addEventListener('pjax:success', () => {
  const loader = document.querySelector('[data-loading]');
  if (loader && hasClass(loader, 'visible')) {
     addClass(loader, 'loaded');
     setTimeout(() => {
        removeClass(loader, 'visible');
     }, 1900);
  }
});

SCSS:

.pjax--adding {
 .projects__item {
  padding: 0;
  transition: $la_projects-thumb-duration $a_ease;

  .project-banner__image {
   heighT: 100%;
   bottom: auto;
   top: 0;
   transition: $la_projects-thumb-duration $a_ease;
  }

  .project-banner__link {
   opacity: 0;
   transition: $la_projects-thumb-duration $a_ease;
  }
 }

 .projects__container {
  height: 80vh!important;
  padding: 0;
  transition: $la_projects-thumb-duration $a_ease;
 }

 .projects__filters {
  opacity: 0;
  transition: $la_projects-thumb-duration $a_ease;
 }

 .projects__legend {
  opacity: 0;
  transition: $la_projects-thumb-duration $a_ease;
 }
}

.pjax--added {
 .project-featured-image {
  height: 80vh!important;
  transition: 0s;
 }
 .project-main-title-group {
  opacity: 0;
  transition: 0s;
 }
 .project-container {
  opacity: 0;
  transition: 0s;
 }
}

.pjax--complete {
 .project-main-title-group {
  opacity: 1;
  transition: $la_projects-thumb-duration 0.4s $a_ease;
 }

 .project-container {
  opacity: 1;
  transition: $la_projects-thumb-duration .4s $a_ease;
 }
}