I am trying to create a fairly complex animation, where the content resizes into and out of a sidebar. Here's a quick Keynote prototype to explain what I'm after:
I started using flex-box and changing the flex-direction from row to column, as well as moving the container div into a "sidebar" on the left. However as it turns out, flex-direction is not animatable.
I then had a look at Alex Maccaw's Magic Move jQuery plugin, but I haven't been able to get anywhere with that. Same deal with using absolute positioning and animating the position.
Suggestions on an approach would be awesome.
I gave implementing this a shot using chained CSS animations. Here's the result: http://codepen.io/chrisdarroch/full/PNjpaG/
The crux of the solution is to create two sets of elements -- the nav items and the panels -- and then have animations for the base states and "active" states of each.
.nav-item {
animation: grow 1*$n ease-in;
animation-fill-mode: both;
&.active {
animation: fade 0s 1*$n, shrink 1*$n linear 3*$n;
animation-fill-mode: forwards;
}
}
.panel {
animation: grow 0*$n linear;
animation-fill-mode: both;
&.active {
animation: appear 0s linear 1*$n, slidein 1*$n ease-out 1*$n;
animation-fill-mode: both;
}
&.inactive {
animation: shrink 1*$n linear;
animation-fill-mode: both;
}
}
I've left out the implementations of each #keyframe animation for brevity; check the codepen for the full source.
The above is written using SCSS. The important thing to note is the $n variable. It's a value in seconds -- e.g., $n: 0.5s. It's used to coordinate the delay times and animation times for each stage of the animation.
My solution isn't 100% complete, but you might get an idea for how to chain animations to achieve your design.
Related
I'm using bxSlider, for each slide I have several HTML elements not just an image. I need to make the active slide bigger than the others, I already accomplished that using css zoom and transition, but when I move from the first slide to the second slide or from the second one to the first one, my transition is missing, I mean it only grows up but it doesn't do the animation, it's ok for all the other slides, does anyone know why this transition breaks?
This is my code
$('#sliderTrend').bxSlider({
slideWidth: 300,
minSlides: 1,
maxSlides: 3,
moveSlides: 1,
slideMargin: 3,
pager: false,
onSliderLoad: function () {
$('#sliderTrend>div:not(.bx-clone)').eq(1).addClass('active-slide');
$('#sliderTrend>div:not(.bx-clone)').eq(1).removeClass('inactive-slide');
},
onSlideBefore: function ($slideElement, oldIndex, newIndex) {
$('.slideC2').removeClass('active-slide');
$('.slideC2').addClass('inactive-slide');
$($slideElement).next().removeClass('inactive-slide');
$($slideElement).next().addClass('active-slide');
}
});
And these are my css classes
.active-slide {
zoom:100%;
margin-top:0px;
-moz-transition: zoom 150ms linear, margin-top 150ms linear;
-webkit-transition: zoom 150ms linear, margin-top 150ms linear;
-o-transition: zoom 150ms linear, margin-top 150ms linear;
transition: zoom 150ms linear, margin-top 150ms linear;
}
.inactive-slide {
zoom:75%;
margin-top:60px;
-moz-transition: zoom 150ms linear, margin-top 150ms linear;
-webkit-transition: zoom 150ms linear, margin-top 150ms linear;
-o-transition: zoom 150ms linear, margin-top 150ms linear;
transition: zoom 150ms linear, margin-top 150ms linear;
}
SO36637125
Why does bxslider breaks my transition between last and first slide?
It's hard to be certain with bxSlider, it's a very flexible yet temperamental plugin. I believe it was the callbacks were too much. Every slider was removing and adding 2 classes all at once, which isn't healthy behavior for a single thread language like JavaScript.
When dealing with active and inactive states, you should know that bxSlider has it's own .active class and the active slider is always going to be the slide on the left, not the middle. So taking that into account, this is whats been done:
Removed the .inactive-slide class. Instead of having two states to deal with, use an active state, and use the default state (which is how slides are normally).
Changed the .active-slide class to .act because it saves time typing less. Changed the CSS rules to:
.act {
transition-duration: 1s;
transition-timing-function: ease-in;
transform: scale(2);
transform-origin: center center;
z-index: 9999999;
}
Using z-index to overlap the slides to the right and left.
Notice there's no position property. That's because by default each slide is position: relative.
-For details on the animation properties, you can find it here.
Removed the onSliderLoad callback because it's flaky. I've used bxSlider for a couple of years, and I have only been able to get it to work a few times.
Changed the onSlideBefore callback to simplify it:
onSlideBefore: function($ele, from, to) {
var $act = $ele.next();
$act.addClass('act');
$act.siblings().removeClass('act');
}
The first line basically references the real active slider that is positioned on the left (i.e. $ele) and targets the next slide after the active slide so now the .act class will be assigned to the middle slide.
The second line .addClass('act') to the middle slide (i.e. $act).
The last line ensures that there's only one $act slide by using .siblings() to remove .act class from every slide except $act.
This works because there's only one class to handle.
README.md
PLUNKER
THE BACKGROUND
I'm working on a game in the style of Symon, where a user has to click elements in the right order as the computer generates a random sequence.
The elements are made out of SVG paths.
I wish to have a PENDING status on the game, where one of the elements is flashing repeatedly to draw user interaction
I'm working on IE11
THE ISSUE
I can't seem to get the Paths to animate a flashing color. I'm not very experienced with css animation but it seems like I've done everything right, and I've used many different examples to write this bit of code. It's ignoring the class pending that is meant to infinitely animate the path element.
#-webkit-keyframes flash {
0% {
fill: black;
}
100% {
fill: #ff7420;
}
}
#keyframes flash {
0% {
fill: black;
}
100% {
fill: #ff7420;
}
}
.game_tri.pending path {
transform:translatey(-100px);
animation-name: flash;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-name: flash;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
Full code on:
JSFIDDLE https://jsfiddle.net/tomshanan/oushonob/10/
BONUS QUESTION
I would love to know if anyone can tell why the game stops working once I remove active from the game_tri classes on line 9.
$(document).ready(function () {
$(".game_tri").attr("class", "game_tri active pending");
reset_game();
});
When you press the Next Round button, this should reinsert that class anyway, but the game does not respond if that class is removed initially. I don't understand why.
IE prior to IE Edge does not support CSS animations applied to SVG elements.
Simple (but not for me!) angularjs show/hide animation problem.
I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge".
First, the example: http://jsfiddle.net/adammontanaro/QErPe/1/
The challenge: can anyone make those images fade in and out over each other, rather than appearing below or above the currently shown image, then popping into place once the upper image's div is hidden?
The HTML:
<div>
<div data-ng-repeat="k in kitties" >
<img ng-src="{{k}}" ng-show="selectedImage==$index" ng-animate="{show:'animate-show', hide:'animate-hide'}" />
</div>
</div>
CSS:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
.animate-hide.animate-hide-active {
opacity:0;
}
I have been spinning my wheels on this for hours. I've seen scads of good posts demonstrating how to make a single image or div appear or disappear, but it all breaks down when I'm trying to simple cross-fade and replace. I've tried messing about with absolute/relative positioning, but to no avail.
Tried this with a switch, but wasn't able to use $index in the switch condition, so I could load my images at run-time. That is a big requirement here.
FYI - this is using angular 1.1.5
Thank you!!! Adam
You actually have it all correct! You're just missing a little CSS.
I fixed up your jsfiddle with the right stuff (a dash of position relative and absolute and a pinch of height) and it works like a charm.
The bulk of the new stuff is:
.container{
position: relative;
/* you have to add a height here if your container isn't otherwise set
becuse the absolutely positioned image divs won't calculate the height
for you */
height: 100px;
}
.image-repeat{
position: absolute;
top: 0;
left: 0;
}
With the classes applied in your HTML as needed.
Check it out: http://jsfiddle.net/QErPe/2/
Hope that helps!
This appears to actually be more of a CSS problem than an angular problem. You need to position the two divs on top of each other and make sure that they are actually occupying the same space at the same time. After that the cross-fading should be a piece of cake.
You can also do plain CSS3 on the .ng-hide class. For example:
div img {
border: medium none;
margin: 0;
padding: 0;
opacity: 1;
-webkit-transition: opacity 1s ease 0s;
-moz-transition: opacity 1s ease 0s;
-o-transition: opacity 1s ease 0s;
transition: opacity 1s ease 0s;
}
div img.ng-hide {
opacity: 0;
}
So now, when the ng-hide class is added, it will fade the opacity of the image. ngAnimate has it's place, but with simple CSS3 on the .ng-hide class, you can eliminate the frustrations.
First post on SO so far :)
I'm creating a parallax website combining css3 + javascript.
I followed this tutorial and I have to say that it gave me quite a grasp on the subject.
I was just wondering 2 things:
How do I translate the movement on the X axis?
Most Important: How can i combine users' scrolling with animations?
I've seen there is plenty of plugins out there, but I'd rather develop a solution myself without getting the code too heavy and complicated. Could you point me out some good resource, which will enlighten me on this technique?
Thank you guys!
EDITED on 17/09/12 at 14.14 (+1 GTM TIME)
In case someone would be interested, that should be the idea-code by which we would do the trick:
$(document).ready(function() {
$('section[data-type="example"]').scroll(function() {
// If the user scroll as much as we need, in this instance 750px
if (scrollTop() > '750px') {
// switch its class from ".animation" to ".animated"
$(".animation").toggleClass("animated");
}
});
});
CSS Classes would be:
.animation {
width: 300px;
height: 300px:
-webkit-transition: width 2s ease, height 2s ease;
-moz-transition: width 2s ease, height 2s ease;
-o-transition: width 2s ease, height 2s ease;
-ms-transition: width 2s ease, height 2s ease; transition: width 2s ease, height 2s ease; }
.animated { width: 400px; height: 400px; }
As we see, in ".animation" we would find the initial size and the animation, and in ".animated" we're going to print what we want to achieve.
This has been created thanks to the hints provided by #jfriend00. Unfortunately I havn't had the possibility to try it yet, so feel free to improve it. I wrote it here because it seems like someone is interested to this topic, and previously I posted it in a comment making it unreadable :)
Also, Jfriend00 told that .scrollTop() is a JQuery Method, not a plain function. How do you think it could be improved using plain JS?
Thanks in advance and sorry for my grammar error and for the noobness; I'm not English Native and I'm quite new with programming :)
From your comment:
Let's say that for example, I want to combine the users' scroll to a
transitional effect. So i.e. once the user has scrolled 750px, I want
an object to appear with a fade transition. How do I link the
scrolling factor with the animation?
This is one way to approach that specific example:
You would register an event listener for the scroll event.
In the scroll event handler, you would examine the current scroll position and decide if you wanted to take action (e.g. scrollTop is more than 750px).
The easiest way to trigger a CSS3 animation is to add a class name to your object. If the object has CSS assigned to it for that new class and the object is configured for CSS transitions on any of the properties that are changed by adding the class name to the object, then a CSS3 animation will start when the class is added.
Does anyone know if jQuery can handle an animation like:
rgba(0,0,0,0.2) → rgba(0,255,0,0.4)
I know there is a plugin to handle color animations, but this might be too modern?
Using CSS3 animation (no javascript)
You can also achieve the same effect using CSS3 animation. See below,
Step 1: Create a keyframe for your animation
#keyframes color_up {
from {
background-color: rgba(0,0,0,0.2);
}
to {
background-color: rgba(0,255,0,0.4);
}
}
Step 2: Use the animation rules.
animation-name: color_up;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
DEMO: http://jsfiddle.net/2Dbrj/3/
Using jQuery
jQuery now supports color animation with RGBA support as well. This actually animates from one color to other.
$(selector).animate({
backgroundColor: 'rgba(0,255,0,0.4)'
});
DEMO: http://jsfiddle.net/2Dbrj/2/
Uh, nevermind. Found an amazing modification to the jquery color plugin.
http://pioupioum.fr/sandbox/jquery-color/
use jquery UI for handle that, $(object).animate({color : 'rgba(0,0,0,.2)'},500)