We Keep Coding

Is there a fluid CSS height property for elements entering the DOM? Jank happens when using Semantic-UI-React Transitions

I am not sure if this is the proper place to ask this question; I considered Software Recommendations however I figured I'd give it a shot here first.
I am creating a PWA and with every iteration I'd really like to focus on making it look/feel like less janky and as smooth as possible. Well, like a native app.
So here is the problem—I am using transitions (animations) provided by Semantic-UI-React, and while it works beautifully when an element which is occupying its on space, I was wondering if there a practice or pattern which handles the behavior of adjacent DOM elements to one that is being animated?
I supplied a GIF below to illustrate what I mean. I suppose I could just move the animated elements out of the container of the form to prevent jank, but I wondered if there was a more elegant pattern or approach to this...
Merci!

Unfortunately, there is no particularly elegant approach to this.
Regarding the question in the title of your post, a common approach is to animate the height of the new elements. If you don't know the height of the elements, unfortunately animating from 0px to auto does not yet work but you can fudge it by animating max-height from 0px to a value slightly larger than the maximum size you expect the element to be.
But don't do that.
It will cause the browser to layout the page on every animation frame and will almost certainly jank on lower-end devices.
Instead, you're better off to animate transform.
The most common approach is to:
Grab the original position of the elements (using getBoundingClientRect() etc.) that are going to be affected just before you add the new elements to the DOM (perhaps using getSnapshotBeforeUpdate unless you're using hooks, in which case you can use useRef to similar effect).
After you've added the new elements (which you're presumably also animating in by using transform with a suitable scale() function), calculate the delta from where the offset elements are now, compared to where they used to be.
Setup a transform animation from the negative of the delta, to zero (i.e. the FLIP approach). E.g. if the element has been shifted 300px down the page, animate transform from translateY(-300px) to none.
Of course you need to do that for all the elements in the flow that are affected so it might be easiest to put them all in one container and just animate that.
Regarding the third point you have a few choices of technology, none of which are great:
CSS transitions. These are simplest but you'll have to trigger a style flush to get the negative delta starting point to stick. e.g.
elem.style.transform = `translateY(-${offset}px)`;
elem.style.transition = `transform .3s`;
getComputedStyle(elem).transform; // Flush style
elem.style.transform = `none`;
CSS animations. Producing #keyframes rules dynamically using the CSSOM is a pain but at least you don't need to trigger a style flush (and you can set an animation with an implicit to-keyframe for convenience).
#keyframes random-id { from: { translateY(-300px); } }
Web animations. This is probably the most well-suited.
elem.animate({ transform: [ `translateY(-${offset}px)`, 'none' ] }, 300);
// In future when browsers ship support for implicit to/from keyframes:
elem.animate({ transform: `translateY(-${offset}px)`, offset: 0 }, 300);
Unfortunately Safari only has Web Animations support in Tech Preview so Safari users will get the un-animated version until the next Safari release. Edge users will also get the un-animated version until the Chromium based Edge ships. There is a polyfill too but it's not actively maintained at this point in time.
If you're using React, Animating the Unanimatable is a helpful article on all this.
The other tricky part is making sure the scroll doesn't jump for which you might need to look into scroll anchoring.

Question of browser performance and using Bodymovin and CSS animations

I am in the process of building a website full of SVG illustrations that have animated components that are being animated with Bodymovin.
But the backgrounds are also sometimes animating to show movement (a runner SVG with his arms & legs moving and a background SVG moving right to left showing progress).
Am I right in trying to limit using Bodymovin to the complex animations for the characters so I can use CSS transform3d animations for the simple background movements?
I'm trying to make things animate smoothly whilst being easy on everyone's browsers!
I would usually install GSAP and animate stuff with that, but that would mean adding a second JS animations library for the backgrounds as the client has a designer generating the Bodymovin animations.
Any advice would be welcome. Thanks

Bodymovin appears to be lagging with multiple animations on a page, so I ended up animating the backgrounds with CSS animations to keep the browsers' workload to a minimum.
And through animating translate3d, the css animations were smooth, too.

How to add sliding page transition in a Single Page App?

I am using Sammy.JS for my routes and I can hide and show my pages with its callback, but the transition isn't good. What I wanted is to show the pages from right to left or when going back, it would be left to right.
var app = Sammy('body', function() {
this.get('#/start', function() {
$('.app_page').hide();
$('#start').show();
});
this.get('#/end', function() {
$('.app_page').hide();
$('#end').show();
});
});
Is there any frameworks or Plugins for this?

I assume that you are looking for something like the android transition between pages, in that case you must know that web is not totally ready for that and although it's possible, but you must consider many problems that happen when animation pages, such as the positioning(you must set the positioning as fixed and that might cause a lot of problem) or the performance of the animation for long and heavy pages.
there is not a mature javascript library that I've encountered and everybody just use their own code cause for different webpages, different css stylings are needed.
the best way to have a nice animation is to keep is simple and light, like a fading effect with a little bit of transform and scaling.
and if you really want to do the animation, it's better that you do it yourself, definitely use css animation(not jquery) and remove the animation after it's done(for performance).
and write a javascript function to check if animation is supported if not do it the old fashion way.
if you need more information let me know.
I did try the page transition in my own javascript framework and it works fine but only after I failed the first 100 time.

I recommended to you to use jquery animation to achieve your goal.
First, you can study css transition(for the page right to left effect.)
Second, you can use jquery animation with .show(), Example
You can combine these tricks to satisfied what you want.

jQuery equivalent of Flash animation

I would like to imitate the animation happening when switching from one page to another using the menu on the left of this example webpage. This is one of several projects that I am working on to prove JavaScript and associated libraries are capable of producing animations equivalent to Flash.
I can get a simple hide animation going with this but it doesn't quite look the same as the Flash version. It's almost like they've used some easing effect for the slide out and in. I can't seem to figure out the CSS with which to animate it in JavaScript. Any ideas on the CSS I should be looking at or know of any plugins that have already accomplished this style?
http://www.wix.com/flash-templates/artistic-choice
http://www.alphadesigns.com.au/stackoverflow/index.html (updated with opacity option)

Try animating opacity. Note that this doesn't work in IE<9, you'll have to use a filter and a custom animation if IE6-8 must be supported (see http://www.quirksmode.org/css/opacity.html).

Is this flash effect possible with jquery?

I see a flash website with some eyecathing buttons with flash effect which I want to have with jQuery if possible here is the link of website -> http://www.goodthinking.com.ph/ .. any tips or sample if can this possible done using jquery code.. . thanks in advance.. .

Yes you could build something close, but with less browser support. The puzzle pieces could be stored as background images on <div/> elements, then the divs could be positioned to "fit" as puzzle pieces, yet still be move-able by animating their position properties with a custom jQuery $.animate({}). The noise could be played on :hover with an <audio/> element in browsers that support it, and the flip effect could be achieved using a 3D transform, typically done by adding and removing CSS classes that define webkit animation keyframes.
You should seriously consider, however whether a whizz-bang effect actually helps people find the content on the website, or gets in the way. If you do want the effect and can design it in such a way that it degrades in browsers that don't support the effect, or all of the effects, then you have a cross-browser solution that is not the same everywhere, but doesn't penalize all users either by requiring they have a browser plugin.

Is it possible? Probably yes.
Would I recommend doing it with jQuery or javascript? No.