I'm writing a "3D navigation" where moving the mouse cursor subtlely rotates the contents of the screen. When something is clicked I want it to zoom (scale).
The rotation is achieved with transform property, and evoked when the cursor moves. This part works fine!
Now I want the scale to be animated at 500ms. But if I set this transition speed, it wrecks the nice smoothness of the cursor move property.
I tried solving with JavaScirpt, but the problem is that if I start working the "scale" segment alone, it overwrites the rotation property. CSS doesn't remember that I've set the rotation at some point, if I set transform again, during animation, with only the scale.
I have a work-around, but I don't think it's very nice and I suspect it will difficult to understand and refactor it in the future.
So like I can separate the timing for "background" and "color", is there a way to "go deeper", and also separate for the different transform properties?
Thanks in advance!
Related
I have a series of objects all of which have different scaled value using the css 3 transform tag. My problem is that when I try to attach an animation on hover (in this case its a rotation) they return to their original/unscaled value i.e they all have the same size.
I am using a common keyframe animation for all the objects to save up on coding time and neatness.
Any hero has a solution?
Make sure that :
the keyframe does not have the scale property that set the scale rate back to 0.
You didnt miss a ; at the end of a line, and you didnt do any syntax mistake.
try to share your css code so we can find the problem.
Basically, I have an element with a given width and height. When I add the "zoomed" class to it, I want it to change its size and position. I got it working with a proper webkit-animation (keyframed).
The problem is that when I remove the "zoomed" class, it suddenly reverts to the original size and position, and I'd love to do it with an animation.
Note that this is an example that could probably be solved with the use of the transition property, but in my real world case, it can't because I have a fairly complex keyframed animation.
So, how to have a basic state, animate to a new state when a class is added and reverse the animation to the basic state when the class is removed? Thanks.
The problem that you have wouldn't be solved with a transition.
What makes a transition work in both ways is that usually you set it in a class, and change properties in an state. This way, you have the transition set all the time, and only change the properties.
If you set the transition in the changed state only, once you remove it, the transition is no longer in the element, and so the change is immediate.
If adding the class is really the procedure that you want (for some other reason), the you have 3 posibilities
As suggested in the comment, in the change to the basic state you should add another class that has as only property the animation playing in reverse.
In the base element set the animation in reverse, in the added class set the animation.
Go to an elaborate system where you really remove the class in the animation end event, and what you do triggers that (way too complicated I think)
There is no way that the element is animated - transitioned - whatever once you remove that from the element
I'm having difficulty rotating an item a full 360 degrees in webkit using CSS transitions.
I've created a JS Fiddle to show what I'm trying to do: http://jsfiddle.net/russelluresti/PnTk8/2/
The transition should happen in 2 steps. First, the item should just rotate along the Y axis for a 1/2 turn. Then, once that transition is complete, it should rotate the opposite direction a full turn and scale down to 1/2 the original size. The problem I'm having is that the second transition is only scaling and not rotating, even though rotate values of rotateY(-360deg) and rotateY(0deg) should cause a full rotation.
This is just a proof-of-concept, so I'm only targeting webkit at the moment. However, I'd like to stick with transitions, and not keyframe animations. Any ideas?
In my knowledge, rotate from rotateY(-180deg) to rotateY(-360deg) would be as the same state as rotateY(0). Let's put it this way: imagine you flip a piece of paper twice in the same direction, would be totally the same state as the very beginning. As a result, the browser take it for 'no changes at all', therefore no transition upon the rotation.
another example would make this even clearer:
given deg. set to your case, rotateY(-90deg) => rotateY(-300deg) => rotateY(60deg) would work just the same, the second transition won't start. Becuz relative to the original state: rotateY(0), rotateY(-300deg) is just at the same state as rotateY(60deg).
What's the "right" way to expand the hover area of a certain component? In other words, how do I turn a component's state to hovered when my mouse pointer is closer than a certain distance X? I can think of a bunch of ways to do this, but they all seem hacks and I'm curious if anyone has strong feelings about a better designed way to do something like this.
And since we're at it, how would you make alpha of the component proportional to the mouse cursor distance from the component, so that the component fades in as we approach it? Again I can think of various hacks, but not sure what a clean approach would be.
thank you!
f
I would suggest centering the component inside a Canvas that is sized to pad the target component by the desired amount. You can then listen to the Canvas for mouseover and trigger your logic to enable hover. That seems to be the cleanest approach to me -- alternately you could listen for mousemove on the Stage and constantly check the mouse distance to the target component... but that seems messy.
As for alpha I would take a similar approach. Let the outer edge of the alpha container represent the minimum alpha and the inner edge represent the maximum alpha. How you scale in between (linear, etc..) is up to you.
I want to introduce a canvas component by zooming from a height & width of 0.0 to 1.0. I want the component to be invisible until the zoom begins and then for it to be visible when it begins zooming.
However, if I bind the zoom effect to a showEffect trigger on the component and then make the component visible, it will first show the component at its regular size for a split second before it begins the zoom effect. If I combine the zoom effect and setting the component visible together in a parallel, it will also flash the component at its regular size for a split second before the zoom. If I make the component visible when the zoom effect starts through its effectStart event, it still does it. Does anyone know how to make it visible only when the zoom effect begins so that it doesn't flash the component at its regular size for a split second before the zoom effect?
It'd be easier to provide suggestions if you were giving us code.
That said, the reason the component "Flashes" at full size before the effect starts probably relates to the positioning and sizing of the component before the effect starts. So, before you start the effect just set the height and width of the component to the zoomHeightFrom and zoomWidthFrom of the effect.
These things can be tricky to debug, though. Especially without code.
Found an easy solution: Put the zoom effect and set property action, which sets the component to visible, in a Parallel together but add a nominal start delay of 50 ms to the set property action.