Jump to content


IE issue

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

I am new to both Jquery and TweenMax but so far I love using TweenMax js.


I took the code from http://www.snorkl.tv...script-preview/ exploding bunnies example and tweaked it a bit to get a effect of multiple rain drops falling on the screen. It looks good in firefox, chrome and safari but in ie 7 and 8 (I don't currently have access to ie 9) it is not displaying correctly. There is only 1 rain drop displaying and it is grey instead of the white png. Also I have it paused when loaded and have a click event to play the tween but it is playing upon load.

Any ideas of what I am doing wrong?

here is my code:

var rainDrops = $(".rainDrop");

var frame3Tl = new TimelineLite({paused:true});

rainDrops.each( function (index){

var delay = 1 + (Math.random()*2);

var duration = 1 + (Math.random()*3);

var left = 7 + (Math.random()*840) + "px"


var rainDrop = $(this);

$(this).css({'left': left});


frame3Tl.insertMultiple([TweenMax.staggerTo(rainDrop, duration, {css:{rotation:1}, ease:Power1.easeOut, delay:delay, repeat:-1}),

TweenMax.staggerTo(rainDrop, duration, {css:{rotate:"1deg", top:"504px"}, ease:Linear.easeNone, delay:delay, repeat:-1}),






Thanks for your help!

Link to comment
Share on other sites

I noticed a few problems:


1) You have some syntax errors, like you've got a comma (,) after the last staggerTo() which shouldn't be there


2) You're passing an array of TweenMax.staggerTo() calls into the insertMultiple, but remember that staggerTo() returns an array. So you're essentially passing something like this: [[tween],[tween]] which is an array of arrays, but it's supposed to be an array of tweens.


3) You appear to be stacking 2 tweens of the same object on top of each other, both of which are trying to control the "rotation" property. And why are you only rotating to 1 degree? Seems unnecessary and doing transforms (like rotation) in IE8/IE7 is very expensive performance-wise. Your 2nd tween would overwrite your first, so that one is completely wasteful and can be eliminated.


4) You are using a staggerTo() to tween only one object whereas that method is intended to take an array of objects and tween them all in a staggered fashion. Your actual tweening code could probably be simplified to:


frame3Tl.insert( TweenMax.to(rainDrop, duration, {css:{rotation:1, top:504}, ease:Linear.easeNone, delay:delay, repeat:-1}) );


5) This isn't a problem, but I figured I'd point out that if your goal is to jump to the 0 position and pause, you can simply cause pause(0) rather than seek(0) and pause().


Does that help?

Link to comment
Share on other sites

Thank you so much for your help! I really do love what Greensock js is capable of and it's ease of use. I can't wait to get more comfortable with how to utilze all of it's capabilities.


I am trying to grasp the concept of how to nest and control nested tweens. What does ".insert" accomplish?


I got the rain drops working in ie8 however now all of the tweens are not working in ie7. Any ideas?


Thanks again!

Link to comment
Share on other sites

insert() simply inserts a tween (or label or callback) into a timeline instance. Once the light bulb goes on regarding how timelines work, I think you'll really like them. Think of them as just containers for your tweens so that you can schedule them however you please in relation to one another.


Carl did a fantastic job on his video series:



That was for v11, so a few of the property/method names have changed slightly but the concepts are all identical. I would definitely recommend checking the video series out.


As far as stuff not working in IE7, it's tough to say exactly why without seeing the HTML/JS/CSS for myself. Maybe you've got a syntax error somewhere.


Happy tweening!

Link to comment
Share on other sites

Thanks again for the advice. It was a syntax error and I got it working again in ie7.


The video series is great, I am already starting to grasp the concept of timelines, although I know I have a lot more to learn.


A few questions for you:


1) In my timelines if I use append to insert to insert as tween it does not seem to listen to my sdjustment of the tween time.


For instance below it is not waitng 2 seconds to start this tween :

f3Clip1.insert( TweenMax.to(weeds, 4.5, {css:{left:"100px", top:"187px"}, ease:Linear.easeNone}, 2));


same thing for the append:

f3Clip2.append( TweenMax.fromTo(weedBtn, .2, {css:{width:"249px"}}, {css:{width:"+=6px", left:"-=3"}, yoyo:true, repeat:1}, 5 ));


But when I insert a tween into a timeline using with the followin it listens to the timing:

frame2Tl.to(seedBag11, 1.75, {css:{top: '375px'}, ease:Bounce.easeOut}, 3.25);


Am I doing somethin wrong with my use of insert and append?


2) This may be a question for the modernizr formum but do you know if I can use modernizr with tweenMax? So for instance on my web page in the 4th frame I have a rotating animation but in ie the png is rendering a black outline during thte tween (I see this issue had been addressed in the forum already) So is there a way to use modernizr to detect ie and hide the rotation tween in ie only and display another tween completley? Then after the tweens are complete show the same element on all browsers?



Link to comment
Share on other sites

1) You're just putting the offset in the wrong place. You put it inside your TweenMax.to() call instead of the insert() or append() call itself.


f3Clip1.insert( TweenMax.to(weeds, 4.5, {css:{left:"100px", top:"187px"}, ease:Linear.easeNone}, 2));

f3Clip1.insert( TweenMax.to(weeds, 4.5, {css:{left:"100px", top:"187px"}, ease:Linear.easeNone}), 2);


Notice the very end where the 2 is.


2) I'm sure you could add conditional logic to your own code if you want things to tween differently in different browsers, but keep in mind that a TON of work went into making transforms like rotation work in older versions of IE and they do indeed work, but if you have a png that has areas of semi-transparency, IE renders it in a funky way. So I definitely wouldn't want to just make transforms NOT work in older versions of IE, and it would be impossible for the engine itself to discern if your element contains any PNGs with transparency and then turn off transforms. See what I mean?

Link to comment
Share on other sites

  • 2 weeks later...

Still loving TweenMax and TimlineMax!


Right now I am trying to get several image icons to rotate around another image in a circle while having the rotating images alway remain verticle.


Do you happen to know off hand if a good way to achieve this with tweenMax?


Right now my idea is to use tweenMax.to and individualy tween the image icons to the next position in a set of nested timlines.


It seems to possibly be the right solution but at the moment the timeing and positioning of each tween is a little off.


One thing I can't seem to do is have the main timeline delay for 3 seconds and then play the nested timlines. The nested timlines seem to ignore the delay and play right away.


Is there a good way to get the sequnced tweens to play right after each other to create a smooth rotating effect? Or is there a better wat to achieve this?


Below is my code:

// Frame #4

var f4Clip1 = new TimelineMax();

var f4Clip2 = new TimelineMax();

var frame4Tl = new TimelineMax({delay:3, paused:true});


f4Clip1.insert( TweenMax.to($('#retailerExpert'), 1.5, {css:{right: "193px",top: "71px"}}));

f4Clip1.insert( TweenMax.to($('#dealerExpert'), 1.5, {css:{right: "134px",top: "223px"}}));

f4Clip1.insert( TweenMax.to($('#agroExpert'), 1.5, {css:{right: "236px",top: "349px"}}));

f4Clip1.insert( TweenMax.to($('#scientistExpert'), 1.5, {css:{right: "396px",top: "334px"}}));

f4Clip1.insert( TweenMax.to($('#farmerExpert'), 1.5, {css:{right: "502px",top: "241px"}}));

f4Clip1.insert( TweenMax.to($('#industryExpert'), 1.5, {css:{right: "470px",top: "101px"}}));

f4Clip1.insert( TweenMax.to($('#academicExpert'), 1.5, {css:{right: "311px",top: "34px"}}));


f4Clip2.insert( TweenMax.to($('#retailerExpert'), 1.5, {css:{right: "134px",top: "223px"}}),1.4);

f4Clip2.insert( TweenMax.to($('#dealerExpert'), 1.5, {css:{right: "236px",top: "349px"}}),1.4);

f4Clip2.insert( TweenMax.to($('#agroExpert'), 1.5, {css:{right: "396px",top: "334px"}}),1.4);

f4Clip2.insert( TweenMax.to($('#scientistExpert'), 1.5, {css:{right: "502px",top: "241px"}}),1.4);

f4Clip2.insert( TweenMax.to($('#farmerExpert'), 1.5, {css:{right: "470px",top: "101px"}}),1.4);;

f4Clip2.insert( TweenMax.to($('#industryExpert'), 1.5, {css:{right: "331px",top: "41px"}}),1.4);

f4Clip2.insert( TweenMax.to($('#academicExpert'), 1.5, {css:{right: "193px",top: "71px"}}),1.4);




Link to comment
Share on other sites

to build sequences of unique tweens more easily please read about insertMultiple() and appendMultiple() in the docs : http://api.greensock.com/js/com/greensock/TimelineLite.html#methodSummary


Example 1: Insert multiple tweens at a time of 2 seconds into a timeline and have them all start at the same time:


var tl = new TimelineLite({});
   TweenLite.to($('#b1'), 1, {css:{left:100}}),
   TweenLite.to($('#b2'), 1, {css:{left:150}}),
   TweenLite.to($('#b3'), 1, {css:{left:200}}),
   TweenLite.to($('#b4'), 1, {css:{left:250}})], 2)

example 1 live demo: http://jsfiddle.net/geekambassador/7hPRR/



Example 2: Insert multiple tweens at a time of 2 seconds into a timeline and have them all play in direct sequence

var tl = new TimelineLite({});
   TweenLite.to($('#b1'), 1, {css:{left:100}}),
   TweenLite.to($('#b2'), 1, {css:{left:150}}),
   TweenLite.to($('#b3'), 1, {css:{left:200}}),
   TweenLite.to($('#b4'), 1, {css:{left:250}})], 2, "sequence")

example 2 live demo: http://jsfiddle.net/geekambassador/LkQDE/


cool stuff. be sure to read about the stagger parameter in the docs




Nesting issue

Your code looks pretty good. Didn't notice any real problem.

I could not reproduce your problem of inserting a child timeline into parent timeline that was paused and contained a delay. When I did this the delay of the parent timeline was honored as shown here: http://jsfiddle.net/geekambassador/6Lmsr/




Circular motion while keeping the elements upright

This is tricky. It is safe to assume that at some point GreenSock's MotionPath tools will be ported to javascript and this will be walk in the park.


I have a horrible hack right here: http://jsfiddle.net/geekambassador/6RdbH/ (tested in chrome only)


Technically you should be able to create a circular path using cubic beziers as shown here:



If you can come up with the proper control points and anchors you should be able to plug them into the GreenSock BezierPlugin and get perfect circular motion. Frankly, doing all that is a bit beyond me right now. docs: http://api.greensock.com/as/com/greensock/plugins/BezierPlugin.html

more info: http://forums.greensock.com/topic/6395-poll-bezierplugin-new-features-and-types/

Link to comment
Share on other sites

Aweome stuff, thank you!


I was able to use the hack and it does the trick.


Is there a way to do an if/else statement using the currentProgress of a tween or timlime? Or maybe if the timline is complete or not?


For instance:

if (timelinemax.currentProgress = 0)

{do something}

else{ do something}

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.