0

I have a question regarding bodymovin & react (or actually also plain/vanilla html&js). Say a graphic / motion designer gives me a animation of a searchfield opening up. Like this one. I then want to integrate this animation into my website, so that when a user clicks on the search bar, this animation is playing.

How would I do this? All I have is a bodymovin JSON or svg file, possibly a gif. I do know how to display this animation on my website plain & simple. But I do not really understand how the underlying functionality (the actual HTML/JS/CSS Search Bar Component) ties with the animation?

I would be very grateful for some general direction here.

bennygenel
  • 23,896
  • 6
  • 65
  • 78
George Welder
  • 3,787
  • 11
  • 39
  • 75

1 Answers1

0

You will need to write a listener for the mouse events. Something like:

HTML:

<element onmouseover="myScript"> <script> function mouseOver() { <!-- Script goes here--> } function mouseOut() { <!-- Script goes here--> } </script>

JS:

object.onmouseover = function(){myScript};

or

object.addEventListener("mouseover", myScript);

Bodymovin starts the animation using JavaScript so just set the animation to stop after the search bar expands on mouse over or mouse click then set the animation to play backwards on mouse out.

Another example: Source: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover_html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).css("background-color", "yellow");
        }, function(){
        $(this).css("background-color", "white");
    });
});
</script>
</head>
<body>

<p>Hover the mouse pointer over this paragraph.</p>

</body>
</html>
I hope this gives you an idea on what to do and that it helps!
chrisbmillsap
  • 21
  • 3