I'm trying to animate a variable font's axis in Javascript, the axis is called 'FLUX' and it affects a vertical movement in the variable font. I got this part to work in CSS, however I would also like for the second axis, the 'wdth', to correspond to the viewport width. I got this to work in too, but in Javascript.
Now the issue is that both won't work simultaneously. I feel like the way to get this to work is to animate both axes in Javascript, however I cannot figure out how to achieve the 'FLUX' animation in Javascript, only CSS.
I've included a Codepen link to what I've been working on, you can see the Javascript works when the CSS animation is disabled, but with it enabled the CSS seems to override the Javascript.
https://codepen.io/Xenitos/pen/YMbboX
HTML
<html>
<head>
<meta charset="UTF-8" />
<title>Test Responsive Width</title>
<body>
<div class="rapper">
<h1 id="title">Flux</h1>
</div>
</body>
</html>
CSS
body{
padding: 0;
margin: 0;
}
.rapper{
padding: 20px;
}
#title{
font-size: 20vw;
color: black;
font-family:"Flux";
text-transform:uppercase;
font-variation-settings: 'wdth' 400;
animation: title infinite;
animation-duration: 15s;
animation-timing-function: ease;
}
#keyframes title {
0% {font-variation-settings:"FLUX" 400 ; }
50% {font-variation-settings:"FLUX" 700 ; }
100% {font-variation-settings:"FLUX" 400 ;}
}
JAVASCRIPT
$( document ).ready(function() {
// Variables
var $window = $(window);
$window.resize(function(){
$('#title').css('fontVariationSettings', "'wdth'" + ($window.width()-450)*100/(1920-450)*4);
})
});
// End temp code for seeing browser width
The expected result is that the viewwidth is linked to the 'wdth' axis of the font and the 'FLUX' axis is animated on a infinitely on a loop.
Is there something I'm missing, or could someone please help me accomplish this entirely in Javascript?
The problem is that font-variation-settings will reset every axis that is not explicitly set.
For instance, in your CSS you set font-variation-settings: 'wdth' 400; and an animation that changes font-variation-settings: "FLUX" 400;. You would expect these would combine, but alas: the animation does not contain a value wdth so that will immediately be reset to its default value once the animation starts.
Likewise with the JavaScript part: CSS and JavaScript are fighting to set font-variation-settings, each undoing the other's settings.
So, at every step it's important to set both the values.
(Tip to get JavaScript and CSS to work together: instead of writing directly to font-variation-settings from JavaScript, write to a CSS variable and use that in the CSS/animation.)
I think you are modifying the wrong variation setting in the #keyframes steps
#keyframes title {
0% {font-variation-settings:"wdth" 400 ; }
50% {font-variation-settings:"wdth" 700 ; }
100% {font-variation-settings:"wdth" 400 ;}
}
Related
I'm creating a CV page, where I included animations - some of them work with additional library: Animate css. It works, but animations start when page is fully loaded - and I want them to happen when scrolled to position where div starts (It's in the middle of page)
I've tried to do that with element .scrollTop, but then I could include value only in px - and i need responsive page ( I use calc() )
There was also possibility that i did something wrong - but i haven't noticed
Just like I said - I want to start animations when div would become in range of sight.
This is possbile, if you combine JQuery with JavaScript DOM or with just JavaScript DOM.
My function might not be the best way, but it works and is fairly simple.
My example starts an Animation when the grey divs Top offset relative to the viewport is lower than 100.
(If you would like to use this make 2 css classes (1 with an animation, 1 without) and set the ID Strings to your HTML Ids)
.Initial{
background-color: #ccc;
color: black;
position: fixed;
}
.AfterScroll{
background-color: #fff;
color: green;
position: fixed;
animation-name: Anim;
animation-duration: 1.4s;
}
#keyframes Anim{
25% {color: red;}
50% {color: blue;}
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
$( "#AnimationElementID" ).addClass("AfterScroll");
var set = false; // will be false on page load
$( window ).scroll(function() { //On Scroll Event Handler, Could also be window.onscroll (DOM)
// JS HTML DOM get element position relative to viewport
var rect = document.getElementById("AnimationElementTriggerDivID").getBoundingClientRect();
// This is the offset at where your animation would start, 100 = div is 100px from viewport top
if( rect.top <100 && set==false){
$( "#AnimationElementID" ).toggleClass("Initial");
$( "#AnimationElementID" ).toggleClass("AfterScroll");
set=true; // so we only toggle the class once
}
});
</script>
</head>
<body>
<p class="Initial" id="AnimationElementID">
Hi im a text and I will change color if you scroll
</p>
<div id="AnimationElementTriggerDivID" style="background-color: #ccc; position: relative; top:200px; width:20px; height:2000px"> </div>
</body>
</html>
Maybe someone else can provide a better JQuery only option, or a cleaner function, but until then, feel free to use this.
PS: if possible, please provide Code snippets in order for people to be able to help you better and faster.
I recently "made" a website for a friend and it stopped working after I edited some of the content. I don't know why the whole website is broken. It should have images and such...
Please take a look at the website and tell me if anything stands out to why it doesn't work. Thanks!
I have looked at all the html tags and they are all fine.
Your problem is opacity for <article> div is 0:
#main article{
opacity: 0;
}
change to
#main article{
opacity: 1;
}
You have set the opacity to 0 for all ARTICLE elements within your main DIV. I see you have a transition setup for opacity, so I'm assuming you meant to either adjust that opacity value via a script or an animation. Either way, until you implement such, remove the opacity style:
#main article {
...
opacity: 0;
}
As jQuery.fadeIn is not very smooth on mobile devices I try to use CSS but it doesn't work as expected. How to create a smooth CSS animation using Javascript?
In general this is what I'm trying:
$('div')
.css('opacity', 0) // at first, set it transparent
.css('display', 'block') // make it appear
.css('transition', 'opacity 1000ms linear') // set a transition
.css('opacity', 1); // let it fade in
https://jsfiddle.net/8xa89y04/
EDIT1:
I'm not searching a solution using static CSS classes. The point is: I need to set this dynamically in Javascript code - a replacement for jQuerys fadeIn() for example.
Your logic isn't quite right. Firstly you cannot animate display, so to achieve what you require the element has to always be rendered in the DOM (ie. anything but display: none). Secondly, the transition property should be placed within the CSS styling itself. Finally you can make this much more simple by setting all the rules in CSS classes and just turning the class on/off. Try this:
div {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
opacity: 0;
transition: opacity 1000ms linear;
}
.foo {
opacity: 1;
}
$('div').addClass('foo');
Working example
Use this code.
CSS
div {
width: 100px;
height: 100px;
background-color: black;
transition:opacity 2s;
}
JavaScript
$('div').hover(function(){
$(this).css('opacity','0');
})
Without using CSS properly, you are going the long way about it. You'll need to emulate what you would normally do in CSS, using JavaScript, so you'll be setting all your CSS properties, transitions etc, then applying them with js.
I can't personally see any benefit in doing this. Using actual CSS would be cleaner, more efficient, more maintainable, and simply a plain better solution to what you need.
I think this is what you are looking for.
$('div').css({"display":"block", "opacity":"0"}) //Make div visible and opacity as "0"
$('div').animate({opacity :1}, 1000); //Animate div to opacity "1"
Take a look at this Demo
Found the cause here: CSS transitions do not work when assigned trough JavaScript
To give this attention I need to give the browser some time - or better: a working slot to activate the transition as the time seems not to be a problem.
The following code cuts the process in two by using setTimeout()... and it works!
var div = $('div');
// first process
div
.css('opacity', 0) // initial opacity
.css('display', 'block') // make it appear (but still transparent)
.css('transition', 'opacity 1s linear'); // set up a transition for opacity
// break - start the transition in a new "thread" by using setTimeout()
window.setTimeout(function(){
div.css('opacity', 1); // start fade in
}, 1); // on my desktop browser only 1ms is enough but this
// may depend on the device performance
// maybe we need a bigger timeout on mobile devices
So , I'm doing this car display gallery and I want to use CSS animation.
Using only Firefox for now , and the animation does work when I set the class of the "img" manually for animating to the Left :
HTML:
<img src="test3.jpg" id="Position2" class="Pos2ForLeft">
CSS:
#keyframes Pos2Pos1 {
0% {left: 450; top: 200; width: 400; height:300;}
100% {left: 200; top: 250; width: 200; height:150;}
}
.Pos2ForLeft {
position:absolute; left: 450; top: 200; width: 400; height:300;
animation-name: Pos2Pos1;animation-play-state:running;
animation-duration:1s; animation-fill-mode: forwards;
}
So when I code it manually , the animation runs and then stops , just like I want it to. But when I start with a standart CSS class and want to switch to the one with the animation , nothing happens:
document.getElementById("Position"+i).class = "Pos"+positionsBefore[i]+"ForLeft";
alert(document.getElementById("Position"+i).class)
Please ignore loop and variables.I get alerted that the class is changed to the one I want , but nothing happens. Is there something I need to trigger , what's happening?
An element in JavaScript won't respond to the 'class' property. The correct property is className. So the code would look like this:
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";
if you want to apply css when properties change you should use transitions, link you can see it add the horizTranslate class class to box in the demo
risingtiger was perfectly right! As soon as I made this change not only did it work , but if I rush the next animation it goes to it smoothly(I believe)
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";
Thank you very much wonderful people of the internet!! The solutions some other programmers offered me were scary to say the least...
I can produce
-webkit-animation-name:mymove;
dynamically with
object.style.animationName="mymove"
but is it possible to generate something like
#keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
dynamically with JS?
Yes, i use Jquery library and then apply like so:
Say in this situation i want the left value to be dynamic from a div with attribute class value = "push"
<!--HTML-->
<div class="push">Wall</div>
//--JS--
var KeyFrame =
{
init: function(){
if(!KeyFrame.check)
{
//get the left position
var pushLeft = $('.push').position().left;
//set the style and append to head
var css = $('<style>#keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL
//so u don't keep appending style to head
KeyFrame.check = true;
}
}
}
KeyFrame.init();
Consider the idea of how to access the styleSheet...
document.styleSheets[0].insertRule(animationRule)
It's certainly going to be complicated to do well, so briefly you'd want to retain a link and alter the rule associated with each object or something to avoid clutter. Or you could try to run a form of garbage collection with time stamps or something to figure out when the old ones can be removed.
From a quick look for other links I found...
http://davidwalsh.name/add-rules-stylesheets
deleteRule
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule
insertRule (addRule precedes and is therefore more reliable)
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
I'm also just now noting something else that might be useful...
http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
Actually this looks like a better cleaner understanding or at least another way.
http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/
Okay so if I am understanding correctly this jsfiddle should do the trick.
It uses a pre-defined set of transition properties, and changes the values dynamically via jquery.
The syntax for defining these animations is as follows...
transition-property: prop1, prop2, prop3;
transition-duration: timing1, timing2, timing3;
transition-timing-function: ease1, ease2, ease3;
By doing this, you can achieve nearly everything you can with #keyframes (not quite everything, but certainly a fair amount), it just happens to be built into the element style. From here you can go on to change whatever you want via jquery. If its the amount to move you can doing something like...
$("#myElem").css("left", "50px");
and the css3 transition will take care of the rest. If it's something like changing the ease type you can do that too with...
$("#myElem").css("transition-timing-function", "linear");
I know this is not exactly what you were looking for, but chances are it will do the trick.
It looks as if you have an understanding of css3 keyframes. I recommend jQuery.Keyframes to generate keyframes, you can also attach events and callbacks to the animations.
Yes you can, when you write your javascript code, you use the setAttribute() function vs the style() so that you can include more than one type of style. Just insert the animation-name, animation-duration, animation-timing-function or any other types that you wish.
<!DOCTYPE html>
<html>
<head>
<title> Welcome </title>
<meta charset = "utf-8">
<style>
#keyframes appear-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#landing-page {
width: 100%;
height: 1000px;
}
</style>
<script>
window.addEventListener('load', function(){setTimeout(renderService, 1000)});
function renderService(){
var server = document.getElementById('Services');
server.setAttribute("style", "animation-name: appear-in; animation-duration: 5s; animation-timing-function: ease-in; background-image: url('https://wallpaperaccess.com/full/949819.jpg'); background-size: 80% 100%; background-position: center");
}
</script>
</head>
<body>
<div id = "landing-page">
</div>
</body>
</html>