GSAP - ProcessWire - UIKit

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

Beispiele

Beispielszenario 1 - Section Animationen mit ScrollTrigger und ProcessWire

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.

Übersicht

Benötigte Dateien

_init.php
site/templates/includes/Animation.php
site/templates/includes/animations.inc
site/templates/fields/animations/myAnimationTemplate.php
site/templates/scripts/animations.js
Box.php 

_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;
 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;
		$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 kann optional gewrapt werden

animations.inc

/**
 * animations.inc
 * Helperfunctions for animations with gsap and processwire
 * needs Animation Class from Animation.php
 * mainly used in layoutblocks to render animation markup if nessecary
 */

 /**
  * renderAnimationCode
  * @param Page
  * @param String - Markup we need to expand with animation markup
  * @return String
  */
function renderAnimationCode($page,$out){
  $ani = new Animation();
  if($page->fp_section->section_animation && $animationName = $page->fp_section->section_animation->value){
          // get animation markup
          $animationContent = $ani->renderAnimationTemplate($animationName,array('box'=>true)); 
          // as animation object extends Box we can use it to add additional wrapper
          $ani->addClasses('ani-wrapper');
          $ani->addClasses('ani-wrapper-'.$animationName);
          $out = $ani->wrap($out.$animationContent); // wrap section markup + animation markup in a container
  }
  return $out;
}

Diese kann von unseren Seitentemplates (wir nutzen eigene Templates für verschiedene Inhaltstypen) um jeweils am Ende den Code für die gewünschte Animation einzufügen.

Im Backend kann der User über ein Dropdown Feld (section_animation) eine Animation auswählen. Hat er das getan wird über $page->fp_section->section_animation der Wert des Feldes ausgelesen. Unsere Animationstemplates entsprechen diesem Namen. Wir erstellen ein Animations Objekt und übergeben diesen an Animation->renderAnimatioinTemplate(). Daraufhin wird uns der benötigte code zurückgegeben. Da das Animation Objekt auch alle Box Funktionen beinhaltet, können wir es auch gleich nutzen um einen Wrapper drumrum zu legen. Beispiel