Jump to content
Search Community

Using SplitText and mouse events

Eugene Rayner test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I was wondering if anyone could provide me with a snippet on how to use SplitText and mouse events? I have done some snooping around but all, so far, has been fruitless.

 

Here is what I have so far

var myHeaderSplit = new SplitText(".text-container h1", {
        type: "words,chars"
    });
    var headerChars = myHeaderSplit.chars;

    TweenMax.staggerFrom(headerChars, 0.5, {
        opacity: 0,
        rotation: -720,
        scale: 100,
        ease: Power1.easeOut
    }, 0.2);

    headerChars.onmouseover = function () {
        TweenMax.to(headerChars, .2, {
            css: {
                opacity: 0
            }
        });
    }

 

any help greatly appreciated :)

Link to comment
Share on other sites

That won't work because it's an array of elements. But first, don't assign event listeners like that as you can only have 1, which may lead to some unexpected problems. Use .addEventListener() instead.

 

// Bad
myElement.onmouseenter = function() {};

// Good
myElement.addEventListener("mouseenter", function() {});

 

To get this to work, you have to loop through the array, adding event listeners to each element. You can also wrap the array with jQuery, and do it the jQuery way.

 

For better performance, I would reuse the animations instead of creating a new one on every event, which will require looping through the jQuery object using .each().

 

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...