Convert from GSAP Jquery to 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.

score 0 · Answer 1 · edited May 23 '17 at 11:52

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/

score 0 · Answer 2 · answered Jan 20 '16 at 22:29

0

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

answered Jan 20 '16 at 22:29

Frederick Jaime

171
2
6

Thanks for participating at stackoverflow. It seems to be a good answer, so why not make it better by editing it and applying some formatting to the code blocks. You can find out more at http://stackoverflow.com/editing-help – Nándor Előd Fekete Jan 20 '16 at 22:59

Convert from GSAP Jquery to GSAP Javascript

2 Answers2