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