Does Tailwind CSS allow transitions of gradients i.e. changing the 'from' or 'to' color so that the gradient of either color changes by a transition?
What I have tried:
<button class="transition duration-500 ease-in-out bg-gradient-to-t from-black to-white hover:to-red-500">
Hover me
</button>
As chojinicki already pointed out, it is not possible without any workarounds, especially without adding extensions to your config file. Because I needed the exact same for my project, I created my own workaround for it.
You have to double the background size of the element and transition the background position using transition-all to get the desired effect. Note that you require the via- gradient stop.
Tailwind Play: https://play.tailwindcss.com/XFQDCOKQ8L
<button className="transition-all duration-500 bg-gradient-to-t to-white via-black from-red-500 bg-size-200 bg-pos-0 hover:bg-pos-100">
Hover me
</button>
tailwind.config.js
module.exports = {
// ...
theme: {
extend: {
backgroundSize: {
'size-200': '200% 200%',
},
backgroundPosition: {
'pos-0': '0% 0%',
'pos-100': '100% 100%',
},
},
}
};
Unfortunately, it is very limited and doesn't exactly work with your exact example provided, however this is the closest you can get.
Short answer No, but not because of lack this functionality in Tailwind but rather in CSS itself. Reason for that is probably performance issues - browser engine would have to render separate gradient for every frame of animation.
This is common question: Use CSS3 transitions with gradient backgrounds
You can only try to use some workaround (depends what exactly effect you expect) like background position, opacity etc (examples in linked question and plenty tutorials online). If something works for you - just extract this as Tailwind utility if you need this in multiple places.
https://tailwindcss.com/docs/adding-new-utilities
Related
When the Vue animation ends the content "jumps" back up as you can see in this example:
https://codepen.io/propsoft/pen/PRYjBZ
<transition name="slide-y-transition">
<div v-show="compare">
Here is the hidden {{ content }}
</div>
</transition name="slide-y-transition">
Any ideas on how to fix this issue?
Cheers!
The problem with the animation is that it uses transform: translateY(-15px);, which causes only a visual translation of the content but the div is still occupying the same space. One way to fix that is to animate other properties, like height for example. The drawback with that is that the div needs to have a fixed height, which may not be possible in all situations.
You can test different approaches without animating anything, see what causes the div below to actually be displaced or not. And then you can animate that.
Check out this codepen with your example animated using height: https://codepen.io/noeldemartin/pen/ommxZG
my question is how can I add specific movement to x-y axis for an HTML element according to mouse movements.
Look at the site here and scroll to second slide:
http://community.saucony.com/kinvara3/
How can i achieve such effect!?
If you're going to write the library-free version, you will need to start with the following:
Learn DOM-manipulation.
var myEl = document.querySelector("#my-el");
Learn the <element>.style interface.
myEl.style.position = "absolute";
Learn the CSS properties, their values and how to read/use them from the style interface.
myEl.style.left = 10 + "px";
You'll need to understand the following CSS properties at a minimum:
"display"
"position"
"top"
"left"
"z-index"
Learn how to parse numbers from strings, properly, in JS.
...this will be unimportant, working with the mouse,
but very important, working with the DOM.
Learn how to write event-handlers.
window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});
Learn the properties of event-objects (specifically the event-types that are important, like mouse, keyboard, touch).
Learn how to manage events, and control the number/frequency of operations, based on an ideal framerate, when the browser won't do it for you.
Learn how to make all of these things happen in a cross-browser, IE8+ way.
Learn a little linear-algebra (honestly, learning enough of it to understand an inverted-axis scaled-parallax is just a tiny bit harder than Grade 6 geometry.
You can get a similar effect CSS only, no JS needed!
You can see an example here: Pure CSS 3D Meninas, by Román Cortés. In his blog, there is also the explanation.
Basically, you have to split the target element in small elements, and on hover, set the position of different background layers according to your trigonometric calculations.
From his explanation,
There are 80 vertical hover elements of 5*455 pixels each, covering
the full effect. Each hover element contains inside elements to define
every layer position, the background image and the lateral background
image. When the hover element is not active (without the mouse over
it), all is inside elements showing images are hidden, with display:
none.
When the hover element is active, the images are set to display:
block, and the position of these are set. These positions have been
calculated and are written in the CSS code for each layer and each of
the 80 vertical hover elements. This is what does the magic.
I'm looking to adapt this really simple and effective jQuery script:
jQuery to animate image from left to right? (thanks DonamiteIsTnt)...
I would like to know how to expand upon it so you could effectively use two images with a "switch" animation. For example, a bird flies to the right of the screen - flip animation - bird appears to fly back to the left - flip animation - flies to the right again.
The "switch" animation I was thinking something along the lines of a 2D image effectively turning upon itself (like a goldfish swimming back and forth in a bowl and how it would appear to us from the front of the glass).
I don't know if you would use a single image in this case and shrink it from 30px wide to 0px then -30px, etc. to face it the other way. Or need to switch between a right-facing image and a left-facing image. Either way, it would be cool to have it animated.
I have found similar questions on this site referring to the left and right effect and the flip effect, but not combined. So any help would be greatly appreciated!
As a side note: I have linked to http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Edit: Have got this far...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function beeRight() {
$("#b").animate({left: "+=300"}, 5000, "swing", beeLeft);
$("#img").attr("src","rightArrow.gif");
}
function beeLeft() {
$("#b").animate({left: "-=300"}, 5000, "swing", beeRight);
$("#img").attr("src","leftArrow.gif");
}
beeRight();
});
</script>
</head>
<body>
<div id="b" style="position:absolute;"><img id="img" src="rightArrow.gif"></div>
</body>
How would I then add an animated image swap such as: http://davidwalsh.name/demo/css-flip.php - needless to say, does not need to be as complicated. I'm looking to do this with img's, not div's. I understand how something like this would be done in CSS but I do not know how to incorporate it with the jQuery/Javascript.
Thanks again!
Depending on the browsers you're targeting, you could achieve the effect entirely in CSS3. Use a couple of classes to represent the beginning and ending states and some translatex transforms and scalex transforms to handle the flipping. Then add CSS transition property to animate. Then you can use whatever you like to trigger the class change, :hover, jQuery timer, element click, whatever.
I am designing a website and for effects I came across the below set of jquery code for achieve text color change with animation. But it doesn't work and I am not sure what is wrong.
JSFIDDLE
Below is the code that I'm currently experiencing the issue with:
jQuery:
$('.list-5 li a').hover(function() {
$(this).stop().animate({ color: '#fff' })
}, function() {
$(this).stop().animate({ color: '#0e1b23' })
})
HTML:
<div class="list-5">
<ul>
<li>
Hello world
</li>
</ul>
</div>
#FFFF is an invalid color. Use either #FFF or #FFFFFF.
Also, the default jQuery .animate does not animate colors. You'll have to use jQuery UI for that (or the Color plugin).
Demo using the color plugin: http://jsfiddle.net/FMTDp/13/
Demo using jQuery UI: http://jsfiddle.net/FMTDp/15/
You can't animate colors!
.animate({
color: '#ffff'
});
unless you add a reference to jQuery UI.
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used).
Working DEMO using jQuery UI
You need to use jQuery UI or jQuery plugin to animate color. You are also using wrong color code, use #fff or #ffffff.
From animate:
For example, width, height, or left can be animated but
background-color cannot be, unless the jQuery.Color() plugin is used
Note: The jQuery UI project extends the .animate() method by allowing
some non-numeric styles such as colors to be animated. The project
also includes mechanisms for specifying animations through CSS classes
rather than individual attributes.
I want to do color animations without explicitly specifying absolute colors. To give you an example:
I have a div with background: #2288ee. If i want to make it brighter, instead of writing:
$('div').animate({'background-color': '#3399ff'});
i want to write something like:
$('div').brighten({'background-color': '10%'});
The core of the idea is to have relative values in case the design changes and i do not have to adjust every single effect.
you may checkout this repository, it supports all your requirements.(hue, saturation, brightness, etc)
https://github.com/jquery/jquery-color