GSAP - ProcessWire - UIKit

Beispielszenarien wie man Animationen mit ProcessWire als CMS, UIKit als CSS/JS Framework und GSAP einsetzen kann.

Beispielszenario 1 - Section Animationen mit ScrollTrigger

Hier möchten wir Animationen abspielen, die beim Scrollen abgespielt werden, wenn der Benutzer die Section erreicht.

• Die Animationen sollen für den Redakteur wählbar sein.
• Die Animationen an sich sind vorgefertigt
• Wenn sie nicht benötigt werden soll der Code nicht eingebunden werden.

_init.php

// ANIMATION CODE
if($page->opt_2){
  include_once('includes/Animation.php'); // include Animation Class
  include_once('includes/animations.inc'); // include additional animation helper functions
  page()->additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'styles/animations.css" />
<script src="'.urls()->templates.'vendor/gsap/gsap.min.js"></script>
<script src="'.urls()->templates.'vendor/gsap/gsap.min.js"></script>
<script src="'.urls()->templates.'vendor/gsap/ScrollTrigger.min.js"></script>
  ';
}

In der _init.php laden wir die benötigten Skripte:

Über das Feld $page->opt_2 (Checkbox) kann der User festlegen ob für die Seite die benötigten Skripte geladen werden.

page()->additionalHeaderData wird in einem späteren Template eingefügt. Man könnte auch über einen Hook arbeiten, dies ist aber eine einfache effektive Lösung.

Animation.php liefert die Klasse Animation, die im wesentlichen Funktionen bietet um Code aus einem Template zu laden und in den aktuellen Markup einzubetten.

animations.inc liefert Helferfunktionen für die Layoutblocks.

Animation.php

<?php namespace ProcessWire;
/*
 * GSAP ANIMATIONS FOR 3B
 * v0.1
 * Helper functions for the GSAP Animation. 
 * I.e. for loading nessecary assets.
 * The animation itself is handled by animation.js
 */

 class Animation extends Box
{
	public $classes = array();
	public $styles = array();
	public $classesMarkup = '';
	public $stylesMarkup = '';
	public $attributes = array();

	// init section with page values aka layout_block values
	function __construct($classes = array('ani-box'), $styles = array(), $attributes = array()){
	}

	/**
	 * Uses a template file to create the animation markup inside a wrapper box
	 * @param String template filename (without suffix)
	 * @param Array associative Array containing rendering options
	 */
	function renderAnimationTemplate($animationName,$options=array()){
		$defaults = array(
			'box'=>false, // wrap the animation template content in a container?
			'classes'=>'ani-box', // classes for the container (if used)
			'assetPath'=>urls()->templates.'assets/animations', // path to animation assets - can be used by templates
			'templatePath'=>'animations/'.$animationName // render templates starting at /site/templates/
		);
		$options = array_merge($defaults, $options);
		$options['animationName'] = $animationName;
		bd($options);
		$animationBoxContent = page()->renderValue($options,$options['templatePath']);
		
		$animationBox = new Box();
		if($options['classes']) $animationBox->addClasses(preg_replace("/[^a-zA-Z0-9-\s]+/", "", $options['classes']));
		$animationBox->addClasses($animationName);
		if($options['box']) $animationBoxContent = $animationBox->wrap($animationBoxContent,'div');

		return $animationBoxContent;
	}
}

Die Klasse Animation bekommt von der Klasse Box alle Funktionen zum einfachen erstellen von HTML Containern mit Klassen und Attributen. Wichtig ist aber die renderAnimationTemplate Funktion. Diese holt ein Template welches im Ordner site/templates/fields/animations/meinAnimationsName.php liegt. Der Code wird am Ende