Input icon animation


Topic: Input icon animation

demzl25 pro premium asked 5 months ago

Hi,

How to add animation to input icon (when you click on input the icon change from grey to blue color)?

Expected behavior https://streamable.com/ov06ql

Actual behavior https://streamable.com/eei5uw

Resources (source snippet) https://mdbootstrap.com/snippets/standard/demzl25/3658693#css-tab-view

Thanks,

Damjan


Dawid Wajszczuk staff commented 5 months ago

Hi. Can you also share the code of the example from the first video? (In the snippets there is option to choose jQuery from the technology select).


demzl25 pro premium commented 5 months ago

Here is the snippet of the example from the first video: [https://mdbootstrap.com/snippets/jquery/demzl25/3666101#css-tab-view]

And here is also link to the website where is the code of the example from the first video: https://www.regresija-hipnoza.si/kontakt

Thanks, Damjan


Dawid Wajszczuk staff answered 5 months ago

Hi,

You can try something like this:

document.querySelectorAll('.form-outline').forEach((form)=>{
  const input = form.querySelector('.form-control')    
  const icon = form.querySelector('i')
  input.addEventListener('focusin',()=>{
    icon.classList.add('active') 
  })
  input.addEventListener('focusout',()=>{
    icon.classList.remove('active')
  })
})

Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3669260#js-tab-view.

Keep coding,
Dawid


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Pc
  • Browser: Chrome 97.0.4692.99
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes