jasper

Hi Michael71, thanks for your perseverance, it's appreciated! Sorry, now I'm confused. Did you mean "ending positions"? I hard-coded the starting positions in the timeline code, and am using CSS to determine the ending positions, no? Care to elaborate? Your solution is instructive, but the actual timeline is a lot longer than the one in the codepen (about 30 seconds), so I'm still looking for a way to reinitialize and restart the timeline on a window.resize() event. Thanks for pointing the way to clearprops though...

Hi Michael71, Thanks for replying! Maybe I haven't explained myself very well. In the first (script-free) Codepen, the red square should be, and is, underneath the white square for window widths < 600, and to the right of the white square for widths > 600. In the second Codepen, the hoped-for behaviour is for the final position of the squares to be as described above. It works, except for when I resize the window. If I load the page when the window width > 600 and then decrease the width below 600, the final position of the red square is the same distance from the top of the page as the white square. Conversely, if I load the "mobile" version of the page (load the page with window width < 600) and then increase the width of the page > 600, the red square is lower than the white square. In both of these cases, the final position of the red square is what would be expected with the window at its initial width, not its resized width. I'm sure it's not a framing issue as I'm running an mbp with 16GB RAM and 1GB of video RAM, and anyways I've increased the duration of the tweens in the second pen to 2s each, with the same result. Yes, the boxes keep coming down, but please note that the final position of the red box is not the same if you: 1/ load the page with window width > 600px 2/ load the page with window width < 600px and then resize it to > 600px (the opposite case also applies) thanks

So I'm building a responsive design that basically works. I've put a GS timeline in it; that basically works too. I'm running .from() tweens to animate the position of elements, so that I don't hard-code final positions of elements, which would interfere with the responsive layout(s). That basically works too. The problem happens when the user resizes the browser window while the animation is running. The site is horribly complicated, with a bootstrap layout, but I've managed to re-create the problem in a nice simple codepen (or two). The first codepen is completely JavaScript-free, just to show you the hoped-for result. Kindly resize your browser window and notice that 600px is the threshold width at which the layout changes: http://codepen.io/phranc/pen/pvyPGE Now here's what happens when I add a GS timeline: http://codepen.io/phranc/pen/raemZm Things are fine when the page is first loaded, regardless of the width of the window. However, if I resize the window above (or below) the threshold width of 600px while the animation is running, the final positions of the animated elements are not as expected. It seems to me that the final positions of the .from() tweens are fixed when the timeline is initialized. I'd be OK with just trashing and reinitializing the tlimeline when the window is resized, like this: $(window).resize(function() { //trash all timelines //initialize all timelines //restart all timelines }); However, I'm not sure how to go about that ("kill"? "clear"?) as I'm a bit of a GS noob. Or, maybe there's a better solution that doesn't require me to reinitialize the timeline (or copy/paste 100 lines of JS that I'll never understand). Insights greatly appreciated!

Thanks Diaco.AW! (Just me being an idiot then.)

Sorry for not making a codepen, but my question is so pathetically simple I think it's unnecessary. The following works. (Obviously, it's just supposed to flash the two classes on and off in alternation.) But it doesn't work without the first (or last) two lines of code. Why not? I see redundancy here, and would like to refactor this properly. var foiled_crook = new TimelineMax({repeat:-1}); foiled_crook .set($('.crook'), {autoAlpha:"1"}) .set($('.crook-blocked'), {autoAlpha:"0"}) .add("foiled", "+=2") .set($('.crook'), {autoAlpha:"0"}, "foiled") .set($('.crook-blocked'), {autoAlpha:"1"}, "foiled") .add("trying", "+=2") .set($('.crook'), {autoAlpha:"1"}, "trying") .set($('.crook-blocked'), {autoAlpha:"0"}, "trying") ; Thanks, eh.

Another question if I might jonathan: What is the purpose of "i" passed to the function in the first line? It's in all of the codepens you provide, but not spelled out anywhere, or at http://api.jquery.com/each/ either for that matter. thanks, Ryan

Thank you sir, and thank you for the kind "welcome" to the forum! (My tenth post actually; not sure why this one doesn't show up on my list of posts.) I'll give it a whirl.

I want to animate something (the position of the background image) of a div when the user hovers over (mouseovers) it. There will be several of these divs on a single page. It would be REALLY nice to be able to specify classes, not IDs, of DIVs, when constructing greensock timelines, but as that's impossible I've had a stab at it in this jsfiddle: http://jsfiddle.net/cheolsoo/mp3qes6n/ 1/ why doesn't the (global) value of i get set when the mouseover event fires? I initialized i to 611 but it doesn't change when I mouseover one of the other divs. 2/ (much less critical as I can work around it) my fiddle works (sort of) because I stripped "vid_" away from the div ID and then added it back in the TimelineMax definition. I tried simply passing a variable (e.g. i where i='vid_611' rather than '611') instead of "vid_"+i, but then nothing worked at all. Why not? (Is that a greensock question or a Javascript question? I'm such a moron I'm not even sure.) thanks, eh Ryan

Thank you sir!!

Thanks jamie for the all-greensock answer to my problems!! It's working now, with a few slight tweaks. Yes, generally I was aware that timelines can be nested but (and sorry to sound critical here) the documentation is still lacking in this area. I know I can use .add() to add a timeline to another, but the dynamics of that are not spelled out very well in the documentation (at least anywhere I could find). Your "no need to pause a nested timeline" was very instructive; thank you! I'm still mystified as to why my javascript is screwed though. My (albeit incomplete) understanding of javascript is that everything in the block of code that is NOT in the window.load() function is loaded before the window.load() event fires. Additionally, because the function nextAnim() that I had defined is at the bottom of that block, it should be aware of all of the vr_panx declarations above it. So, why do the vr_panx animations need to be aware of each other? They were declared globally and are being called in sequence by nextAnim().... a concern for another day I suppose. to bed with a fuzzy head but an animation that worksss...... thanks, eh

Hi all, I'm doing a front page with 5 animations where one fades away in place of another, and so on, and then it loops. Rather than write one enormous hideous looping timeline I thought I'd make each of the animations a separate timeline and use callbacks to trigger subsequent timelines and JQuery to fade the relevant DIVs in and out. A condensed version of my code is below. The callbacks work great until I get to the last animation (vr_pan5). It fades in the DIVs required to replay the first animation, but then doesn't restart the first animation (vr_pan1). I tried shuffling the order of the timeline declarations in the code. The issue seems to be an inability to play a timeline at the top of the code, after having played a timeline further down. I also tried moving code in and out of the window.load function, but that didn't make a difference either. Sorry for asking what is essentially a Javascript question and not a Greensock question! Also, sorry for not creating a codepen; I figured a glance at my semi-pseudocode would be enough for someone enlightened. Code follows: var vr_pan1, vr_pan2, vr_pan3, vr_pan4, vr_pan5; vr_pan5 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg5", "#bg5", "#fg1", "#bg1", vr_pan1]}); vr_pan5 .add("start") //tween some stuff ; vr_pan4 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg4", "#bg4", "#fg5", "#bg5", vr_pan5]}); vr_pan4 .add("start") //tween some stuff ; vr_pan3 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg3", "#bg3", "#fg4", "#bg4", vr_pan4]}); vr_pan3 .add("start") //tween some stuff ; vr_pan2 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg2", "#bg2", "#fg3", "#bg3", vr_pan3]}); vr_pan2 .add("start") //tween some stuff ; vr_pan1 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg1", "#bg1", "#fg2", "#bg2", vr_pan2]}); vr_pan1 .add("start") //tween some stuff ; function nextAnim(fadeout_div1, fadeout_div2, fadein_div1, fadein_div2, new_anim) { $(fadeout_div1).fadeOut(); $(fadeout_div2).fadeOut(); $(fadein_div1).fadeIn(); $(fadein_div2).fadeIn(); var o = new_anim; o.restart(); } $( window ).load(function() { vr_pan1.play(); }); Thanks, eh.

Thanks all! I'll link here then? http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js

So I was just updating my HTML template today, and reading a lot about how it's a bad idea to link to the "latest" version of JQuery (which is no longer updated for exactly that reason). Would the same concerns not also affect Greensock? Yet here (http://www.greensock.com/get-started-js/) in your documentation you have: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> I read the boilerplate about how you are very cautious making changes and ensuring backward compatibility, but had to ask. Also, are there not concerns about previous versions being cached? (I don't know much about cache settings; is that something that's configured on your CDN server?) Just looking for assurances that it's okay to put the above line of code in my template and leave it there without thinking about it. Thanks, eh.

Just the quick fix I was hoping for! Thanks m8! (Use TweenLite to manipulate the timeline... so much yet to wrap my head around...) And no, I like that you replaced all of the tweenTos, because in doing so you have also somehow ironed out some other timing issues with the automatic-advancing feature. cheers!

This fiddle: http://jsfiddle.net/cheolsoo/y6LWz/ is behaving ALMOST the way I'd like it to. The only thing I'd like to change is to have the tweens all take the same amount of time. When you move from the third position to the first position by clicking a button, or vice-versa, it takes twice as long as when moving from the first to the second position. I found some answers to similar questions that involved changing the speed of the entire animation, but that would be unwieldy here because first I'd have to have logic to determine whether that was necessary, then increase the speed, then run the tweenTo, then decrease the speed. Thoughts? Do I have to throw this out and start again?