GSAP Translate Individual Chars Issue

[Matthew Meaklim]

Hello,

 

I've been trying to recreate the hover effect shown here, https://tympanus.net/Development/ImageRevealHover/ (the text hover on "Effect 20" to be exact).

 

I'm more or less there I think, however, because I'm using a much more recent version of GSAP, I decided to try and convert the demo code to the new syntax, and I'm wondering if perhaps I've made a blunder and that's why I'm facing an issue.

 

Here's the code responsible for the effect;

 

var characters              =   document.querySelectorAll('#company-logo_text .character');

const getRandomFloat        =   (min, max) => (Math.random() * (max - min) + min).toFixed(2);

function animateCharacters() {
    const setColour = character => gsap.set(character, {
        color: ['#FEFEFE', '#4B4E4B', '#F5CB5C'][parseInt(getRandomFloat(0, 3))],
        opacity: Math.round(Math.random()) === 0 ? 1 : 0
    });

    characters.forEach((character) => {
        gsap.to(character, {
            x: '0%',
            y: '0%',
            startAt: {x: `${getRandomFloat(-50, 50)}%`, y: `${getRandomFloat(-50, 50)}%`},
            duration: .1,
            repeat: 3,
            onStart: () => setColour(character),
            onRepeat: () => setColour(character),
            onComplete: () => gsap.set(character, {color: '#4B4E4B', opacity: 1}),
            ease: Expo.easeOut
        });
    });
}

 

And here's it on the website I'm working on (hover on the text in the top left);

 

https://ilimitado.studio/

 

The problem I'm having is that in the example, the letters only jump a small amount, whereas in mine they often jump off the screen.

 

The only thing I've noticed is that in the demo, each letter is moved via "transform: matrix", whereas mine start with "transform: translate" and then on hover move via "transform: translate3d" - this is why I'm wondering if my code is incorrect.

 

Let me know if you need me to create a CodePen or if you can see something daft I've done wrong.

 

Thanks,

 

Matthew

[Cassie]

Hey Matthew!

 

TIL - I've never seen startAt before! Looks like it's old syntax, but not legacy.

Quote

 startAt isn't legacy - we just don't really promote it. That's just what .fromTo() uses internally:

 

gsap.fromTo(".box", {x: 100}, {x: 500});

// SAME
gsap.to(".box", {startAt: {x: 100}, x: 500});

You can also do a heck of a lot of the heavy lifting in here with GSAP's random util!
https://greensock.com/docs/v3/GSAP/UtilityMethods/random()

 

 

String form

Note that inside of tween vars you can also use a string form like "random(-100, 100)" for a range or like "random([red, blue, green])". For example:

gsap.to(".class", {
  x:"random([0, 100, 200, 500])" //randomly selects one of the values (0, 100, 200, or 500)
});

You can even have the random number rounded to the closest increment of any number! For example:

gsap.to(".class", {
  x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5!
});

If you pop a codepen together I'm happy to take a look and see how we can adjust/simplify this down for you. Something (conceptually) like this though I imagine, will need some timing/easing tweaks but you get the idea
 

gsap.fromTo(".char", {
  xPercent: "random(-100, 100, 10)"
  color: "random(['#FEFEFE', '#4B4E4B', '#F5CB5C'])"
},{
  xPercent: 0,
  color: "#4B4E4B",
  ease: "expo.out",
  stagger: {
    amount: 2,
    from: "random"
  }
});

 

[Trapti]

Here is the 

See the Pen abKWxrR?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

 

I tried creating it with fromTo instead of startAt. 

 

 

[GreenSock]

Yep, you don't even need to do a loop. It could all be simplified to: 

See the Pen wvXeGLy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

(assuming I understood the goal correctly)

 

Also, for the record, startAt is not old/obsolete/legacy - it's actually the very same thing that a .fromTo() tween does internally - it simply takes the "from" vars object and slaps it into a startAt:{} on a normal .to() tween. 

 

Enjoy!

[Matthew Meaklim]

Hi again guys. Sorry for the delay in getting back to you all, was over in London at an event. Thanks for all the feedback, I was able to get the solution I wanted taking on board everything you's said. Thanks again!