Releases

// Rellax JS Resources
// https://dixonandmoe.com/rellax/

A global variable global $parallax is set in lib/parallax/parallax.php to enable Rellax (And other parallax libs).
This can be set to false to prevent them loading.

<div class="rellax" data-rellax-speed="6">
<-- Insert Div Contents -->
</div>

The attribute data-rellax-speed accepts values from -10 to 10

// Ukiyo Resources
// https://github.com/yitengjun/ukiyo-js

A global variable global $parallax is set in lib/parallax/parallax.php to enable Ukiyo (And other parallax libs).
This can be set to false to prevent them loading.

<?php $image_ID = get_sub_field('image');
$image_alt = get_post_meta($image_ID, '_wp_attachment_image_alt', TRUE);
?>

<div class="image-square ukiyo">
<img <?php awesome_acf_responsive_image($image_ID, 'full', '100%'); ?> alt="<?php echo $image_alt; ?>" />
</div>

// Limitations
// Cannot be used inside accordions due to height being calculated by JS on page load.
// In this case the height will be calculated as 0px on .ukiyo class element.
// Also, using Ukiyo parallax inside Rellax breaks on window resize.
// We purposefully destroy the ukiyo parallax to avoid issues on window resize.

Lenis scroll is automatically applied to the top level html tag.
However this can be changed by moving the location of gsap_lenis_scroll_set() function in header.php

// Lenis Resources
// https://github.com/studio-freight/lenis
// https://lenis.studiofreight.com/

A global variable global $gsap is set in lib/gsap/gsap.php to enable these scripts.
This can be set to false to prevent them loading.

GSAP Scroll Trigger also enabled, but will heavy revision + testing before implementing in projects.

There is a file structure that can be ported to projects in the lib/gsap folder.

lib/gsap/gsap.php : Location of the GSAP + Lenis scripts. Called by a CDN.
lib/gsap/nw-gsap.js : Location of the NW JS for animations.
lib/gsap/nw-gsap.css : Location of the default CSS that needs to run for Lenis.

<?php $image_ID = get_sub_field('image');
$image_alt = get_post_meta($image_ID, '_wp_attachment_image_alt', TRUE);
?>

<div class="image-square hover_zoom">
<img <?php awesome_acf_responsive_image($image_ID, 'full', '100%'); ?> alt="<?php echo $image_alt; ?>" />
</div>

Function situated in lib/elements.php
For use globally, across all blocks & templates.

Usage:

<?php
$stringVariable = 'Row Number 1';
$cleanedString = clean($stringVariable);
echo $cleanedString;
?>

$cleanedString output = RowNumber1

header_bumper.php has been included in the navigation files.
Header bumper allows fixed position navigation to push down blocks beneath it.

There is an /assets folder, with easily updated logo.svg + tray open/close .svg files.

navigation_tray.php available for use on desktop & mobile.
Additional navigation trays can be easily added.

JS for navigation situated in navigation/navigation.js

Function situated in lib/elements.php
For use globally, across all blocks & templates.

CSS class animated_field must be used on string’s parent text tag for this to work.

// Plain string usage
<h1 class="animated_field">
<?php get_animated_field('Plain string');?>
</h1>

// ACF field usage
<h1 class="animated_field">
<?php get_animated_field(get_field('acf_field'));?>
</h1>

// ACF sub_field usage
<h1 class="animated_field">
<?php get_animated_field(get_sub_field('acf_sub_field'));?>
</h1>

PHP function situated in lib/elements.php
Critical CSS for letter entrance animation situated in css/animations.css
Critical JS script lettering.js (CDN) enqueued in functions.php