CappMarvell

Hi, That worked perfectly! I'm still unsure why totalDuration didn't work where duration did. I'll look over the docs again regarding that. And the code review is appreciated. Thanks.

Hi, I want to have two sets of animations: Text that fades in and out on one A background image that slides from left to right on the other. This slide effect happens at the same time the text fades in and out Here's my code: const tl = gsap.timeline(); tl.to("#copy1", {duration: 1.0, autoAlpha: 1, onStart: function(){ const tl2 = gsap.timeline(); tl2.set("#slider", {autoAlpha: 1}); tl2.to("#slider", {duration: 9.0, right: 0}); return tl2; } }); tl.to("#copy1", {duration: 1.0, autoAlpha: 0, delay: 2.0}); tl.to("#copy2", {duration: 1.0, autoAlpha: 1}); tl.to("#copy2", {duration: 1.0, autoAlpha: 0, delay: 2.0}); tl.to("#copy3", {duration: 1.0, autoAlpha: 1}); return tl; The code works, but I'm wondering if it could be cleaner, and would like someone to check my code and suggest improvements, if any. Also... I'd like to set the duration of the slider image to the total time of the first timeline (tl). I tried: var total = tl.totalDuration(); tl2.to("#slider", {duration: total, right: 0}); ...but that had no effect. Any help would be appreciated. Thanks.

OK. That was very helpful! And (your first example) worked perfectly for me. In my browser developer tool, I could see that something was happening with both functions, but was unclear as to what the issue was. I didn't know this issue in other parts of my code because other functions called different objects. This was the first time I had functions calling the same one. And the tip about the relative value helped also. Thanks much! Stephen

Thanks for the response. My apologies for the rushed example. Not sure why it wasn't working, but I simplified it down even further to illustrate my issue. And created it in Codepen. http://codepen.io/anon/pen/rEjBl In the Codepen example, I have two functions that are exactly alike, except in name. If you change the "swipeDir" variable from "left" to "right" (line12), so that it calls the "RescueBuild2" function, you see that the red square no longer moves. If I make the change as above, and move the "RescueBuild2" function from line 8 to line 5, in front of the "RescueBuild" function, the red square moves, however, the "RescueBuild" function no longer works. Thanks. Stephen

Hi, I'm experiencing a problem that I don't know how to resolve. I'm trying to reverse the direction of some timeline tweens depending on a variable (swipeDir). If "left", the animation will come from the right, if "right", the animation will come from the left. I figure, I'll copy the function and reverse the numbers (from "+=100" to "-=100"). I copied the "left" function - "symptomsBuild", and only changed the name - "symptomsBuild2". The odd thing is that with only a name change, the "SymptomsBuild2" function doesn't work right. Only one or two items animates. (I was unable to get it working in Codepen. However, I did attach an example.) If you change swipeDir to "left" (line 78 in the attached js file), then it calls the SymptomsBuild2 function, and doesn't work. The weird thing is that if I move SymptomsBuild2 higher up in the js, it works, but then SymptomsBuild doesn't work right. Any help would be appreciated. Thanks. Stephen example.zip

That worked perfectly! I have a number of pages with this issue, so now I can move forward. And, I will indeed review the tutorial on the position parameter. Thanks! Stephen

Hi, I could use some assistance getting different staggers to appear in sequence. My codepen URL is: http://codepen.io/anon/pen/kaswg I have a group of blue bars that appear in sequence, starting from the bottom (from 0% to 100% opacity). Once that sequence is completed, another sequence changes the blue bars with a css class called "swap" to green bars. The last blue bar in the sequence only changes halfway (blue and green). As such, there's a separate css class for that called "swaphalf". The animation for this is working. However...there's a delay before the half bar displays. I'd like for that delay to be removed, so that I can set the half bar to appear as if it were in the same sequence of the blue to green bar swap. I thought adding ", 0.025" would start them both at the same time, but that didn't work. Placing it ahead in the chain didn't work either. I tried placing it in my load function. However, the items are present at that point, so I get undefined errors. Any help would be appreciated. Thanks. Stephen

Thanks! That worked perfectly. I'll take another look at the documentation. I was very off with writing the code. Thanks again. Stephen

Hi, This is my first time using Tweenlite and I could use some help. The built in tween for Flash/ActionScript has been acting "glitchy", so I've decided to convert to Tweenlite. Here's the code I'm converting: function contentScroll():void { var navLtTween:Tween = new Tween(contentHolder, 'x', Strong.easeOut, contentHolder.x, (currMenuPos * -1), 4, true); } ...and here's what I converted it to: function contentScroll():void { var navLtTween:TweenLite = new TweenLite(contentHolder, 4, {x:String(contentHolder.x), y:String(currMenuPos * -1), ease:Elastic.easeOut}); } The tween basically moves from side-to-side, depending on where the contentHolder is located. Except for the occasional hiccup, this worked fine with the former code. With the Tweenlite change, the "content" moves up to the right off-screen, which is not what I want. I was expecting it to "move" exactly as before (but without the "glitch"). Is there a problem with the way I converted the code to the Tweenlite version? Thanks. Stephen