tailbreezy

This is rather important functionality, and every library has it. With gsap I am quite clueless on how to achieve this. It may be more of a question about React though, but since it is the defacto FE framework, I think it is important to provide a sanctioned way of doing this. I am talking about the situation where you set up a context with an animation, say a sidebar. Then by clicking a button you toggle it, which plays the animation but when you close it, since the state is controlled by a variable, it immediately disappears, which is expected but not wanted behavior. Framer motion solves this situation by providing a AnimatePresence with exitBeforeEnter attribute. I have read the docs and especially the three articles regarding React a few times, but failed to see where you solve this super common situation. Regards

Hello guys and gals, I spent 20 minutes on this, will figure it out for sure in an hour or so, but am out the door right now. Havent touched frontend for a bit and am quite rusty. How would you reveal one randomly from a set of svgs. No opacity animation, just pop in and pop out ( thinking visibility or even display none). In any case any example to save me the hour would be appreciated. cheers

Couldn't have hoped for a better reply. Thank you again @PointC. You are absolutely right, it does what I was looking for.

This is indeed a handy helper. What I meant tho was not to do multiple xPercent increases, but to actually show two, three,...n at a time and then move them regularly with saw xPercent: 100. E.g grouping them in a div as an unit, but I cant seem to work out how from the example since flexbox doesnt seem to allow this.

Thank you, @PointC. I think this is the one

Hey PointC, I am curious how to achieve this showing n slides at a time instead of just the 1. Have tried a few options, but all failed or are too complex for their own sake. Cheers

Hello, I am wondering is there a way to tell the current value of a tween prop ( say "x") before any tweening. For example: gsap.to(".class", { x: "+=100" } // how to "properly" tell what x is before we add 100 I reckon it is target._gsap[prop], but is it expected to be used like that. x: (_,t) => { var val = t._gsap["x"]; val = val ? parseFloat(val) : 0; return val + 100 Is this what the engine does behind the scenes? Is this equivalent to "+="? Cheers

Super useful info. Thank you so much, have lost countless hours without this. Cheers Hope you have an amazing weekend @akapowl @Carl

Hello, I am just wondering how you get a RUN tab on codepen. I have a paid subscription and dont have that. It is pretty annoying to try to trigger the edits hot reload, especially since it doesnt proc every time. Cheers

Hello everyone, Have been away for quite a bit. I am restarting my gsap journey. Have to go thru the release notes, I see so many great new additions to the plugins. Any major changes lately? Any breaking?

Yes. That is perfect, I will use the workaround until the official release. Thank you, Jack.

Hope so. I am wondering why css vars are excluded from being passed to modifiers. What would be a work around if that is the case?

It is a pity that my questions always occur on weekends. The question is basically how to access the css variable in modifiers so that we can put it in a wrap or something. Will be used in infinite loop scenarios.

Hello fellas, afaik "bottom-20" is invalid syntax. And since it is invalid, it will move you scroller-end anchor to the very top You should do "bottom-=20" (notice the = sign) which will subtract 20 from the bottom value (e.g 1000 - 20 => 980) so you get 20 pixels from the bottom (upwards). Likewise there is also "bottom+=20") which will get you 1020 (e.g 20px from the bottom of the screen downwards). Also keep in mind that trying to understand using bottom and top is a little hard because the anchors will move out of the viewport. Use "top center-=100"..."top center+=100" to see the effect in action. Cheers

Hello guys, What is the syntax here? This seemed to have worked in the past (I found a link that suggested it can be used in this form); No output in console.log. Cheers