Jump to content
Search Community

Multiple Background Images

thewebdesignerpro test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • 2 weeks later...



I just made my first GSAP animation and by coincidence, its what you ask.

I would create a pen for you, but I also use PHP to read in the images and also all greensock js files.

Here is my code, if you have any questions, feel free to ask:

$array_items = array();

function directoryToArray($directory, $recursive) {
	global $array_items, $startFolder;
	if ($handle = opendir($directory)) {
		while (false !== ($file = readdir($handle))) {
			if ($file != "." && $file != "..") {
				if (is_dir($directory. "/" . $file)) {
					$current = preg_replace("/\/\//si", "/", $file); 
					$array_items[$current] = array();
					if($recursive) {
						directoryToArray($directory. "/" . $file, $recursive);
				} else {
					$file = $directory . "/" . $file;
					$current = preg_replace("/\/\//si", "/", $directory);
					$current = str_ireplace($startFolder."/", "", $current);		
					$array_items[$current][] = preg_replace("/\/\//si", "/", $file);
	//echo '<pre>',print_r($array_items), '</pre>';
	return $array_items;

$output = '';
//$_SESSION[$startFolder] = directoryToArray($startFolder, true);
/** All images of every subfolder 
foreach($_SESSION[$startFolder] as $subdir){
	foreach($subdir as $foto){
		$output .= '<img class="foto" src="'.$foto.'" />';

$_SESSION[$startFolder] = directoryToArray($startFolder,false);
foreach($_SESSION[$startFolder] as $foto){
	$output .= '<img class="foto" src="'.$foto.'" />';

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="_css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="_css/index.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="_js/respond.min.js"></script>
.foto {
	position: absolute;
	left: 50%;
	top: 50%;
<div class="gridContainer clearfix">
  <div id="content"><?php echo $output; ?></div>
//load all greensock.js
$greensock = 'greensock';
$array_items = array();
$_SESSION[$greensock] = directoryToArray('_js/'.$greensock, true);
foreach($_SESSION[$greensock] as $subdir){
	foreach($subdir as $js){
		 echo '<script src="'.$js.'"></script>'; 
function init(){
	var mainTL = new TimelineMax();
	mainTL.add( intro() );

function intro(){
	TweenMax.set(".foto", {xPercent:-50, yPercent:-50, opacity:0});//handles all vendor prefixes of translateX(-50%) translateY(-50%)
	TweenMax.staggerTo(".foto", .5, { opacity:1 }, 1);

  • Like 1
Link to comment
Share on other sites



In addition to codo's advice, just like to add that GSAP currently doesn't support animating multiple backgrounds' positions. I couldn't tell you why, Carl or Jack would have to clear that up for us.


In the mean time take a look a solution proposed in the following post and the set of codepen examples:



Finally another solution is the one that Codo proposes, set a bunch of images on top of each other (absolute position) and then animate them.



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...