qarlo

Thanks, this works perfectly!

Hello, I'm trying to use the method seek() to jump to a label in a nested timeline. The real example is a bit complex to reproduce in a codepen so I constructed a useless one just to show the issue. Baically I have a series of small animation contained in a another animation. This animation (the external one) has a duration equal to all the small animations inside. I would like to be able to jump to each of these animations, but apparently I can't. I'm sure there's a good reason for this, but is there any way to achieve what I'm trying to do?

Thank you both. Somehow I was convinced that I needed to put the "css" property in some cases and that it was fine to have both "css" and "x" outside of it. Now I have it clear.

Thanks for your detailed answer, but I was trying to show something else. In this pen http://codepen.io/qarlo/pen/XjEaay you can see that the second box gets translated to the right, while the first one doesn't. I know that one can't animate the "visibility" property and I wasn't trying to do that. I only wanted to point out that when setting the visibility through the css property in greensock, the transformation is ignored. I thought this might be a bug, or at least an inconsistent behaviour, even though probably it's not that important

Well, in my question I already pointed out the different behaviour using "visibility" and using "autoAlpha", so I was aware of it and already figured out that autoAlpha works the way I want. Also, I wasn't try to animating it. I was just concerned about the different behaviour when setting the "visibility" property. I thought it might be some kind of a bug. The modified code you posted here works, but then to me the behaviour seems even more inconsistent now.

Hello, I was trying to figure out a problem with an animation and after a while I noticed a weird behaviour. Basically, if I set the css property "visibility: hidden" to an element and I try to apply a transformation to this element, the transformation gets ignored. I know that stuff like this can happen when using "display: none", but with visibility too? It is weird also considering that with autoAlpha it works as expected. I show this in the pen I posted. Though, maybe I'm wrong and this is the way it's supposed to be?

This was really stupid, sorry, I should've found by myself. Sometimes I get confused in the small codepen editor and I messed up the parenthesis. Anyway, thanks for the great tip about getLabelsArray(). I didn't know the function and it will be very useful for debugging. It's true, but I think I started using add() when I needed to group Tweens and I still didn't know or understand how labels work. I guess this way, and inserting proper labels the code will be cleaner and easier to debug

Hello, I'm expanding on a pen I already posted a couple of days ago, and trying to figure out ways to write a cleaner timeline. The whole thing will be a sequence of images, or slides, always fading to the next. In the example there are 3, but they might as well be 100. For the basic behaviour, fading in and out, I have this: $.each($('.slide'), function(i) { tl.add([ TweenMax.to($('.slide-' + (i+1)), 1, { opacity: 0, immediateRender: false }), TweenMax.to($('.slide-' + (i+2)), 1, { opacity: 1, immediateRender: false }) ], '+=1'); tl.add('slide' + (i+1)); }); }); Notice that I'm also adding a label after each step. At this point, I would like to add variations at specific point. For example, after the slide-2 animation is complete, I want something to happen before proceeding to slide-3. I thought I could simply add a new Tween to the timeline, using the label as a position marker, like this: tl.add(TweenMax.to('.slide-4', 1, {opacity: .5}), 'slide2+=1'); What I'm expecting, is to see the slide-4 to appear after the 2, but instead it seems to ignore the position parameter. Am I again missing something about the position or my approach is totally wrong?

I understand it, but the way I thought it was: it happens immediately, but in the exact position in the timeline where I set it, which means that if I add a "+=1" to it, it happens immediately, but after 1 second. I guess this is what I was really missing, thanks. Ahah, thanks, this is great!

I've watched that video, but it's mentioning only the TweenMax.from method and not TweenMax.set. The same goes for the documentation. Anyway, with TweenMax.set it seems that it just doesn't respect the position in the timeline and execute the tween at the beginning, which it seems different than the behavior with TweenMax.from. Is this how it is supposed to be? If I put a TweenMax.set in the middle of a timeline it's really weird that it gets executed before anything else. And it's true that I can use a TweenMax.to with a very small duration, but this seems a bit of an hacky workaround

Yes, I kind of understand it. I mean, I get the theory, but still in practice it confuses me a bit. And yes, I guess the 2d makes it even weirder. Thanks very much for the explanation

Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1. Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?

ok, I'm amazed. I spent hours trying to figure out why I couldn't get the right numbers and it's actually simpler than what I was trying to do. So, it works, but I'm not totally sure why. The first pen you posted doesn't really explain it to me. From what I understand, scaling an image or a div doesn't affect the DOM, so I guess this is the only thing that matters. But then, how does it still work when the window is, like, half the width of its initial value? Sorry, I'm just try to understand it because I'm a bit confused

Hello, I'm using GSAP to build scroll controlled animation using a timeline. 1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left. 2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle. 3) the whole thing needs to be responsive I managed to do almost everything, but the point 3. In order to make it responsive, I set a fixed maximum size to the container div and on window loading I check if the window is smaller than this size, in which case I scale everything. So, the scaling works pretty well, but it messes with the calculations I made for the animation. In the pen I created I'm trying to stop the animation exactly when the left border of the third rectangle reaches the black line. At row 32 I'm calling the resize function to set the initial size. If you comment this call out you can see that it works fine, if you leave it, the rectangle will be always slightly off. Why is this the case?

Thanks, this is amazing and, I think, exactly what I was looking for. Also, I didn't know the "ticker" function and it seems really useful in scroll controlled animations. I suppose I need to look into it. Thanks again! I know that ScrollMagic is great and I don't have anything against its use, but still there are various reasons for me to avoid it: even though the plugin itself is pretty light in terms of weight, then in the code is yet another level of abstraction and even more new syntax to deal with. I'm clearly no gsap expert in the first place, so having to use another library that depends on gsap I found myself a bit lost having to look at two documentations to understand what to do. But, I mean, maybe it's just a limit of mine. Using only gsap it seems to me I can have more control. Again, maybe it's just because I'm still quite new to both library, but right now I prefer trying using gsap exclusively