Flex Vst Plugin

0 views

Skip to first unread message

Muredac Ford

unread,

Aug 3, 2024, 5:15:17 PM8/3/24

to ulvamiho

Hi @philnash, lets say the Twilio CLI informs me of a new update to @twilio-labs/plugin-flex. If I do update this plug-in, when I run my existing Flex Plugins which used a previous version, I get a warning my plug-in was created with a previous version of the @twilio-labs/plugin-flex. What is the recommended way to handle this and update my Plugin?

So today I've had a use-case that seems to be perfect for the Flip plugin and so I started messing around with it but have been having a little bit of trouble getting it to work for a simple flex-direction toggle animation.

The problem can be seen in my CodePen; the animation is perfectly fine when going to flex-direction: column, but when going back (clicking the SVG again) there seems to be a jump/skip for the SVG element for some reason. Note that I have not employed the use of the absolute positioning for the animation because that does not seem like it would work for my case since the wrapping div is also resizing when the flex-direction changes.

Yeah, absolute: true is for situations just like this (changing flex direction) because of the way browsers won't respect sizing in flex. Is there a reason you're doing multiple Flip calls simultaneously? Particularly when you're doing absolute: true, you should put that in one call because there's a lot of complexity involved in coordinating everything. Like it must go in a particular order to retain positioning/sizing. It has to know all the elements it's going to work with so that it can go from the deepest to the shallowest.

If you've got a container that you want to resize too but you don't want it to be position: absolute (to prevent layout collapsing), you can define a subset of the targets (excluding the container) as the absolute value (see the docs). Like absolute: "svg, span".

This did the trick!! I was avoiding absolute: true because it was affecting the wrapper which was affecting the page (but I still needed the wrapper included in the animation because of its background). Didn't realize I could just exclude the wrapper from being part of the "absolute animation". That's awesome flexibility!!

However, I'm still having one more jump that seems to be happening in my project even after using absolute positioning for the animation. In my project I'm using an img element in place of the SVG, but I do not believe that is the reason for the issue. The first click works perfectly fine (the image enlarges to its full width as it moves to the center), but there's a "jump" (on the second click) when going back to flex-direction: row (the image "jumps" instead of animating back to its initial smaller size), it does still animate moving to the left though. I suspect this is an unavoidable layout collapsing issue (i.e. the layout collapsing will not wait for the image to animate back down to it's smaller size when the flex-direction changes) ?

Side note: If Flip can calculate everything behind the scenes and animate it for you, why would you ever not use it for layout changes that you want to be animated (outside of transition-based animations) ?

Happy to take a look at a minimal demo. Without seeing that, I'm not really sure how to troubleshoot. It definitely shouldn't matter if it's using an instead of . My guess is you didn't use absolute properly(?)

Side note: If Flip can calculate everything behind the scenes and animate it for you, why would you ever not use it for layout changes that you want to be animated (outside of transition-based animations) ?

Hm, I'm not entirely sure I understand the question. I mean it is super useful in many situations. It's difficult to make sweeping statements like "always" without knowing some of the scenarios, but yeah the Flip technique is very powerful once you understand it. ?

I know we can provide the getState method multiple DOM elements (as you have shown in your example), but is it possible to provide that method multiple jQuery objects? I tried that in the CodePen below but "the jumps" make me think it didn't work (this may be related to my other problem). I've also tried putting the objects in an array but that didn't seem to stop the "jumps".

My thoughts as well... because it works when I do absolute: true but then the layout collapses because the parent becomes absolute during animation I guess. I've tried absolute: [child, child], absolute: [parent, child, child], absolute: parent... I'm kind of guessing at this point.

This is a GIF of what's happening btw, it's not just my eyes, right? There's a little jump when it shrinks... it's skipping something.

Perhaps you can help me understand, based on this GIF, exactly which elements' states would the Flip plugin need and which elements' need to be excluded from the absolute positioning during the animation? To give you an idea, this is the current element hierarchy in the GIF above:

So my initial thoughts with this hierarchy would be to getState(Parent 4), absolute: Parent 5, and put nested: true (so that the animation would apply to its children as well)... but that didn't work (the IMG/Paragraph elements simply didn't animate).

Yeah, we really need a minimal demo to be able to discern properly. My guess is that you want to make sure you're including the parent 4 (and maybe parent 5 and anything inside there) in your getState() and then set absolute: to the all the stuff INSIDE the Parent 5. DO NOT have the parent get set to absolute (otherwise your layout is collapsing).

I guess what I struggled with the most is assuming that by including a parent (both in the getState and absolute), its children (and all their children, etc) would automatically be included in the animation as well. Essentially, for this to work, my getState had to have an array of every single element from Parent 4 and everything inside it (as you said), while my absolute had an array of everything getState had minus Parent 4.

Thanks again for all your help. Love all the plugins you guys keep making that makes our lives so much easier and brings more life to websites! It's always fun animating with your library! ?

PS: Since a parent and its children are included in this case, it seems imperative to include nested: true, but oddly enough, adding/removing it doesn't seem to make a difference here (at least not visually).

nested: true is typically only necessary if you're flipping both parents and children in a way that'd affect x/y positioning of the parent because moving a parent also affects the children too. If you're only resizing the parent, that's probably unnecessary.

Follow-up question for you regarding this. After setting up my Flip animation how you suggested, while the animation is working and running smoothly, I'm wondering how come it is not following the same order of animations when going back to the initial flex-direction (on the 2nd click). See the GIF example below:

To elaborate, notice how on the first click, it animates the clicked image and then the text (or at least it appears that way) whereas on the subsequent click, it animates the text first and then the image? Is there a reason for the order of animations here? And do we have any control over it? Additionally, can we control which kind of animation it is or what path the animation takes?

I must be missing something because as I watch, it's animating in exactly the same order each time - you must have a stagger applied. The QR code first, then the text, then the image. I believe the order is just whatever the Array of targets is in. You could alter the stagger value too, like use a negative number to go in reverse, or use the object syntax and the "from" property, etc. Tons of options.

Not sure what you mean by "kind of animation", but you can certainly define an ease. As for the path, anything is possible with enough custom code but it's not as if there's some magical property that makes things go in some fancy curvy path, no. Doing so would involve a lot of customization and plotting of coordinates. Again, possible for sure but not simplistic.

Question. For VR I want to create a newspaper pickup that actually feels bendy. I want to be able to move it via code but also release it and let it fall and do it's thing. I tried using a softbody but I had to constraint the bottom, left and right edges of the newspaper for it to feel right (even with max stiffness the paper felt more like a cloth than a thick cluster of paper). The issue with that is that if I constraint the edges then the newspaper sticks in midair. Generally adding a parent with a rigidbody allows it to fall but the result is rather odd even if the collider I add to allow the rigidbody to fall is tiny. it would be cool if we could constraint parts of th simulation but at the same time not have them constrained to the world (like local constraints?). Anyway, maybe I'm just not using the right component for the job. Any better ideas? Also, how would you go about adding sound on collision? are there any events or something we can use to do that?