Input icon animation

Topic: Input icon animation

demzl25 priority asked 2 years 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 2 years 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 priority commented 2 years 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

Add comment

Dawid Wajszczuk staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
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

demzl25

197Support score
55Questions 2Answers 222Snippets