Wikipedia viewer, how is that transition between magifyer and search bar done?

Wikipedia viewer, how is that transition between magifyer and search bar done?
0

#1

I need to be pointed in the right direction here. I get the whole try to figure it out before asking for help, but I don’t even know where to start with this. Nothing in previous lessons showed how to transition effects like what is shown with the wikipedia viewer page with the magnifying glass turning into a search bar and the wiki entries sliding gracefully onto screen.

Can someone please point me in the right direct? What javascript libraries i should be using to accomplish this? It does not appear to be an image transitioning to the search bar, so I’m assuming there is a library that has fancy animations like this built in?


#2

You could use jQuery’s animate(). Note that the animations are not required, so I would wait with the animations till you have the basic functionality finished.


#3

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:

  1. 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.

  2. 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.

  3. 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.


#4

I’m not sure how they do it in the example code, but I used jQueryUI’s scale effect with .hide() to get a similar effect.

Link: https://codepen.io/zapbampow/pen/NavoRe?editors=0010


#5

Thank you for all the advice and direction. Sometimes with these challenges it’s hard to know what to emulate, and what to ignore beyond the the minimum of the challenge. I do NOT want to be the guy doing the bare minimum on this stuff.


#6

THIS is amazing, thank you so much for the explanation. I’ll look up before and after elements. And how to make lines as well…


#7

Glad you liked it. I did forget to mention that ::after and ::before were what the example used, but you could do something similar with other elements as well. A popular alternative is using span elements instead.

CSS lines are just elements that have been styled to look like lines, and then colored in. So if you wanted to make a vertical line you’d have an element that’s, say, 100px tall but only 3px wide. Vice-versa for a horizontal line.

The main keywords you need to dive into CSS animations are:

  • Transition
  • Transition delay
  • Animation
  • Animation delay
  • Keyframes
  • Transform
  • Transform-origin

This takes a lot of experimentation by the way. You'll have to do some calculations because animation will move your elements in unexpected ways. For example, when you tell an element to widen, it'll widen toward the right, not equally toward left and right. You fix this by using transform to tell the element to move to the left as much as new width minus your old width, divided by half.

It also helps if you learn some CSS art because it teaches you to view elements as smaller pieces of a whole.