How to get code to execute on hover?

Ask the community
,
1

Hi guys.

I’m trying to get a string(?) of code to run when hovered over, and although I understand mouse in/out, I have no idea how to add it to this code that I already have.

I have added this code, courtesy of @danieltanasec for a selection of text to animate ‘typewriter style’, which works perfectly, except as soon as the page loads it starts running.

Can I delay this code to run until the mouse hovers over it? Ideally, I want several elements to run this animation, so don’t want them running all at once, only when hovered. Like a button.

This is the code I’m using for the typewriter animation:

/* Global */ html{ min-height: 100%; overflow: hidden; } body{ height: calc(100vh - 8em); color: #423737; font-family: 'Dala Moa Black'; font-size:33px; background-color: none; } .line-1{ position: relative; top: 50%; width: 24em; margin: 0 auto; border-right: 1px solid rgba(255,255,255,.75); font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; transform: translateY(-50%); } /* Animation */ .anim-typewriter{ animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; -webkit-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; -moz-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; -o-animation: typewriter 2s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) 0 infinite normal; } @keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-webkit-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-moz-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @-o-keyframes typewriter{ from{ width: 0; } to{ width: 24em; } } @keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } @-webkit-keyframes blinkTextCursor{ from{ border-right-color: rgba(0,0,0,.75); } to{ border-right-color: transparent; } } @-moz-keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } @-o-keyframes blinkTextCursor{ from{ border-right-color: rgba(255,255,255,.75); } to{ border-right-color: transparent; } } 
</section> 

<script> 

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {

loop: true

});

typewriter.typeString(‘Jody Hope Gibbons’)

.pauseFor(2500) 

.start();

I’d appreciate any help in determining what to add, and where.

2

Hello from the Wix DevRel Team!

It looks like your current code mostly consists mostly of CSS animations, which don’t have a direct equivalence in Wix and Velo. Your best bet would be write a new version of the animation in JavaScript with Velo’s onMouseIn() and onMouseOut() functions .

Hope this helps!

Rob