Animated Buttons

jordanzsetec · April 19, 2020, 8:33pm

Hello to everyone from the Corvid By Wix community!

I’m a regular user of wix, and now I’m trying to improve my websites with code. I’ve been trying to develop custom animations for buttons, as you can see below.

I got some results with the code below, however, I’m using the same code on every button I put on the page. Is there any way to make a “general code” for these animations?

import { timeline } from 'wix-animations';

$w.onReady(function () {

 //Hero Button - Onde Atuamos
 const target5 = $w('#bt1');

 //Hero Button - Contato
 const target4 = $w('#arrow');
 const target6 = $w('#btn');

 //Learn more Buttons - Saiba Mais
 const target1 = $w('#arw1');
 const target2 = $w('#arw2');
 const target3 = $w('#arw3');
 
 
 
 //Hero Button - Onde Atuamos
    $w('#bt1').onMouseIn(() => {

        timeline()
            .add(target5, { y: -5, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Hero Button - Onde Atuamos
    $w('#bt1').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target5, reset, 0)
            .play();
    })

 //Hero Button - Contato
    $w('#btn1').onMouseIn(() => {

        timeline()
            .add(target4, { y: 0, x: 5, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .add(target6, { y: -5, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Hero Button - Contato
    $w('#btn1').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target4, reset, 0)
            .add(target6, reset, 0)
            .play();
    })

P.S.: I’m not a coder, just trying to do something.

Thank you all for the attention!

givemeawhisky · April 19, 2020, 9:31pm

You can use style here.
https://www.wix.com/corvid/reference/$w.Style.html

Also, have you seen Wix text buttons in the Wix Editor that you can edit to suit yourself?
https://support.wix.com/en/article/adding-and-setting-up-a-text-button

Otherwise you stick with Wix Animations.
https://www.wix.com/corvid/reference/wix-animations.html

jordanzsetec · April 19, 2020, 11:51pm

Hi GOS, thank you for the help!

I looked at the style, but I’m not sure how it works.

Should I use the style to change the appearance of items that can be changed by the style, right?

But I would like to know the following: For every button that I want to animate and use the style properties, do I have to make an individual programming for the respective item?

That’s what I’m doing now, and I wonder if there is a less repetitive way.

In this case, referring to the Wix text button, in my editor they appear the same way they always appeared, without these new options like icons and gradients. Do you know why?

Thanks again for your attention!

givemeawhisky · April 20, 2020, 1:20am

You can place the code in the site tab so that it applies to the whole site instead of having to add it to every single page.

For usage, that is your own choice and if you are happy using Wix Animations, then carry on doing it. one big plus point straight away is that you will have more control over what you do with it, so you might want to stick with this way.

That API has only recently been released so you would have had to do it with Style for buttons and Effect Options before then or just make do with the settings in the Editor itself for colour and animation etc.
https://www.wix.com/corvid/reference/$w.Button.html#style
https://www.wix.com/corvid/reference/$w.EffectOptions.html

Plus, with using Style for buttons, you are also limited with hover and disabled.
Getting or setting a button’s styles, gets or sets the styles of the button’s regular state. It does not set the styles of the button’s hover or disabled states.

Some users might just be happy setting it up through the Editor.
https://support.wix.com/en/article/customizing-the-design-of-your-buttons

It is all down to personal preference and how much work the user wants to put in and what degree of quality website that they are looking to make etc.

My option in preference would obviously be the animated buttons

As for your comment on the text buttons, you should be able to see Text Buttons in Wix Editor simply under Button along with Themed and Icon Buttons.

Or if you are testing out Editor X, then you will see this list of buttons that you can edit to suit your own site.

If you don’t see them in your Wix Editor, then you are best suited going through Wix Support to get them to see why certain options are not appearing in your Editor.

givemeawhisky · April 20, 2020, 1:32am

Also, the button of your code you might be missing a closing bracket and parentheses unless I have done it wrong myself!

       timeline()
            .add(target4, reset, 0)
            .add(target6, reset, 0)
            .play();
    })
 }) // Needed //

jordanzsetec · April 20, 2020, 2:21am

Hi GOS, thanks a lot again! Your help and attenttion are very usefull to me!

Ok, like I said before, I’m not a coder, and I’m just trying to do something using wix code, with the help of wix corvid examples and the community.

I tryied to do what you told me, placing the code in the site tab, but when I do that, some issues appear, like this:

The website that I’m working on is looking like the GIF bellow. I can use the animations and I’m setting the buttons through the Editor to style:

https://static.wixstatic.com/media/a27d24_b1ee5207e884430fade06d6f5e818ac5~mv2.gif(image larger than 4 MB)

Can you help me a little bit with the code?

The only thing that I want is use these animations in every button in my website, but using less code than I’m using now, you know?

My current code for the animations is that:

import { timeline } from 'wix-animations';

$w.onReady(function () {

 //Hero Button - Onde Atuamos
 const target5 = $w('#bt1');

 //Hero Button - Contato
 const target4 = $w('#arrow');
 const target6 = $w('#btn');

 //Learn more Buttons - Saiba Mais
 const target1 = $w('#arw1');
 const target2 = $w('#arw2');
 const target3 = $w('#arw3');
 
 
 
 //Hero Button - Onde Atuamos
    $w('#bt1').onMouseIn(() => {

        timeline()
            .add(target5, { y: -5, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Hero Button - Onde Atuamos
    $w('#bt1').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target5, reset, 0)
            .play();
    })

 //Hero Button - Contato
    $w('#btn1').onMouseIn(() => {

        timeline()
            .add(target4, { y: 0, x: 5, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .add(target6, { y: -5, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Hero Button - Contato
    $w('#btn1').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target4, reset, 0)
            .add(target6, reset, 0)
            .play();
    })

 //Saiba 1
    $w('#Saiba1').onMouseIn(() => {

        timeline()
            .add(target1, { y: 0, x: 5, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Saiba 1
    $w('#Saiba1').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target1, reset, 0)
            .play();
    })

 //Saiba 2
    $w('#saiba2').onMouseIn(() => {

        timeline()
            .add(target2, { y: 0, x: 5, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Saiba 2
    $w('#saiba2').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target2, reset, 0)
            .play();
    })

 //Saiba 3
    $w('#saiba3').onMouseIn(() => {

        timeline()
            .add(target3, { y: 0, x: 5, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
            .play();
    })

 //Saiba 3
    $w('#saiba3').onMouseOut(() => {

 const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };

        timeline()
            .add(target3, reset, 0)
            .play();
    })
});

The website link that I’m working on: https://www.cpcsp.com.br/

Thanks a lot again for the help and attention!

Topic		Replies	Views
How do I code the button given in the Wix editor along with the animation? Ask the community code , question	2	77	November 13, 2021
Image and Text Animation - for real? Ask the community code , question	12	1295	March 22, 2020
Animated Button Ask the community code , question	1	668	May 20, 2020
How to create fade-in animation with code?? Ask the community code , question	0	582	January 29, 2021
Buttons Hover Slide Animation Ask the community wix-studio , code , other-functionality , design , question	1	18	October 24, 2024

Animated Buttons

Related topics