Jump to content
GreenSock

gern

selectors

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

Hi--

 

Just getting started with the JS version, but a long, long time user of the AS version, I'm having some trouble understanding selectors.

 

I made a quick sample to learn the syntax and got this to work:

$(function() {
		CSSPlugin.defaultTransformPerspective = 1000;
		TweenMax.set(cow, {rotationX: 90, transformOrigin:"left top"});

		$( "#btn" ).click(function() {
			TweenMax.to(cow, 4, {rotationX:0, ease:Elastic.easeOut});
		});
	});

I'm not defining "cow" to be anything, but it does exist as an ID to a div. Great, I thought. Very easy, but when I try this on another file it didn't work. Same version of JQ and GSAP (TweenMax), but no go.

 

So I tried this:

var one = document.getElementById("one");

TweenLite.set(one, {left:300, top: "100px", transformPerspective: 600, rotationY:-10});

And it worked. Well, okay. Still, I started a third file and neither of these worked again. I had t to resort to:

photos=new Array("#photo1","#photo2","#photo3");
TweenMax.set(photos[0], {transformOrigin:"left top"});

All using the same version of JQuery and TweenMax. What gives?

 

Also, is there a reason I can only animate my divs when the images are in the background and not the foreground?

 

Thank you!

Link to comment
Share on other sites

Okay, well, as usual, soon after I post the question I find the answer. I was trying to grab the document.getElementById code BEFORE that part of the DOM was loaded.

 

Man, programming is hard. ;)

Link to comment
Share on other sites

Using the automatic vars by ID is not really a best practice in Javascript; browser support has been somewhat mixed on this feature so I would recommend steering clear of it and using jQuery or document.getElementById to select DOM elements first. Even if it's just to say

var cow = document.getElementById('cow');
That way you can know for sure that cow will exist, is a DOM element, and not some other value set in another file somewhere.

 

In terms of using 'selectors' with GSAP, there are a few ways. If you have jQuery loaded, GSAP will use window.$ / window.jQuery as its selector. If there is no jQuery, it will just use document.getElementById. You can also set your own with

TweenLite.selector = window.otherSelector;
Then all you need to do is use your selector string as the target of a tween. e.g.

TweenMax.set("#photo1", {transformOrigin:"left top"}); // jQuery
TweenMax.set("photo1", {transformOrigin:"left top"}); // no jQuery
Of course, if you are targeting an element multiple times, it would be more efficient to save a reference to the element and use that as the tween target e.g.

var photo = $("#photo1");
TweenMax.to(photo, 1, {left: 100});
TweenMax.to(photo, 2, {top: 100});

I'm not sure about the background/foreground problem though. Could you elaborate on this more? Perhaps a codepen or jsfiddle would help to make it clearer.

  • Like 1
Link to comment
Share on other sites

Thanks, and yes. I don't normally use just the ID with javascript. I prefer to declare all my vars and grab them with document.getElementById(). That first sample of mine is just me getting my toes wet, so to speak, with GSAP and javascript.

 

The background image problem I'm having is simple. I can tween a div with rotationX or anything else only when the image is in the background, as defined in the CSS:

 

#cow {background-image: url('cow.jpg');}

 

but if I put an image directly in the div, it won't tween:

 

<div id="cow"><img src="cow.jpg"></div>

Link to comment
Share on other sites

Hi,

 

Most likely this has to do with CSS rather than GSAP.

 

The following code is working fine for me:

 

CSS

body
{
	background: #000;
	margin: 0;
	font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

button
{
	padding: 3px;
}

#wrapper
{
	width: 200px;
	height: 200px;
	margin: 50px;
}

#container
{
	width:200px;
	height: 200px;
	position: relative;
}

#container img
{
	position: relative;
}

HTML

<div id="wrapper">
	
	<div id="container">
		
		<img src="../../img/kittens1.jpg" width="200" height="200">

	</div>

</div>

JS

var wrapper = document.getElementById("wrapper"),
    container = document.getElementById("container"),
    btn1 = document.getElementById("btn1"),
    t = TweenLite.to(container, 2,{rotationX:360, transformOrigin:'50% 50% -100px', paused:true});

TweenLite.set(wrapper, {perspective:600});

btn1.onclick = function()
{
    t.play(0);
}

You can see it here:

See the Pen rCzat by rhernando (@rhernando) on CodePen

 

Feel free to fork it and adapt it to your scenario.

 

Rodrigo.

Link to comment
Share on other sites

Ah, thanks. My CSS was much simpler, so perhaps I didn't include some necessary details.

 

Very good to know it works, though. Thank you!

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.
×