I'm trying to create an svg image where when you hover over part of an image it animates other parts of the image. It's a guitar pedal that when you hover over it, the light goes on and the dials rotate. However I can't figure out how to rotate the dials without the dials shooting off of the pedal. Any help would be much appreciated!!
Here's an example of it:
https://codepen.io/SHINZOC/pen/vYEaooM
.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
}
Change the CSS to
.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
}
since you want to rotate around the fill box and not the view box.
Related
I'm trying to create an svg where when you hover over one element in the image it triggers different animations on other parts of the image.
Example here: https://codepen.io/SHINZOC/pen/GRgXeey
Looking to have the pink rectangle disappear when hovering over while also having each square rotate at different angles. I can get one square to rotate but the others won't for some reason. Any help would be much appreciated!!
.pink_rectangle { transition: .3s;}
.pink_rectangle:hover {opacity: 0;}
#pink_rectangle:hover + #blue_square {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
}
#pink_rectangle:hover + #yellow_square {
transform: rotate(35deg);
transform-origin: center center;
transform-box:fill-box;
}
#pink_rectangle:hover + #orange_square {
transform: rotate(15deg);
transform-origin: center center;
transform-box:fill-box;
}
It is not yet possible to do what you ask with plain css you would need to use addEventListener("mouseover", function()); in javascript to make it work.
It doesn't work because CSS can't affect other css classes that are not contained within it.
If you don't know how to use addEventListener read a bit of this.
I'm a novice with GSAP and am experimenting with the plugin. I want to create an effect where a rectangles border is drawn by a small path in a continuous loop. I've mostly achieved this, but the end of the animation is pretty choppy when it resets.
Here's a link to the codepen I'm working on.
How can I avoid that abrupt ending to the animation?
I've tried setting the animation to drawSVG: "100% 115%" and that didn't work.
I haven't tried changing the easing yet as I don't think that would fix it.
Thanks for helping!
I believe this tutorial is exactly what you're trying to achieve Codepen
code required for codepen link
I forked your pen so you can see it in action
Codepen
Hope this is what you where looking for
The previous answer didn't sit right with me as I felt like something more elegant could be done. I found a simple solution where GSAP isn't used, but CSS animations are.
The result is a smooth animation using only one element.
GSAP manipulates CSS animations anyway so this is a simplification of the original problem.
https://codepen.io/strigiforme/pen/zLbYWm
<svg viewbox = "0 0 200 200">
<rect id = "rect" x = "85" y = "20" width="30" height="30" stroke = "red" stroke-width = "1.5" fill="none" stroke-dasharray="30 90" stroke-dashoffset = "240"></rect>
body {
background-color: #222;
overflow: hidden;
}
#rect{
animation: draw 5s linear infinite;
}
#keyframes draw{
14%{
stroke: orange;
}
28%{
stroke: yellow;
}
42%{
stroke: green;
}
56%{
stroke: blue;
}
70%{
stroke: indigo;
}
84%{
stroke: violet;
}
98%{
stroke: red;
}
to{
stroke-dashoffset: 0;
}
}
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.
I am using css animations on the receiver app that runs on the chromecast and I've noticed 2 issues with it.
Firstly, the animations are very choopy. I estimate it looked probably about 5 frames per second.
Second is screen tearing issues during the animations. It seems like the system isn't waiting for vblank before swapping buffers?
I've used a test image, and here's my css definitions for the animations:
#testImage {
animation-name: seesaw;
animation-duration: 5.0s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: seesaw;
-webkit-animation-duration: 5.0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#-webkit-keyframes seesaw {
0% { left: 0px; }
50% { left: 500px; }
100% { left: 0px; }
}
#keyframes seesaw {
0% { left: 0px; }
50% { left: 500px; }
100% { left: 0px; }
}
Am i doing something wrong, or I should avoid using css animations altogether on the receiver app?
Does anyone have any advise on how else I would do animations?
I don't think you are doing anything wrong, it is just that the chromecast device is limited in its animation capabilities. Leon Nichols did some helpful benchmarking here: https://plus.google.com/117916055521642810655/posts/9dBQp7SShv8
How can I get an image button with hover effect? I have two button images one is simple and the other one is for the hover?
You can easily do it in CSS.
input[type='button']:hover
{
color: #00a;
//or background-image: url("url");
}
You can do it easily with css by using a sprite image and moving the background image depending if its hovered or not.
css:
a { display:block; width: 80px; height: 40px; background: url(bgImage.png) top;
a:hover { background: url(bgImage.png) bottom; }
You have to combine your "simple" and "hover" image into a single image for this to work.