Animation action to focus on input text

Design help Animations & Interactions
1

Hello,

I have created an animation that shows a search input box when clicking on a search icon.
I would like to end the animation by focusing on the input text element, so that users can type without having to select the input text element manually before.

I’ve seen solutions using custom javascript (e.g.

$('.myicon').click(function () { $('#myinputtext').focus(); }

); but I would like to avoid this as it is a symbol that is used on multiple pages.

Is there a way to do add a focus action in an animation?

Thanks

2

This is the solution I used:

I added an hidden embed element in my symbol, with the below code. When the search box (#navbar_search_desktop_div) CSS display property changes, it triggers an event that focuses the input text box (#navbar_search_desktop).

<script>

respondToVisibility = function(element, callback) {
  var options = {
    root: document.documentElement
  }

  var observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      callback(entry.intersectionRatio > 0);
    });
  }, options);

  observer.observe(element);
}

respondToVisibility(document.getElementById("navbar_search_desktop_div"), visible => {
  if(visible) {
   console.log("#navbar_search_desktop is now visible");  
   $('#navbar_search_desktop').focus();
   }
});

</script>