Jump to content
Search Community

Just started, can't get it to work at all...

failure13 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>This is only a test</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico" />
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script type="text/javascript" src="133.js"></script>
</head>

<body>
	<div id="main">

		<div id="header">

			<div class="title">
				@ music ?
			</div>

		</div>
		
    	<ul id="menu">
        	<li><a href="133.html" class="active">Музыка</a></li>
        	<li><a href="#">Видео</a></li>
        	<li><a href="#">Софт</a></li>
        	<li><a href="#">Фестивали</a></li>
        	<li><a href="#">Контакты</a></li>
        </ul>

		<div id="page">

				<div class="content">
					<h3>IDM</h3>
					<img src="pictures/001.jpg" class="picture" alt="BrainDance"/>
				</div>

				<div class="content">
					<h3>Venetian Snares</h3>
					<img src="pictures/002.jpg" class="picture" alt="Venetian Snares"/>
				</div>

				<div class="content">
					<h3>APHEX TWIN</h3>
					<img src="pictures/003.jpg" class="picture" alt="Aphex Twin"/>
			        </div>

		</div>

		<div id="footer">
			<p>2013 year of sound</p>
		</div>

	</div>
</body>
</html>

That's my html file, at first i load TweenMax.min.js

then i load my 133.js file, which is:

var test = document.getElementById(".content");

btn.onmouseover = function() {
	TweenLite.to(test, 1.5, {css:{backgroundColor: "#ff0000"}});
}

btn.onmouseout = function() {
	TweenLite.to(test, 1.5, {css:{backgroundColor: "#1f00F0"}});
}

Nothing happens on mouse over, did i missed something?

Link to comment
Share on other sites

You are using docuement.getElementByID() but you are passing in a class.

That's my guess for the problem.

 

If you are just starting out, you may prefer to use jQuery as it makes selecting elements very easy and safe across a wide range of browsers.

 

If you want to use native selectors, this is a good article to read:

http://www.leebrimelow.com/native-methods-jquery/

 

I would strongly suggest you read through the GSAP JS Jump Start:

http://www.greensock.com/jump-start-js/

 

And experiment with all the demos on codepen:

http://codepen.io/collection/ifybJ

  • Like 1
Link to comment
Share on other sites

Yes, you can make it work with only JavaScript. Just jQuery is very easy to use and makes everything faster;

 

Here is a pen with pure JavaScript. http://jsfiddle.net/3HmJg/

 

Still, I would recommend you using jQuery. Unfortunately CSS/JS/HTML are non as consistant as Flash and have a lot of differences. If you are beginner javascript coder, consider starting with jQuery tutorials like http://www.impressivewebs.com/jquery-tutorial-for-beginners/   :) If you tell me more what exactly effect are trying to create, I can explain to you ( in english or russian ) how to do it. 

Link to comment
Share on other sites

bassta

thx for help man,i don't know...just don't understand why pen you've sent works, but when i do same in here - it doesn't...

 

Can you just send me local HTML / CSS /JS test files, so i can see what i miss?

Probably i mistake on loading js libs...i don't know :\

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>This is only a test</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="shortcut icon" href="http://htmlbook.ru/favicon.ico" />
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="133.js"></script>
</head>

Than i just copy your .js file, and it still doesn't work, no animation happens at all...But on pen everything works :)

 

 

If you tell me more what exactly effect are trying to create, I can explain to you ( in english or russian ) how to do it.

 

 

 

For 3 hours already i'm trying to see anything animates with GSAP JS on my own files, but as hard as i try it - still can't see any effect :D

 

Seems that i have some stupid mistake somewhere...But as you can see my test codes are very simple, so i don't even know...

Link to comment
Share on other sites

If you are not using jQuery and add the files to the beginning of the html the html is still not rendered so the script does nothing. You can either put your JS files at the bottom, or to use a jQuery and wrap you script in special jQuery function :

 

<script type="text/javascript">
$(function(){
    //your code here will run after the page loads so everything is OK
});
</script>

 

If you give me a link to your webpage I can tell you where exactly is the problem.

 

http://bassta.bg/experiments/failure13.zip

 

You can download the files from here. Suggest you to read this article to get you started

 

http://learn.jquery.com/about-jquery/how-jquery-works/ 

Link to comment
Share on other sites

bassta

If you are not using jQuery and add the files to the beginning of the html the html is still not rendered so the script does nothing. You can either put your JS files at the bottom, or to use a jQuery and wrap you script in special jQuery function

Cool, that helped!

 

But wait, if i understood you correct it is only possible to select ID through GSAP JS, and impossible to select classes?

And with jQuerry it is easy to select everything, correct?

 

coz with your no jQuerry code, you need to hover the button, to see effect, i wanted to hover .content itself, to see effect, just as in you jQuerry version, so without jQuerry it seem to be impossible?

Link to comment
Share on other sites

Well, actually you can't select anything with GSAP itself. You need pure JavaScript to select the elements you want(by class, id or type). With pure JavaScript it is harder, also don't work the same in all browsers. jQuery makes it very very easy to select anything and works very well with GSAP, so I would recommend you to use them both in your project. 

 

The no-jquery code is different, because I saw your original code (

btn.onmouseover = function() {
    TweenLite.to(test, 1.5, {css:{backgroundColor: "#ff0000"}});
}

btn.onmouseout = function() {
    TweenLite.to(test, 1.5, {css:{backgroundColor: "#1f00F0"}});
}

 )

and thought you want to animate the background color when button is hovered (not the element itself), so I just added that button. 

 

But to understand how things work in JS, first start reading basic JS/jQuery tutorials ( see my previous posts) and once you understand selectors, you'll be able to animate the things you want with GSAP. But selectors comes first. 

 

 

Some links that can help you get started with the basics:

 

http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/

 

 

http://www.codeproject.com/Articles/246701/JQuery-for-Beginners

 

http://www.1stwebdesigner.com/tutorials/jquery-beginners-1/

Link to comment
Share on other sites

bassta, Thanks for jumping in with all the help and links.

 

Just 1 small clarification.

 

GSAP has an a very small selector engine built in for you that can accept IDs of elements

 

If jQuery isn't loaded, you can do this:

<div id="content">some text</div>
TweenLite.to("content", 1, {left:200});

All Tweenlite is doing is passing "content" to document.getElementByID() for you; a small convenience. 

 

If jQuery is loaded TweenLite assumes you want to use it as your selector engine so you could then do

 

TweenLite.to("#content", 1, {left:200});

if jQuery is loaded, TweenLite will create a jQuery object from the "#content" string like so: $("#content"); 

 

Failure, as Bassta has mentioned, jQuery makes selecting elements for tweens much easier than the native JavaScript methods. Some people complain about the filesize of jQuery but the truth of the matter is that most sites are using jQuery already, the files are most likely cached, and it can save you a lot of time. For beginners it really is the way to go.

 

Usually the people who complain about jQuery are advanced enough to do things their own way. The benefit of GSAP is that it really doesn't matter what you choose. It still works. There are even ligher selector engines like Sizzle() that do most of the common selector tasks. 

 

You can tell TweenLite to use any selector engine you want (as long as its loaded) by using

 

TweenLite.selector = SomeEngine

 

You probably don't have to worry about that right now. 

Link to comment
Share on other sites

Thank Carl, didn't know about this feature. I'm starting reading the full documentation again right now! 

 

@Faulure13 there is selector called querySelectorAll() that acts kinda jQuery. If you're just testing code in webkit browsers it acts great. if the filesize of jQuery is a problem, take a look of Zeptojs

( http://zeptojs.com/ ). If zepto filesize not small enough, consider using min.js ( https://github.com/remy/min.js ). It is 619kb only and takes care of basic functionality like selecting elements and event handling.

Link to comment
Share on other sites

Woah, so many articles i need to read!

Awesome!

 

Will describe my impressions tomorrow, but thank you a lot for help guys!

 

P.S. Main problem for me is that in my country a lot of my freelance projects are...Please don't laugh, for IE6 also, which is embarassing, but it is still alive for some unbelivable reason...

 

So, there is two questions that really matter:

1. Size, that's why i'd like to use pure GSAP in small cases, coz i'm simply in love with all AS3 stuff, and concepts behind Timeline, it's not that easy to repeat such stuff with pure JS or jQuery!

2. Will GSAP work as perfectly as GSAP + jQuerry (or zepto.js or min.js) in stupid old browsers like IE6? I've checked GSAP + jQuerry in IETester soft (highly recommended to test all IE versions btw), and was fairly amazed that it works at all!

And works not as lazy as i would expect to see!

But i already find some bug with this little peace of code, so it will be a long journey...

Anyway, will tell my results tomorrow! Thx again!

Link to comment
Share on other sites

I've read a lot already, starting to understand more...

 

But i got question that i haven't seen answered in tutorials i've watched yet, what if i need to reference for example to som specific tags like p, img, h3 inside .content ?

 

In CSS i would do it like ".content img", but obviously jQuerry syntax is a bit different, and it doesn't work that way, so how can i do it with jQuerry?

Yes, it will work for old browsers, but use jQuery version 1.9.1, not jQuery 2.x, because after version 2 IE8-- support dropped

Wonder why they did it? Probably some CSS3 complications...Anyway, i could do with 1.9.1 by now, thx for mentioning)

 

Yeah, i live now in Russia, in here most of my clients are bosses of some firms, that ask questions like: "Why it works so good on my iPad, and doesn't work in my IE6"...

Link to comment
Share on other sites

Hi;

 

 

from jQuery website:

"

Remember that jQuery 2.0 will not run on IE 6, 7, or 8; we’re saving that duty for jQuery 1.9. We fully expect that most Internet web sites may continue to use jQuery 1.x for quite a while, as long as older versions of IE still comprise a large proportion of web surfers. And so the jQuery team will also continue to support both the jQuery 1.x and 2.x lines. Don’t feel like you’re missing something or falling behind by using 1.9 on your web site, since the APIs for 1.9 and 2.0 are the same.

"

 

The jQuery selectors are just like CSS: 

 

If you have element with class name "content" and img tag inside id

 

<div class="content">

<img src="img.jpg"> 
<p>paragraph</p>

</div>

 

 

jQuery selector $(".content img") will select the image. A friend of mine summed up good learning resources for jQuery : http://tutorialzine.com/2013/05/the-best-free-books-videos-tutorials-and-more-for-learning-jquery/ 

 

 

Link to comment
Share on other sites

Ok i get it, but not completely.

For example, here:

$(document).ready(function() {
    // this will run after the page loaded
    var test = $(".content");

    test.hover(function() {
        TweenLite.to(".content h3", 0.5, {color: "#21a7bf"});
    }, function() {
        TweenLite.to(".content h3", 0.5, {color: "#353535"});
    });
});

Logically it should animate selected .content's h3 color, when i hover the mouse .

Well it does, but not just for selected, it do this for all h3 in all .content divs...

I feel that i should do something like this + ".content h3", but it doesn't work this way, can't find nothing like that in GSAP JS docs...

 

P.S. Thx for another nice resourse! And btw, i love your blog, awesome stuff in there, especially text-animation examples!

Link to comment
Share on other sites

That logic isn't quite accurate. TweenLite only does what you tell it to do. TweenLite doesn't know anything about that tween being fired because you hovered over an element.

 

In the following code you are specifically telling TweenLite to animate all h3 elements inside .content

TweenLite.to(".content h3", 0.5, {color: "#21a7bf"});

There are 2 common ways of knowing which element was hovered over 

1) inside the scope of your hover functions "this" refefers to the element firing the event.

2) each function gets past an event object (just like in Flash) from which you can find the target of the event.

 

The code below illustrates both methods:

html

<ul id="nav">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

js

$("#nav li").hover(over, out)


function over(){
 //"this" refers to the li you rolled over
 TweenLite.to(this, 0.5, {backgroundColor:'red'});
}


//just like flash this function gets past an event object
function out(e){
  TweenLite.to(e.target, 0.5, {backgroundColor:'blue'});
}

live demo:

See the Pen 697fdca2c6f5ad6c8eb34f8c8c318c3f by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Ok, i perfectly understood this example, but i don't understand in this case:

 

html

<div class="content">
	<h3>IDM</h3>
	<img src="pictures/001.jpg" class="picture" alt="BrainDance"/>
</div>

<div class="content">
	<h3>Venetian Snares</h3>
	<img src="pictures/002.jpg" class="picture" alt="Venetian Snares"/>
</div>

<div class="content">
	<h3>APHEX TWIN</h3>
	<img src="pictures/003.jpg" class="picture" alt="Aphex Twin"/>
</div>

What i want to do is when i hoover one of the .content elements, i want to change color specifically only of this selected .content element's h3, and i still don't understand how i can specify such task with GSAP JS...

 

P.S. I really love js syntax that you've posted above, but it doesn't look like jQuery, so i got question, can i code in this fashion (which look a lot like as3) and still be compattible for all browsers, just as if i would use all-jQuery syntax, except tweens itself?

 

If i could use function constructions like this, this could help me a lot to understand principles and don't think about new syntax stuff too much))

Link to comment
Share on other sites

Well, i mean i've done:

TweenMax.to(circle, 8, {rotation: 360, repeat: -1, ease: Linear.easeNone});

But this doesn't work in IE 6-8, at least according to IETester.

It works in Firefox and Safari, in old Opera like 9 it doesn't..

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

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