use .getSelection() ?

[benjino]

I'm trying to incorporate a jQuery string into the following TweenMax and am not even sure if I can do this. I'm using Scott Robbin's backstretch and want to add it to the following string, keeping it but making it work in the string below:

TweenMax.staggerFrom([headline, subhead], 2, {delay:2, scale:0.5, autoAlpha:0}, 3);

Here's what I have working so far but I can't find a way to delay the backstretch. I've tried using .delay() on the backstretch string but that isn't working and would rather find a way to add it to the TweenMax.staggerFrom string. Would I use .getSelection() to add it?

// wait until DOM is loaded
jQuery(document).ready(function($){
	$("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000});
// wait until window is loaded (images, links etc...)
	window.onload = function() {
	var bg 
		headline = document.getElementById("headline"),
		subhead = document.getElementById("subhead");
		  TweenMax.staggerFrom([headline, subhead], 2, {delay:2, scale:0.5, autoAlpha:0}, 3);
		};
 
});

[Rodrigo]

Hi,

 

I'm not sure if I understand clearly, but you could use delayedCall(). It's the engine's setTimeout alternative.

 

I'm presuming that you want the backstrech  to start at the same time with the tween but not as soon as the window is completely loaded. it could be like this:

$(document).ready(function(){

var tn = TweenMax.staggerFrom([headline, subhead], 2, {scale:0.5, autoAlpha:0, paused:true}, 3);

window.onload = function()
{
  //call the function startThings two seconds after the window.onload event
  TweenLite.delayedCall(2, startThings)
}

function startThings()
{
  $("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000});
  tn.play();
}

});

If this is not what you're after please post a reduced sample of the issue using jsfiddle or codepen so we can take a better look.

 

Rodrigo.

[benjino]

That is it but it took me a while to notice that I'm using Wordpress so it begins with jQuery(.document).ready(function($) {

 

...and I just removed this

var tn = TweenMax.staggerFrom([headline, subhead], 2, {scale:0.5, autoAlpha:0, paused:true}, 3);

...and replaced it with this below the function startThings(), like this:

jQuery(document).ready(function($){
window.onload = function()
{
  //call the function startThings two seconds after the window.onload event
  TweenLite.delayedCall(1, startThings)
}

function startThings()
{
  $("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000});
  tn.play();
}

var headline = document.getElementById("headline"),
		subhead = document.getElementById("subhead");
		  TweenMax.staggerFrom([headline, subhead], 2, {delay:3, scale:0.5, autoAlpha:0}, 3);

});

...and now it works the way I wanted it too! Thank you so much!

[benjino]

This is pretty cool, but initially I was hoping to have the BackStretchImg able to be controlled by it's starting scale as well. Any way to do that?

[Rodrigo]

You mean the initial scale of the element that contains the image being streched, or something else?.

 

Sorry I got lost in translation here 

[benjino]

Yes, the image is a png with a transparent background, just the island, and it would be nice to see how it would look with it growing from a small scale to the full size and fading in at the same time, then have the text do its thing a second after. I wanted all three, the background image, headline and subhead together in the TweenMax.staggerFrom([ ] { })

[jamiejefferson]

And what's the problem here? Does it not tween if you add the image into the staggerFrom?
 
I'm not familiar with the tool you are using so I don't know how to get a reference to the elements I'm assuming it adds for this, but once you have it, I can't see why you wouldn't be able to

var headline = document.getElementById("headline"),
    subhead = document.getElementById("subhead"),
    bgimage = (get backstretch DOM element somehow);

TweenMax.staggerFrom([headline, subhead, bgimage], 2, {delay:3, scale:0.5, autoAlpha:0}, 3);

[benjino]

Well that's how I tried approaching it at first but couldn't find the DOM element. I tried all kinds of combinations using the following code string which is the code string used for the backstretch element for http://srobbin.com/jquery-plugins/backstretch/ and using browser dev tools I couldn't find a class or id for the background image and I can usually find anything. I don't understand how WordPress is implementing it, and it seems to be associated with BackStretchImg but I can't figure out what that is or how the following string causes the background image to be affected:

$("body").backstretch([BackStretchImg.src],{duration:7000,fade:1000});

If you look at Scott Robbins backstretch code it is more straightforward of a use of class or id that would be used in this string, but Genesis has it this way and I cannot figure it out. In the CSS body has no background-image, only background-color, and again the image is a transparent png—it is the image that the methods are being applied to.

 

Here's the site in question: http://thekennedybook.com/marketingdev

 

It's pretty cool the way it is now but I still would like to know how to control the scale of the background image like the text is controlled.

[jamiejefferson]

I just inspected your site and this was in the DOM:

<div class="backstretch" style="...">
    <img style="..." src="...">
</div>

Seems like you should be able to select the container with

jQuery(document.body).data("backstretch").$wrap
// or
jQuery('.backstretch')

or the img with

jQuery(document.body).data("backstretch").$img
// or
jQuery('.backstretch img')