Jump to content
Search Community

Selecting objects

Fernando 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

Hi,

 

I have several buttons named secuentially (bot0, bot1, bot2...) and I'd like to be able to select them individually within a tween.

 

Is there a way to achive that?

I'm pretty new to js and I don't know if that's possible.

 

Here's the tween:

 

TweenLite.to(bot0, .2, { backgroundColor:menuColorIdle[str.charAt( str.length-1)], ease:Cubic.easeOut});

I'd like to be able to select, let's say, bot2 without changing much. Passing 2 to a function for example.

 

Thanks in advance

Link to comment
Share on other sites

Assuming that the names are actually ids then it should be fairly straight forward

 

<button id="bot0"></button>

<button id="bot1"></button>

 

 

 

function tweenElement(num) {
var element = document.getElementById("bot" + num);
TweenLite.to(element, 1, {left:200});
}
 
Link to comment
Share on other sites

I guess I could also use jquery selector, right?

 

$('bot'+num)

I finally created an array instead of individual elements.

Makes more sense.

 

I have another problem selecting elements.

I want to assign some behaviours to the buttons with this loop:

 

for (var i=0;i<5;i++)
	{
	tapa[i].parent().mouseenter(function() {bgChange(i,0);});  
	tapa[i].parent().mouseleave(function() {bgChange(i,1);});
	}

Then the function:

function bgChange(elem,tipo){
		if(tipo==0)
			{
			TweenLite.to(tapa[elem], .2, { backgroundColor:menuColorIdle[elem], ease:Cubic.easeOut});
			}else {
				TweenLite.to(tapa[elem], .5, { backgroundColor:menuColorOver[elem], ease:Power1.easeOut});
				}
		
	}

The problem is that the tween only sees i=5, instead of assigning secuential numbers to the functions.

 

I just don't know how to pass the value.

 

Thank you.

Link to comment
Share on other sites

Yes, jQuery would be an excellent tool to select your elements.

 

From looking at your code, I'm not quite sure why 5 is getting passed into all the functions. I would really need to see all the html and css. Codepen.io is a great tool for prototyping and finding bugs. 

 

 

Perhaps if you put a real basic example on there, I or someone else will be able to quickly identify the problem. Again, from just seeing the js code, it looks like it should work... but being able to add few console.log()'s to track down what is happening would go a long way.

 

Just be sure to link up TweenMax.min.js from the CDN:

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js

 

---

As a side note you may find this example helpful: 

See the Pen iLosa by GreenSock (@GreenSock) on CodePen

It isn't taking the same approach as you, but basically each img in the #nav when clicked figures out what its index() is relative to its parent. Based on that index, it creates a tween on an element with a similar index inside another parent. 

Link to comment
Share on other sites

i doesn't get evaluated at the time you are creating your anonymous functions for mouseenter/mouseleave. Instead, each function is referring to the i variable in its creation scope, and after the loop i is equal to 5, therefore for all the functions i=5.

 

You might want to consider adjusting your mouse event setup. I can't tell if your HTML would correspond to this kind of design, but take a look at

See the Pen uxeFf by jamiejefferson (@jamiejefferson) on CodePen

and see if you could expand on this kind of event delegation to suit your page.

  • Like 2
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...