I would like to know a way to stop the swiperjs transition at the exact spot while it's transitioning.
What I currently have is a continuous autoplay loop combined with transition-timing-function : linear; on the swiper wrapper. This makes it look like it's constantly sliding one way in a fluent motion. On the background it is however always transitioning from slide to slide (and the transition-timing property makes it look fluent). What I would like to implement is when I hover the swiper, it stops at the exact position and when I leave the mouse it starts again. I have already implemented a fix to make it stop at the exact position using this link. When hovering out though, it moves too fast to the next translate3d point. This is because when starting it again, it takes the stopped position as the starting position of the transition, which is of different length so it moves at a different speed.
I've already gone as far as implementing an interval with the same speed count as the slider property to determine the progress of the animation from point to point so to from there be able to determine the transition-duration. For example when the slide transition is half way (in my case 3.5 seconds later as the speed I set is 7 seconds), I set the transition duration to 3500 on the swiper wrapper so that it moves at the same speed to the next point when hovering out.
This however is very buggy and relies on a continuous counter that starts upon loading the page (in mounted()), which isn't correct anymore after hovering a few times.
It's maybe a bit of a complex story but I would like to know if there are other ways of implementing this functionality, or how to somehow be able to know the current progression of the transition.
I'm building this in Nuxt 3 (vue.js framework) using the vue swiperjs library.
Thanks in advance
Related
Are there any in-browser optimizations for off-screen infinitely-running CSS animations (infinite animations which are applied to Elements that are present/displayed within the Document, just not in-view at a certain time)?
For the sake of a more straight-forward discussion, I will refer to CSS animations that involve only composition: using only transforms and/or opacity.
If we have a CSS animation, that has animation-timing-function: infinite;, how is it handled if the animated element is not actually on the screen / in-view?
There are some known scenarios regarding animations, which are irrelevant to this use case:
The animation will pause if the browser tab is pushed into the background. MDN
The animation is ignored if the element is removed from the Document, with something like display: none; (can't find a quotable source atm);
If the element is simply 'beyond the scroll', and the user can reach it at anytime, during the time the element is off-screen :
Does the animation run as normal, and has the same consumption, regardless if the element is visible or not?
Does it run as normal, but because it is not painted, the process itself becomes less expensive? - would make more sense.
Is the animation paused entirely? - would assume not, as the browser must know what the 'current progress' would have been at the moment the element needs to be painted again.
Or are there any other in-browser processes which optimize this, when these conditions are met?
Any documented answer, or any redirect to some resource, which could shed some light on the matter would be greatly appreciated.
This discussion would be relevant in determining if : manually removing infinite animations (for elements that are off-screen) would be a thing to consider, to achieve better performance.
TLDR
As long as the properties we want to animate do not trigger reflow/repaint, the animation can be optimized by the browser, which means better performance.
See off main thread animation.
I'd like to see if it's possible to animate the input[type="range"] element for example for short audio files so the progress seems less 'stuttery'
Here's a codepen with a short audio file that I've been using to try to come up with solutions
This question is specifically for input[type="range"], I do not want to use custom elements to build animated progress bars, I know that is possible but for this particular use case I'm stuck with the range element.
Any ideas?
As the input handle is a browser element it can not be animated. You would have to build a slider similar to the jQuerUI one and then animate the handle by updating its position on the range change input.
If you have longer audio files this will not happen (about 1s of audio per pixel)
Been googling this but no luck.
Upgraded to Unity 5, trying to get extremely simple 2d sprite animation working. Have 2 clips, walk and idle, which have transitions triggered by a bool. (Same issue with an integer.) This all works. Changing the bool causes the animator to show its now playing the walk animation, however in the actual scene its still showing the idle animation. I can flip the bool but now in scene is playing the walk animation during both states (though the animator shows its switching to the idle animation when its supposed to.)
Have tried turning it on and off again, building the animator from scratch, swapping in different clips, setting the transition legth to 0, no change. Also did all the static batch/root animation options people suggested for other issues with u5.
The issue was - two animators stacked on top of each other, one in a child object. Sorry for the useless question.
This is an amazing effect like PPT. Link is here :
http://udc.weibo.com/builder2011/data.html
I know single part was made by css3-animation effects but I don't know
1.how to play all these effects in a timeline?
2.how to make position change and local to whole effect?
Where can I find a tutorial like this?
Thanks cordially.
You could actually make the whole thing out of CSS3.
Keyframes is how you'd be able to time the different functions: http://www.leemunroe.com/css3-animations/
You would need something like an entire CSS3 powered page page, and then just place a window over that with overflow hidden. Use keyframe to move the page around but the window will only show a portion of it.
Just realized, that actually happens to be exactly what they did.
I want to display an animated arrow that goes back and forth (using flex 4). I'm using the following move effect :
<s:Move id="animateArrow" target="{arrow}" duration="750" repeatCount="0" repeatBehavior="reverse" yFrom="{arrow.y}" yTo="{arrow.y - 25}"/>
When needed, I then play the effect:
animateArrow.end();
animateArrow.play();
The animation works as intended but it seems to be a huge resource hog while playing. Any logic that happens while playing the animateArrow effect takes a very long time to load. Is there a better way of doing this?
Any effect will take resources. If it's taking more cpu than anticipated, you might want to look at the object you're moving, it's container, and the code it might affect.
Personally, I wouldn't use Adobe's animation library as they aren't very optimized. I would look at TweenMax instead.