I just checked. The pen for FCC’s example seems to be done with Angular-animate.js and CSS transitions/keyframes.
This all might be a bit advanced but the best subjects to learn are the ones you want to learn. Theoretically you could do something similar with just CSS since animation libraries just modify CSS values. To know how to animate, it’s best to break down the parts and the motions.
Here’s what’s going on with FCC’s Wikipedia Viewer animation:
There’s outer div that initially looks like a circle. It has a ::before element that’s just a straight line. This element is slanted so it looks like a tail. The circle and tail combined for the magnifying glass. Inside this div is an inner div that isn’t visible.
The ‘tail’, which is just a ::before element, retracts. You’re left with a circle, the outer div, which widens while maintaining the fixed 20px border-radius. The ‘inner div’ I mentioned earlier now has a ::before and ::after elements which are really just two slanted lines. The lines come in diagonally, forming the X.
Done. The magnifying glass has now turned into a searchbar with an X while really only modifying 2 elements and their ::before ::after pseudo-elements.
If you haven’t encountered ::before and ::after pseudo-elements before, they’re basically an additional div or span that lives alongside an element. They can be positioned so that they look like they’re part of their parent element.
My personal tier for animation goes:
CSS Animations - Mostly for UI animations. Can do more complex stuff but it’s a bother to modify. Necessary to learn either way to understand animation libraries. Achieved using @keyframes and/or classes with transitions.
jQuery UI - Also mostly for UI animations. Gives you more options and built-in effects but can still be hard to make complex animations out of.
GSAP - Sky’s the limit. Let’s you animate just about anything. Making adjustments is a breeze. Loaded with features. Premium members have access to physics-related stuff and MorphSVG (automatically reshapes one SVG to another) but these are luxuries. I recommend learning this after you’re comfortable with functional programming.