Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
isaballoon

jQuery imports conflicting with Greensock

Recommended Posts

I've got a TimelineMax animation working to my satisfaction but once I import jQuery libraries it breaks my Greensock animations.  Whether I handle jQuery imports in the head or at the bottom of the HTML page doesn't seem to matter. 

 

My set up is such that I've got my TweenMax import at the bottom of the page just above the window.onload section. 

 

What am I missing here?

Share this post


Link to post
Share on other sites

hello

  • what is the order of your script tags?
     
  • are you running your GSAP code after both jQuery and GSAP has been loaded?

scripts in head:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>

</head>
<body>

</body>
</html>

scripts in the bottom the body tag:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
</body>
</html>
  • do you have the jQuery and GSAP library script tags both declared in the head or before the ending body tag?
     
  • are you also waiting for the DOM to be ready before running your custom GSAP code?

it would be good to give us an example of the page so we can better help you. :)

Share this post


Link to post
Share on other sites

Here's the order that isn't working for me:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>title</title>

<!-- jQuery slider --> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
  	$(function() {
    	$( "#slider" ).slider();
  	});
</script>

</head>
<body>

(body content)

<div id="sliderWrapper"></div>
	<div id="slider"></div>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>

window.onload = function() {

var tl = new TimelineMax();
tweens here
}

</body>
</html>

Share this post


Link to post
Share on other sites

 It would really help if you posted some of your TimelineLite / tweening code as that is probably where the issue is.

 

The only thing I can guess that might be an issue is that you are using invalid String targets for you tweens.

 

When jQuery isn't loaded the following is fine

TweenLite.to("someDivID", 1, {left:200})

TweenLite's basic ID selector assumes the string is an ID and passes it into document.getElementByID("someDivID")

 

When jQUery IS loaded, the String gets passed into a jQuery selector and won't work as their is no #

TweenLite.to("someDivID", 1, {left:200})

Which would result in $("someDivID") (missing #")

 

When using jQuery the proper format would be

 

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

 

The resulting jQuery selector would be $("#someDivID") 

 

Again, this is just a guess. A small example hosted on codepen or jsfiddle would be very helpful.

 

We have had no issues with using GSAP and jQuery, in fact we recommend it.

  • Like 1

Share this post


Link to post
Share on other sites

Ok, the files are stipped down to include the image gallery only. I posted two pages: one to show the tweens working as expected. Two, the second with the inclusion of a jQuery UI slider. 

 

TimelineMax alone (anim works):

http://erikkittlaus.com/preview/anim.html

 

TimelineMax with jQuery slider (anim broken):

http://erikkittlaus.com/preview/animPlusjquery.html

 

(note the slider, though in the flow of the document, sits above the gallery. Anyone know why it doesn't flow below the marquee div?)

 

Thanks for much for helping with this, guys. Really appreciate it. 

Share this post


Link to post
Share on other sites

you need to remove the quotes around your variables.. the quotes make it a string.. so remove the quotes

 

you had this which was wrong syntax for profileHero:

var profileHero = document.getElementById("profileHero");
tl.from("profileHero", 1, {left: "+=90px"}, "profileHero")

you need to remove the quotes around profileHero in this case:

var profileHero = document.getElementById("profileHero");
tl.from(profileHero, 1, {left: "+=90px"}, "profileHero")

here is your code with variables corrected for the to() and from() methods:

window.onload = function() {
  var profileHero = document.getElementById("profileHero");
  var slopeCap = document.getElementById("slopeCap");
  var elegantCap = document.getElementById("elegantCap");
  var dualMarq = document.getElementById("dualMarq");
  var arcMarq = document.getElementById("arcMarq");
  var tl = new TimelineMax({repeat: 5});

tl.from(profileHero, 1, {left: "+=90px"}, "profileHero")
  .from(profileHero, .8, {autoAlpha:0}, .2)
  .from(slopeCap, .7, {left: "+=40px", autoAlpha:0}, "profileHero+=.4")
  .from(elegantCap, 1, {left: "+=40px", autoAlpha:0}, "profileHero+=.4")
  .add("introReturnLabel", "+=2.5")
  .to(profileHero, 0.5, {left: "-=50px", autoAlpha:0}, "introReturnLabel")
  .to(slopeCap, 0.5, {left: "-=50px", autoAlpha:0}, "introReturnLabel")
  .to(elegantCap, 0.5, {left: "-=50px", autoAlpha:0}, "introReturnLabel")
  .from(dualMarq, 0.5, {left: "+=20px", autoAlpha:0})
  .add("dualReturnLabel", "+=2")
  .to(dualMarq, 0.5, {left: "-=50px", autoAlpha:0}, "dualReturnLabel")
  .from(arcMarq, 0.5, {left: "+=20px", autoAlpha:0})
  .add("arcReturnLabel", "+=2")
  .to(arcMarq, 0.5, {left: "-=50px", autoAlpha:0}, "arcReturnLabel")
  .from(dualPadMarq, 0.5, {left: "+=20px", autoAlpha:0})
  .add("dualPadReturnLabel", "+=2")
  .to(dualPadMarq, 0.5, {left: "-=50px", autoAlpha:0}, "dualPadReturnLabel")
  .from(aboveMarq, 0.5, {left: "+=20px", autoAlpha:0})
  .add("aboveReturnLabel", "+=2")
  .to(aboveMarq, 0.5, {left: "-=50px", autoAlpha:0}, "aboveReturnLabel")
  .from(keyboardMarq, 0.5, {left: "+=20px", autoAlpha:0})
  .add("keyboardReturnLabel", "+=2")
  .to(keyboardMarq, 0.5, {left: "-=50px", autoAlpha:0}, "aboveReturnLabel")
  .add("keyboardOutReturnLabel", "+=3")
  .to(keyboardMarq, 0.5, {left: "-=50px", autoAlpha:0}, "keyboardOutReturnLabel");
} 

your to() and from() methods had the ID variable instance as a string instead of as a variable.. notice in the code above, i removed the quotes you had around the ID variables for the GSAP target selector

 

you are using native javascript document.getElementById() ..which has nothing to do with jQuery .. do you see what i mean ?? :)

Share this post


Link to post
Share on other sites

Yeah, that's no good. Interesting that the string works in the version without the jQuery. Anyway I've made the changes you suggested and indeed it works. 

 

http://erikkittlaus.com/preview/animPlusjquery2.html

 

Next step is getting the slider to drive the animation. I'll see if I can get that working now. 

 

Beyond that I have one more bit of functionality I'd like to ask for some help with. I've got an animated gif I'd like to have in place (and then disappear once the images are loaded). As soon as I get the slider working I will post files and inquire about it. 

 

Thanks again for your input, Jonathon (and everyone else)!

Share this post


Link to post
Share on other sites

if you were to use jquery with GSAP you still couldnt use just "profileHero" .. in that case you would use "#profileHero" .. notice the hash tag #, which represents the ID attribute of the tag your targeting .. when jQuery is included with GSAP on the page.. then GSAP can use the selector syntax used in jQuery in its target parameter

 

yeah post your code example for the loading gif you want to do and im sure we can help you :P

 

in that case you can have a css class on your main wrapper div in your html markup.. that has the loading gif background property.. then once the page loads.. meaning inside the window.load event you would add javascript to remove the class from the wrapper div and fadein/show your elements

Share this post


Link to post
Share on other sites

Strictly a CSS thing, but do you know why the slider is positioned above the marquee gallery?

Share this post


Link to post
Share on other sites

the reason the variable works without a string is because you are using native javascript. You are using this:

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

document.getElementById() is a not jQuery.. its the faster native javascript way of referencing a element object with a specific ID of a tag ..

 

if you were to do it the jQuery way it would look like this:

var profileHero = $("#profileHero");

or you could just pass the string like "#profileHero" if jQuery is included in your page

 

to get the hang of GSAP i suggest to bookmark the DOCs .. its a great resource:

 

http://api.greensock.com/js/

 

and it looks like the ui slider is positioned above the marquee gallery because of the floats you have on the ui slider.. you have a float left and clear left on it

  • Like 2

Share this post


Link to post
Share on other sites

Jonathon, I've posted a version with a loading gif in the center of the screen. Would you (or someone else) be able to show me how I can implement this as a loading gif while the gallery images load?

 

http://erikkittlaus.com/preview/animPlusjquery3.html

 

Also, the last 4 tweens in the TimelineMax sequence aren't animating in, as intended. They're duplicates of the first few objects animating in at the top of the sequence. Is that a no no? Any clue as to why aren't they working?

 

(Thanks so much for your help in advance)

Share this post


Link to post
Share on other sites

Hi,

 

The solution for the first issue the best choice would be use a preloader code for the images. Just like in this post as in other posts I recommend you David DeSandro's Images Loaded, it works with JQuery's deferred object, so when all the images are loaded you can create a callback that makes the spinner disappear and start the slider's animation. You can see a working sample here:

 

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

 

You can use the "done" callback when all the images are loaded, you create a tween to make the spinner disappear and when that tween is complete you start the slider animation.

 

Your second issue is a tricky one of the from() method. Before you call those 4 tweens you animated all the elements opacity to 0 through autoAlpha:0 using .to() instances. Then you're using .from() instances like this:

.from(element, time, {autoAlpha:0})

That is telling the engine take the element from opacity:0 and visibility:hidden to it's actual state, the problem is that the actual state is opacity:0 and visibility:hdden, so nothing happens, therefore you need to change the from() instances to to() instances with the ending values, that'll be autoAlpha:1 and subtracting each element's specific left position.

.to("#profileHero", 1, {left: "-=90px"}, "keyboardOutReturnLabel+=1.1")
.to("#profileHero", .8, {autoAlpha:1}, "keyboardOutReturnLabel+=1.3")
.to("#slopeCap", .7, {left: "-=40px", autoAlpha:1}, "keyboardOutReturnLabel+=1.5")
.to("#elegantCap", 1, {left: "-=40px", autoAlpha:1}, "keyboardOutReturnLabel+=1.5")
	;

Best,

Rodrigo.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×