[GSAP Translate Individual Chars Issue]

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

[GSAP from, to and fromto]

Cheers Jack, that's the fix I was looking for!

[GSAP from, to and fromto]

Hello,

 

Just starting playing about with GSAP last weekend and so far so good... more or less.

 

I've created a pretty basic loading animation (following an old YouTube tutorial), but I'm having a bit of bother with the .to, .from, .fromTo methods and am unsure which I should actually be using. The problem with what I've done as it stands is that on load the loader itself flickers. I know why it does it, I just don't know how to fix it.

 

You can see the problem here, https://ilimitado.studio/.

 

HTML

 

<div id="loader_wrapper" class="fixed loader_wrapper">
    <div id="loader" class="fixed loader">
        
    </div>
</div>

 

SCSS

 

.loader_wrapper {
    width: 100%;
    height: 100vh;
    background-color: $companyColourOne;
    z-index: 98;

 

    .loader {
        width: 12%;
        min-width: 120px;
        height: 36vh; <--- Issue (probs)
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: $companyColourSeven;
        z-index: 98;
    }
}

 

JS

 

var loaderTimeline = gsap.timeline();

 

loaderTimeline.from('#loader', 1.2, {
    height: '0vh',
    y: '33vh',
    transformOrigin: '50% 100%',
    ease: Expo.easeInOut
});

 

loaderTimeline.to('#loader', 1.2, {
    height: '0vh',
    y: '-33vh',
    transformOrigin: '50% -100%',
    ease: Expo.easeInOut
});

 

So yeah, I did try playing about with the heights in the CSS, and the from and to methods, but the above is as good as I could get it.

 

Apologies in advance if this question is poorly formulated... new here.😆

 

Thanks,

 

Matthew