Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Using SplitText and mouse events

Recommended Posts



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.