kursus

Ha yes the first one it is, thank you !

Hi, There was this pen on the homepage at the time of GSAP V2 showcasing the many possibilities of the library (with some text, particles and images effects). Is this demo still available ? I can't find it anywhere. It was amazing because it was quickly demonstrating the impressive power of GSAP. The demos on the current "Showcase" page are nice but since they are made of many third-party elements and usually focus on a single aspect of GSAP I find them much less speaking (and so do the people I show them to). Thank you

Hi thanks for your answer, I totally understand that but counter is up ? !

Say you have a plain and reusable cube transition like so : const cube = (els: []) => { const side_a = gsap.fromTo(els[0], {xPercent: 0, rotationY: 0}, {xPercent: -100, rotationY: -90, transformOrigin: '100% 50%'}) const side_b = gsap.fromTo(els[1], {xPercent: 100, rotationY: 90}, {xPercent: 0,rotationY: 0, transformOrigin: '0% 50%'}) const master = gsap.timeline() master.add([side_a, side_b], 0) return master } For some reason you need to showcase X% of your effect. You could have a convenient method to do so : const tlAttract = cubes($els) tlAttract.cap(0.2).yoyo(true).repeat(-1) Right now (maybe I'm doing it wrong) the complexity brought to implement such effect makes your nice transition much harder to understand (notice how side_b to values have been switched to their opposite): https://codepen.io/jeankev/pen/NWGJMdq

Thanks for the kind words @ZachSaucier ! I think I've found the catch : it is not clearly seen in the example because images have plain background but with this last technique (as with my examples) all from() tweens are not in sync (as they are supposed to always start at 100%). It appears that @Greg Stager had a better understanding of the issue than myself from the beginning ? I finally solved it with a fromTo() : tl.to("#img1", {xPercent: -100 * percent, rotationY: 90 * percent, duration: 1, transformOrigin: '100% 50%'} , 0) .fromTo("#img2", {xPercent: 100, rotationY: -90}, {xPercent: 100 * (1-percent), rotationY: -90 * (1-percent), duration: 1, transformOrigin: '0% 50%'} , 0) I feel like a "cap" feature would be a nice addition to the core though !

Of course I don't know why I didn't think of that. Thanks a lot ?

Thanks guys for your answers and your interest, @Greg Stager your fromTo has hardcoded reduced values ({ x: "25%", rotateY: "-25deg"}) which is what I want to avoid (else it seems simpler to just modify to). @ZachSaucier Thanks for your tips ! So to be clear the example 3 is exaclty the expected behavior but I don't want to hardcode reduced values in the base tween (so ideally nothing else than { xPercent: 100, rotateY: -90} and a 0.25 variable somewhere). I'm pretty sure a modifier would do it ? I'm just worried about the complexity/verbosity induced in general and also to process non Number values (using getUnit() etc) since I have a lot of different effect to manage (and a modifier would imply "redeclaring" CSS properties by hand inside it which could be the cause of errors) .

Hi there, First of all it feels good to be back here! Huge thanks and congrats for GSAP3 which is better than ever. The compressed build size of 50kB is a huge deal for me as it means I can use GSAP in my current project which is awesome. I would like to know if there is a proper way to "cap" a yoyoed tween to a percentage of the animation. Meaning for a given tween gsap.to("#el", { x: '100%', repeat: 3, yoyo: true }) having the yoyo behave just as if the tween was { x: '25%'} I know I could just tweak the tween values myself but it will get unnecessary complex pretty quickly in case of a multi-props tween, so I would like to declare a "100%" tween and just be able to programmatically yoyo cap it to X%. On the codepen (animation can be replayed by clicking on the text): - example 1 is the base animation - example 2 is the base animation with yoyo - example 3 is the expected behavior (tween values have been "manually" changed to 25% of their value) - example 4 is an attempt to reproduce example 3 without tweaking the base CSS values (I know the direction is reversed). Thanks a lot for your help.

Thank you very much guys, this woks perfectly. GSAP is hard to master but it's totally worth it !

Sorry to bump, but I really can't get this working. To be clear I need to add to a timeline (so I can pause) several elements, each of them with the same tween but with a different offset. http://codepen.io/anon/pen/gyCBq Thanks for you help.

Sorry to bother but the add() technique does not work in this case. See updated pen : http://codepen.io/anon/pen/gyCBq With TL.pause() elements are where they should be. But without TL.pause(), or with TL.resume(), they are packed at the start position. Is this expected ? Thank you

This link is very useful, thanks for that.

Hello Rodrigo, Thanks for your answer. 1) Thanks, with the add method it works perfectly, I don't know why I did not think to do this before, I still need to work on my GS knowledge ! 2) Ok, I was talking about several hours of looping, but I'll do some further research and open a post if I find something. Anyway these kind of issues seems more browser-related. 3) I meant that over the time, elements can be sometimes packed in a specific area of the container. It's definitely not a GS issue and it's totally related to JS coding (speed should be changed every loop), but I was asking just in case someone had a magic technique. Thanks anyway

Hi all, I'm trying to simulate moving clouds with Greensock. Here is the codepend : http://codepen.io/anon/pen/gyCBq All clouds share the same tween, but they are given different speed and top values. Also the main purpose is a different horizontal offset so that the effects actually works. This animation has several problems : - I can't make tlCloud.pause(); working. I have tried different techniques for injecting tweens but none seems to work when you add offset. seek() is the best I can do so far. - It seems that looping the animation consume more and more memory over time. I'm not really sure about this though because I id not have the time to test it carefully. Is it something supposed to happen with this kind of calls ? - Different speed on each elements is a nice idea but after several loops it starts to look weird, some area are covered with elements and some are totally blank. I don't expect a GS function to manage this for me as this is a very specific need, but if you have a hint to give I would take it with pleasure. Thank you very much

Thanks Jamie I finally solved this by clearing my timeline on each turn. Really impressed by support quality here

@Karl thanks this is great, nice technique. But this kind of loop starts glitching from the second lap, same problem I mention above, I don't know why. But I was lucky enough to have a opacity:0 step inmy animation so I can quietly clear the timeline at each loop. @Rodrigo thank you that is neat, I will keep this for next time. If I have time I will port my anim to your technique and see if glitches are still here. Thanks for awesome support.

Well thank you guys ! @Greensock indeed the 1.11.3 preview fixes the issue. That's awesome. Can't wait to see the changelog !! @ Jamie that works perfectly, thanks ! edit: I don't know if it is an expected behavior, but when your animation loops the pause will repeat each time, even if you have called resume(). Is there a way to simulate removePause() ? I'm stunned by the reactivity here on the forum, the precision and the politeness of the answers. Many thanks for all of this !!

Trouble with the pause() method is that the animation jumps straight to the point. I need to define in advance the point where the animation is going to stop, but I don't want any jump in the animation. Do I have any solution ? Labels maybe, even though it is much less flexible (restricted to tweens callbacks).

Hi Jamie, Thanks for your answer. Here is a fiddle demonstrating the issue : http://jsfiddle.net/LBDAB/10/ Thanks for your help.

Hi all, I have a timeline controlling several tweens. I can pause and resume it with no problem. However when I call the addPause(X) method, X being a number, I can't resume or play the timeline anymore after that. Thanks for your help

Thanks Rodrigo for this demo ! However I'm still afraid it doesn't fit, or at least I didn't manage to adapt your technique. Here is a fiddle of the whole stuff : http://jsfiddle.net/LBDAB/5/ The animation is supposed to loop without that ugly stop on each turn (top left corner). As you can see the loop is based on the number of coordinates points, when your demo loops on the number of targets. I have to do it that way because of the massive number of coordinates I have to inject. I don't know if this has an impact on how GSAP handle the animation ? Also I can't use Bezier because I need callbacks and css properties every step. Also after the first loop there are some minor glitches visible (on the real project which is more complex), always at the same coordinates (they shifts if I shift coordinates, so it doesn't seems to be my code). If you have any advice that would be very kind. Thanks a lot

Hi Rodrigo, And thank you very much for your answer. My problem is still present on your codepen. I'd like the animation to be smooth when the delays have loaded. On the pen, the first wagon (for example) starts and stops 5 times, 1 time for each wagon, but I'd like it to tween smoothly after the first delay. Same for every wagon, so that you feel the train just starts and move away. For now it feels that the train starts and stop 5 times. That is precisely what I can't come up with. Don't hesistate to tell me if it's unclear, I'll make a pen. Thanks a lot

Hi and thanks for your very nice work, discovering GSAP was a relief. Sorry if this seems trivial but I've searched everywhere with no luck : I have a single time line with multiple selectors. They share the same teens, except I'd like to have a single delay on the first tween only. My goal is to simulate a train a several wagons. The first wagon starts, then 0.5s later the second wagon start, then 0.5s later, the third wagon starts, etc. Here is where I am so far : var delay = 0.5; for (var step in tlTrain) { tl.appendMultiple(TweenMax.allTo([wagon0, wagon1, wagon2, wagon3], tlSpeed, { x: tlX, y: tlY }, delay)); delay = 0; } It works at first but after the first teen, all the wagons stop and gather before resarting all together. Thanks in advance for any advice. Edit : I have discovered a semi-workaround : put a negative delay number, and reverse the selectors order. But but there is a pause at the end of the loop, and aniamtion becomes sometimes laggy.