Freeze animation.

Ask the community
,
1

Hi! How can I freeze an animation? I have a fade and a glide effect apllied to a text box, I want to make the fade effect appear first, freeze in that same position during 2 seconds, and then gliding to its position.

For reference:
the text box id: #text1
the effect has to play in #page1 onViewportEnter
fade animation duration has to be set to: 2000
glide animation duration has to be set to: 3000
and after the fade effect plays, the text box has to be freezed for 2 seconds, then the glide effect plays.

Can somebody provide me the code so I can put it in my page? Thanks in advance.

2

To do that, you’ll need to make a copy of the text element and make both of them hidden on load.
Then you can do something like:

let fadeOptions = {
 "duration":   2000,
};
let glideOptions = {
 "duration":   3000,
 "angle":      270,
 "distance":   200
};

$w.onReady(function () {
    $w("#text1").show("fade",fadeOptions).then(() => {
        setTimeout(() => {
        $w("#text1").hide();
        $w("#text2").show("glide", glideOptions);
        }, 2000)

    })
});

See an example here:
https://jonatandor35.wixsite.com/test/fade-glide

3

Hi! Thank you for your answer, but wouldn’t that affect the SEO since it’s duplicated content?

4

@b4443569 I don’t really know.