Topic: Input icon animation

demzl25 pro asked 1 year 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 1 year 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 commented 1 year 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 1 year 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: No
  • 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