Is there a possibility to have a transition when adding dynamically a new button to the control group?
For example, in this code, it would be nice to show the new button with a slide-In.
valuesOfParameter.forEach(valueOfParameter => {
// iterative Button
var buttonIterativ = new Autodesk.Viewing.UI.Button(valueOfParameter);
// Click Event
buttonIterativ.onClick = (event) => {
console.log(valueOfParameter);
};
buttonIterativ.addClass(valueOfParameter);
controlGroup.addControl(buttonIterativ);
// controlGroup.addControl(buttonIterativ);
$('#' + valueOfParameter).append('<style>.' + valueOfParameter + ':before{content: attr(data-before); font-size: 20px; color: white;}</style>');
$('#' + valueOfParameter.toString()).attr('data-before', valueOfParameter);
});
Thank you
The easiest way would be to go with CSS3 animation - you can pull it off with no code level changes required, e.g.:
.buttonSlide_in{
animation: slideMe .7s ease-in;
}
#keyframes slideMe{
0%{
transform: skewX(53deg) translateX(-500px);
opacity: 0;
}
60%{
transform: translateX(0px);
}
62%{
transform: skewX(0deg) translateX(30px);
}
70%{
transform: skew(-20deg);
opacity: 1;
}
80%{
transform: skew(0deg) translate(0);
}
90%{
transform: skew(-5deg);
}
100%{
transform: skew(0deg);
}
}
See here to get started and you'd get the attention from the right community if you add more relevant tags such as HTML/CSS animation to your question
Related
On a WordPress website, in (section -> column -> inner section -> column -> heading) added marquee text by adding below HTML code in (section -> column)
& also added CSS Class in an inner section
sliding-text
& duplicate the inner section
in order to reverse the flow of the second line, I added CSS Class in a duplicate inner section
sliding-text reverse
But I also want to tilt the text a little too (-6deg) which only works for the first line so I also added
selector{ transform: rotate(-6deg)}
which leads to blank space below the footer and when I remove the (transform: rotate(-6deg)}) code blank space is also removed
<style>
body{
--speed: 15s;
}
.sliding-text .elementor-widget-wrap{
transform: rotate(-6deg);
}
.sliding-text .elementor-widget-wrap{
display: block !important;
}
.sliding-text .elementor-widget{
overflow: hidden;
width: 10000vw !important;
max-width: 10000vw !important;
}
.sliding-text .sliding .elementor-widget-container{
-webkit-animation: sliding var(--speed) linear infinite;
-moz-animation: sliding var(--speed) linear infinite;
-o-animation: sliding var(--speed) linear infinite;
animation: sliding var(--speed) linear infinite;
}
.sliding-text .elementor-widget-container{
float: left;
}
.sliding-text.reverse .elementor-widget-wrap{
transform: rotate(180deg);
}
.sliding-text.reverse .sliding .elementor-heading-title{
transform: scale(-1, -1);
}
#keyframe sliding{
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#-webkit-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#-moz-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#-o-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
#keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
var h = []
$('.sliding-text').each(function(){
h.push($(this).find('.elementor-widget').clone().html())
})
function init(){
$('.sliding-text').each(function(i){
var $this = $(this)
$this.find('.elementor-widget').removeClass('sliding')
var amount = Math.ceil($(window).width()/$(this).find('.elementor-widget-container').outerWidth(true)) + 1
$this.find('.elementor-widget').empty().addClass('sliding')
$this.find('.elementor-widget').html(h[i].repeat(amount))
})
}
init()
$(window).on('load resize', init)
})
</script>
Update:
Add the following CSS:
.elementor.elementor-1535 {
overflow: hidden;
}
it should fix the issue.
I'm fairly certain I'm noticing this right and I can't seem to find a proper solution anywhere. I have a CSS animation that's meant to loop infinitely, it already works but has a problem.
// CSS
#keyframes myanim {
0% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
25% { transform: translate(5px, 5px) rotate(1deg) skewX(1deg); }
50% { transform: translate(0, 0) rotate(0eg) skewX(0deg); }
75% { transform: translate(-5px, -5px) rotate(-1deg) skewX(-1deg); }
100% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
}
// JS
element.style.animation = "myanim " + mytimer + "s infinite";
Keyframe interpolation doesn't seem to work around the seams. Between points 0% and 100% there's no interpolation: When the animation just started or is approaching the end each iteration, it slows down / sets into place / speeds up instead of maintaining its constant rhythm like between the other keyframes. It it possible to tell the browser to interpret all keyframes in a circular manner for the loop to work as intended?
# MirceaKitsune is right you need to use the linear animation property.
I tried out the animation and it works, here is the fiddle:
.animated-heading {
animation: linear myanim 2s infinite;
}
#keyframes myanim {
0% {
transform: translate(0, 0) rotate(0deg) skewX(0deg);
}
12.5% {
transform: translate(2.5px, 2.5px) rotate(0.5deg) skewX(0.5deg);
}
25% {
transform: translate(5px, 5px) rotate(1deg) skewX(1deg);
}
37.5% {
transform: translate(2.5px, 2.5px) rotate(0.5deg) skewX(0.5deg);
}
50% {
transform: translate(0, 0) rotate(0eg) skewX(0deg);
}
62.5% {
transform: translate(-2.5px, -2.5px) rotate(-0.5deg) skewX(-0.5deg);
}
75% {
transform: translate(-5px, -5px) rotate(-1deg) skewX(-1deg);
}
87.5% {
transform: translate(-2.5px, -2.5px) rotate(-0.5deg) skewX(-0.5deg);
}
100% {
transform: translate(0, 0) rotate(0deg) skewX(0deg);
}
}
<h1 class="animated-heading">animated-heading</h1>
I have written keyframe animation on hover.
#keyframes juggle {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
span:hover{ animation: juggle 1s; }
The animation works fine but on mouse leave, it stops abruptly.
The expectation is to complete the animation even on mouse leave.
Is it possible to do it without jquery.
Hope this works
let section = document.getElementById('homeSection');
let elmnt = section.getElementsByClassName('classname');
for (let i = 0; i < elmnt.length; i++) {
elmnt[i].addEventListener('mouseenter', function () {
elmnt[i].classList.add('Juggle');
setTimeout(function(){
elmnt[i].classList.remove('Juggle')
},400)
})
}
I believe this is something you trying to do
span {
animation-name: juggle-out;
animation-duration: 1s;
animation-repeat-count: 1;
animation-fill-mode: forwards;
}
span:hover{
animation-name: juggle-in;
}
#keyframes juggle-in {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(15deg, 15deg) translate(0,0);}
}
#keyframes juggle-out {
0%{ transform: skew(15deg, 15deg) translate(0,10px);}
50%{ transform: skew(-15deg, -15deg) translate(0,-10px);}
100%{ transform: skew(0deg, 0deg) translate(0,0);}
}
you should use 2 animations for hover in and hover out
actually there is no hover in and hover out in CSS
It's just a state but the animation-fill-mode plays an important role
The support is not very good though ;)
I recommend adding class instead of this
Use the onmouseover function to add a class which contains the animation and manually remove the class using settimeout function.
When applying a CSS scale transform to an element, is it possible to set the 'from' value as the current scale?
For example, consider the following 2 CSS keyframes used to apply separate growing and shrinking animation transforms:
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
#-webkit-keyframes shrink
{
from { -webkit-transform: scale(1,1); }
to { -webkit-transform: scale(0,0); }
}
This will successfully scale the element it's applied to, but always from 0 to 1 (or vice-versa). If the shrink keyframe gets applied before the grow keyframe has finished, it has the effect of 'jumping' the scale to 0 before the transform begins.
You can see this effect in this jsFiddle showing CSS scale transform on mouseover
Notice that if you mouse over the black square and then quickly mouse out, the scale transform is not smooth.
What I'm essentially after is something like the following:
#-webkit-keyframes grow
{
from { -webkit-transform: CURRENT_SCALE; }
to { -webkit-transform: scale(1,1); }
}
Your animation makes the element go from 0% scale to 100% scale on hover, and from 100% to 0% scale on mouseOut.
I think in this case, the solution could be setting the basic scale of the element according to its start point :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: inline-block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
}
In this case, I would harldy recommend using pure CSS solution, using transition on :hover : http://jsfiddle.net/bg6aj/21/
You wont have any "jumping" effect :
#output
{
width: 200px;
height: 200px;
border-radius: 50%;
background: #FF0000;
display: block;
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: scale(0,0);
transition: all .2s;
-webkit-transition: all .2s;
}
#touchPad:hover + #output {
-ms-transform: scale(1,1);
transform: scale(1,1);
-webkit-transform: scale(1,1);
}
At this point, you'll have no more jumping effect.
Then : can we do something like :
#-webkit-keyframes grow
{
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
Answer : quite easy :
#-webkit-keyframes grow
{
0% { -webkit-transform: scale(1,1); }
50% { -webkit-transform: scale(0,0); }
100% { -webkit-transform: scale(1,1); }
}
Which means: take my element (as scale default is 100%), render it with 0% scale at 50% of the animation, and turn it back at 100%. Trying to set something like current_scale doesn't make sense.
Considering that, I'll definitely choose the Transition solution.
I have a control that I want to transition between two locations following a keyframe animation. Is there a way to use the same keyframe but in reverse? Also, is there a way to stop the animation, halfway and reverse it to the beginning?
Here is what I have now (and I want to combine the two keyframes:
#-webkit-keyframes explode {
0% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
}
33% {
-webkit-transform: scale(2.0) translate(100px, -150px);
}
67% {
-webkit-transform: scale(2.0) translate(200px, -250px);
}
100% {
-webkit-transform: scale(1.0) translate(-15px, -15px);
}
}
#-webkit-keyframes explodeBack {
0% {
-webkit-transform: scale(1.0) translate(-15px, -15px);
}
67% {
-webkit-transform: scale(2.0) translate(100px, -150px);
}
100% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
}
}
.leftArrowAnimateForward{
-webkit-animation-name: explode;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction:normal; /* Safari and Chrome */
-webkit-transform: scale(1.0) translate(-15px, -15px);
}
.leftArrowAnimateBackward{
-webkit-animation-name: explodeBack;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-direction:alternate;
-webkit-transform: scale(1.0) translate(0px, 0px);
}
It's hard to see what your trying to do without visually seeing what you have so far, but checkout animation-fill-mode.
This will allow your animation to stop on the last keyframe when set to forward, where at the moment I believe the keyframes go back to 0 when they are finished.
Have a play and let us know if your successful.
You can do the first thing you want to do if you combine animation-iteration-count: 2, with an animation-direction: alternate, and a animation-delay that is negative the length of your animation, you will get an animation to play in reverse exactly once. (It basically skips ahead to the reverse direction animation and starts playing there.)
You can't do the second thing you want to do with pure CSS animation, unless you define a second set of keyframes and toggle between the classes with JS (or hover or whatever)
I had the same problem, and use SCSS to generate two version of keyframe: normal and reverse.
https://github.com/lichunbin814/scss-utils#with-reverse-version
/* mixin */
#mixin keyframe-reverse( $name, $value) {
#keyframes #{$name}-rev {
#each $position,
$change in $value {
#{ 100 -$position}% {
#each $prop,
$val in $change {
#{$prop}: #{$val};
}
}
}
}
}
#mixin keyframe-normal( $name, $value) {
#keyframes #{$name} {
#each $position,
$change in $value {
#{$position}% {
#each $prop,
$val in $change {
#{$prop}: #{$val};
}
}
}
}
}
#mixin keyframe-gen( $name, $value, $genReverse) {
#include keyframe-normal( $name: $name, $value: $value);
#if ($genReverse) {
#include keyframe-reverse( $name: $name, $value: $value)
}
}
/* use */
#include keyframe-gen(
$name : "fadeIn" ,
$value : (
0: (
transform: scale(1),
opacity: 1
),
100: (
transform: scale(0),
opacity: 0
),
) ,
$genReverse : true
);
.menu {
animation-name: fadeIn-rev;
&.active {
animation-name: fadeIn;
}
}
// output css
/*
#keyframes fadeIn {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#keyframes fadeIn-rev {
100% {
transform: scale(1);
opacity: 1;
}
0% {
transform: scale(0);
opacity: 0;
}
}
*/