Icon rotation animation - Support | Kriesi.at

Viewing 30 posts - 1 through 30 (of 33 total)

1 2 →

Author

Posts
June 20, 2016 at 3:54 pm #650888

fcp
Participant

Hi !

There is an icon animation included in the Enfold theme I would like to reproduce.
This animation is a rotation of the icon and a color switch from grey to white on black.
Which code do I have to use to reproduce this animation on my own icons with my own colors where I want on my website?
(You can see the icon I’m talking about on the Imgur image here : http://imgur.com/7dTgsnG)

Thanks !

June 22, 2016 at 5:07 am #651867
Ismael
Moderator
Hey fcp,

Thank you for using Enfold.

Use this something like this:
```
.custom_selector {
    opacity: 0.1;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.custom_selector {
    -webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
```
Replace “.custom_selector” with your own.

Best regards,
Ismael
June 22, 2016 at 11:35 am #652020

fcp
Participant

Hello Ismael !
I’m sorry but I don’t really understand…
I tried to create an icon with a CSS CLASS and replace “custom_selector” with this CSS CLASS in your code, but absolutely nothing happen.

What am I doing wrong ?
Thanks !

June 23, 2016 at 7:12 am #652517

Rikard
Keymaster

Hi,

Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

Best regards,
Rikard

June 23, 2016 at 11:43 am #652585

fcp
Participant

Hi Rikard !

June 27, 2016 at 3:03 pm #653797
Andy
Inactive Moderator
Hi,

you don’t use the code Ismael has mentioned to you inside your Quick CSS field.
Use it like this for example:
```
.icone-sous-menu {
    opacity: 0.1;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.icone-sous-menu {
    -webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
```
Best regards,
Andy
June 28, 2016 at 12:14 am #654003

fcp
Participant

Hi,
I don’t use anything because I cleared everything when I gave WordPress credentials to your team.
Could you please add the code where it has to be, because I tried everything you told me and nothing works.
Thanks

June 28, 2016 at 3:07 pm #654232

Andy
Inactive Moderator

Hi,

please follow our suggestions and just put the code I’ve given to you inside your Quick CSS field the next time. Now, I’ve done it for you. Check if things are getting better for you.

Best regards,
Andy

June 28, 2016 at 4:43 pm #654280

fcp
Participant

Hello,
No it doesn’t work, but if it would work you could see it, no ?

June 28, 2016 at 5:23 pm #654310

Andy
Inactive Moderator

Hi,

the css code does work. You can test it by adding a display: none; to it. Use this code as a starting point and adjust the values as needed.

Best regards,
Andy

June 28, 2016 at 6:00 pm #654351

fcp
Participant

I’m sorry but with the “display:none” like you did, no icon appear at all. And without it, nothing happen on hover.

June 29, 2016 at 11:21 am #654743
Andy
Inactive Moderator
Hi,

exactly, that’s what display: none; does, so we know that the code is working. You just need to find the correct values until it fits for you. Feel free to hire a freelance developer for this job if you can’t do it by yourself. If you need to do it on hover then use this code:
```
.icone-sous-menu:hover {
    opacity: 0.1;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}

.icone-sous-menu:hover {
    -webkit-animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation: avia_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275);
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
```
Best regards,
Andy
June 29, 2016 at 11:34 am #654749

fcp
Participant

Hi,
I don’t want to search new values which fit for me, for now I only want to do EXACTLY THE SAME animation that I was talking about in my first message, only that. Then I could do it with my own icons and so on…

June 29, 2016 at 11:46 am #654755

fcp
Participant

And once again, with that code, absolutely nothing happen to my icons on hover or not, nothing.
Does something happen on your side ??

June 29, 2016 at 12:18 pm #654769
Andy
Inactive Moderator
Hi,

try to add an !important to the values, like this:
```
.icone-sous-menu:hover {
    opacity: 0.1 !important;
    -webkit-transform: scale(0.5) !important;
    -ms-transform: scale(0.5) !important;
    transform: scale(0.5) !important;
}
```
Best regards,
Andy
June 29, 2016 at 12:20 pm #654772

fcp
Participant

I already tried to add it everywhere, but it still don’t work.

June 29, 2016 at 1:20 pm #654802

Andy
Inactive Moderator

Hi,

no you did not. There is not !important inside your Quick CSS field, so I did it for you now. Let’s stick to hover behavior only at first. Change the value as needed. No idea what exactly you want to achieve. Maybe you can send us a precise link with an example of what kind of animation you want to achieve.

Best regards,
Andy

June 29, 2016 at 1:43 pm #654815

fcp
Participant

Sure ! :-) Because I tried to add !important everywhere in the code, but it didn’t work… So I deleted it.
Ok so I will try to find a way to show you what I only need…

June 29, 2016 at 2:07 pm #654831

fcp
Participant

Ok, so if you go on this page (private content), you will see there is a post named “test” with no image. So there is an animation of a camera icon (rotation + grey/white to white/black).
What I only want to do is doing exactly the same animation. Exactly the same somewhere else on a button in a page. After that, I could use the code to animate buttons like this wherever I want.

Thanks !

June 29, 2016 at 2:09 pm #654833
Andy
Inactive Moderator
Hi,

this is achieved by those values:
```
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
```
Hope this helps.

Best regards,
Andy
June 29, 2016 at 2:23 pm #654845

fcp
Participant

Ok, so I’ve tried this code :

.icone-sous-menu:hover {
-webkit-transform: rotateY(180deg)important;
transform: rotateY(180deg)important;
}

…but once again, nothing happens on icons.

June 29, 2016 at 2:26 pm #654847

fcp
Participant

However, this new code can’t make the color change (grey on white to white on black) that you can see on the icon…

June 29, 2016 at 3:03 pm #654860
Andy
Inactive Moderator
Hi,

you forgot “!”:
```
.icone-sous-menu:hover {
-webkit-transform: rotateY(180deg) !important;
transform: rotateY(180deg) !important;
}
```
Best regards,
Andy
June 29, 2016 at 3:20 pm #654878

fcp
Participant

You’re right !
But in the animation I was talking about, the icon really seems to rotate…
With this code, it only and immediately changes the direction of the icon and it is a beginning, but it doesn’t seem to rotate.

And what about the color change ?

Thanks !

June 29, 2016 at 3:36 pm #654892

fcp
Participant

Ok it’s working adding this piece of code :
-webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;

There is only the question of the color change now…?

Thanks !

June 29, 2016 at 5:39 pm #654935

fcp
Participant

Hi again !
I’m sorry for all those questions… :-(

So I tried to find a solution for the color but I think I gonna do this after.
I’ve created a test page on my website (kriesi-test) and the link to this page is in private content, and the quick css code is for the moment :
.icone-sous-menu-test:hover {
-webkit-transform: rotateY(180deg) !important;
transform: rotateY(180deg) !important;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

Now I have 3 questions :-) :
1) How could I make only the icon (and not the text) rotate ? I’ve tried to add “.av-icon-char” after “.icone-sous-menu-test:hover”, but it doesn’t work.
2) What code do I have to add to make the same animation in the other way when the mouse is not on the button anymore ? (after hover)
3) The image aims the same page that the icon, so I would like to know which code I need to add to “link” the image and the icon. I mean, when mouse is on the icon, I want effects on both (image and icon). Same thing when mouse is on the picture.

Thanks !!

July 1, 2016 at 11:17 am #655654
Andy
Inactive Moderator
Hi,

please stick to one question only in one ticket.

Try this code into your Quick CSS field instead:
```
.icone-sous-menu-test .av-icon-char:hover {
   -webkit-transform: rotateY(180deg) !important;
   transform: rotateY(180deg) !important;
   -webkit-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
```
Please hire a freelance developer for the customizations you need: http://kriesi.at/contact/customization

Best regards,
Andy
July 7, 2016 at 12:22 pm #657939

fcp
Participant

Hello,

No, it doesn’t work. It only makes a weird animation.

So you mean I can’t get any help for those customizations I was asking for here ?

July 7, 2016 at 1:13 pm #657992

Andy
Inactive Moderator

Hi,

change the values for the code until it fits to your needs. Remove any other customizations which could cause any conflict with this code.

We are here to help if something does not work as expected with the theme. For any customization of the theme or the theme functions please check this: http://kriesi.at/contact/customization

Best regards,
Andy

July 7, 2016 at 3:13 pm #658107

fcp
Participant

Ok,
Maybe it would be better to start with that. :-)
However, it seemed to me that many posts were relative to “customization” and not only issues with the Enfold theme…
So I gonna try to do it by myself.
Thanks
Author

Posts

Viewing 30 posts - 1 through 30 (of 33 total)

1 2 →

The topic ‘Icon rotation animation’ is closed to new replies.