qarlo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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
-
Well, this is what I'm actually trying to do, but in my case I want to apply the progress only after some point
-
I know, I tried it ScrollMagic in the past and it's cool, but I don't think it's really necessary in this case. I mean, I know how to trigger a tween when an element appears in the viewport, I just need to update it on scroll. The pen you posted is really nice, but it's quite different from what' I'm trying to do: it doesn't use gsap at all, so the images aren't animated; also, the images are set as background, which in my case doesn't really work
-
Hello, I'm trying to create a page with sections moving in parallax. Each section will have an image. Some of these images will scroll normally, while for some I'd like a different movement, like scrolling slowly in the opposite direction. Basically I'd like to recreate the effect in this page: https://www.squarespace.com/websites/templates/mercer (you have to click on "PREVIEW MERCER" to see it). I set up a pen with three sections: the first and the last one should move normally, while the second one is the parallax one. The main problem is that I'd like to translate the element while scrolling and, of course, when scrolling back, animating it back to its original position. I know that ScrollMagic can be useful in this case, but I'd prefer doing it using only gsap. Any suggestion?
-
Thanks, this is helpful, but it's still not what I need, I think. But it's my fault. I created the pen as simply as possible, just to illustrate this issue, but in my project the whole animation will be controlled via the scrollbar and I'll be animating multiple layers in a timeline. If needed I'll create a more accurate pen. The thing is that I don't need to restart the animation. On the window resize I would like to recalculate the distance (which will be the same for all the layers, anyway), so just a variable, but after doing it, updating all the tweens in the timeline. They might be two, sometimes four, but possibly even more. I saw that there is an updateTo method, but I'm not sure is the best approach. It would mean that I would need to write the code twice, basically. If it's not clear what I mean, I'll post another pen later. In the meantime, thank you!
-
Hello, I know a similar question has been asked before, but I think my case is a bit different and I couldn't find a solution. In the pen I posted I have a very long image which I want to scroll from the beginning to its end, which mean that it should stop when its right edge reaches the right side of the window. In order to do this I calculate the distance, so the amount of x translation, as the difference between the image width and the window width. I know about the xPercent property, but I guess that it's not useful in this case, because I have no way of using it account also for the window width. Anyway, the animation works fine. But if after the first animation you resize the browser window and click repeat (top right corner), the image doesn't stop at the right point: it goes too far left, or too far right, depending how you resized the window. So, I'm thinking that the solution would be to update the values inside the tweens on the window resize event. I'm not sure how to to this, or if that's even possible. Is there a better, more appropriate, approach?
-
Hello, I went throught the doc and couldn't find anything. Is it possible to set an easing function to a timeline and have it like inherited from all the Tweens in the timeline?
-
Thanks, this was really helpful too
-
Yes, actually this makes perfect sense and is way more simpler than what I was thinking, thanks! Of course, but what I was still referring to GSAP, in a way. I mean, I know how to make the images responsive and to adapt them to the window. I'm still not sure about the best way to make the duration of gsap controlled animations responsive. For example: when I open the page, the script calculates the width of the images and so the duration of the animation is set. If I then reduce the window size, how can I update the values?
-
An update: searching for more example and a bit more through the documentation I figured out that I could use the onComplete callback to stop or pause the timeline when the front tween reaches its end. I updated the pen accordingly: http://codepen.io/anon/pen/aZNvgQ Still is not working as I'm expecting. What am I missing?
-
Hello, sorry if the title is not really clear. I'm trying to create a horizontal parallax animation with at least three layers. The end result should also be responsive, so I can't really use fixed numbers. Also, the image for the background is not the same size as the others. Let's say that the background is 8000px and the image on top is only 5000px. I want the scrolling to stop when the right border of the second image reaches the outer margin of the browser window. I kind of did it, but not quite right. In the pen I created, as you can see, after the character layer reaches its end, the background still goes on for a little while. Is there a way to avoid this? Or a better approach to the whole thing?
