从GSAP Jquery转换为GSAP Javascript

Question

I need to change this -

$(function() {

    $(".nav-1").hover(function() {
            TweenMax.to($(this), 0.2, {scale:1.2});
        },
        function() {
            TweenMax.to($(this), 0.2, {scale:1});
        }

    );

});

Into Javascript?

This is my html -

<h1 id="animate1">
    <div class="nav-1">T</div>
    <div class="nav-1">R</div>
    <div class="nav-1">U</div>
    <div class="nav-1">S</div>
    <div class="nav-1">T</div>
    <div class="nav-1">E</div>
    <div class="nav-1">D</div> 
    <div class="nav-1">S</div>
    <div class="nav-1">E</div>
    <div class="nav-1">R</div>
    <div class="nav-1">V</div>
    <div class="nav-1">I</div>
    <div class="nav-1">C</div>
    <div class="nav-1">E</div>
</h1>

Is there any way for the animation to cycle through the letters without having to hover over each letter?

Any help would be greatly received.

Answer 1

Jquery to pure javascript:

In your javascript code block following is an shorthand of jquery $(document).ready function.

$(function() {
    // this will execute after document is ready
});

Here is document ready equivalent without jquery .

You can use mouseenter & mouseleave events instead of jquery hover function.

Animation circle through without hover:

http://jsfiddle.net/shishirmorshed/ke24sagj/

Answer 2

This should be a very easy process for you. You can use this for Rollovers: document.getElementById("yourObject").addEventListener("mouseover", rollOverAni); document.getElementById("yourObject").addEventListener("mouseleave", rollOutAni);

and as far as using GSAP, you can easily enter items the exact way as Jquery, for example: TweenMax.set("#MyBox", {left:"-100%"});

--cheers