Animated Pop Up Searchbox — Add Ons

With an Easing effect


To utilise the Easing effect in your searchbar you will need to download:
Then you will need to:
  1. Add the jquery.easing.js to your assets.
  2. Replace the default Seeker Searchbar jQuery Header Snippet in the Header panel of the Page Inspector with the Seeker Searchbar jQuery Header (with Easing) Snippet.
  3. Tweak the Easing methods and values as suggested on the Easing page here. You might also need to refer to your #searchBar values in the Custom CSS panel of the Page Inspector.




With a Pulse effect

To utilise the Pulse effect in your searchIcon you will need to download:
Then you will need to edit the Pulse Icon PSD image file — as detailed in full here — before going on to:
  1. Add the pulse.jquery.js to your assets.
  2. Replace the default Seeker Searchbar jQuery Header Snippet in the Header panel of the Page Inspector with the Seeker Searchbar jQuery Header (with Pulse) Snippet.
  3. Tweak the Pulse code and values as suggested on the Pulse page here.




With a Pulse and Easing effect

To utilise both Pulse and Easing in your searchbar you will need to download:
Then you will need to edit the Pulse Icon PSD image file — as detailed in full here — before going on to:
  1. Add the jquery.easing.js and pulse.jquery.js to your assets.
  2. Replace the default Seeker Searchbar jQuery Header Snippet in the Header panel of the Page Inspector with the Seeker Searchbar jQuery Header (with Pulse & Easing) Snippet.
  3. Tweak the Easing methods and values as suggested here, and the Pulse values suggested here.