I have a CSS3 position transition that makes a dive slide from one side to another when called by a JavaScript function (the function changes the value of style element "left"). This works great, but the CSS-transition also reacts to when a window is zoomed or resized, causing the div to appear in a faulty position for a second, before it transitions back to place.
Is there any way to only make it react only to my function, or do I have to do it the old fashion way, making a JavaScript transition?
Edit: You can find my code here: http://jsfiddle.net/PURFp/
You can add the transition property right before you start the animation and remove it after the animation has ended. Here's a demo : http://jsfiddle.net/PURFp/2/.
Related
Here's some more details - due to some weird restrictions with the YouTube API, I am forced to push a container off the page to give the impression of hiding the container.
I achieve this by using this class:
.my_hide{
margin-left:-9999px;
position:fixed !important;
}
And by using the JQuery methods $("player-list_container").removeClass("my_hide") and $("player-list_container").addClass("my_hide") to control the toggling.
However, the toggling looks jaunty, and the container jumps up once the class is removed. I want to be able to transition smoothly from one state to the other, and am at a loss for how to do it.
This behaviour can be demonstrated here
Add a video by typing in and searching for anything, and then hit the Play button located below. You should observe the behaviour described.
Iam assuming you 'are not able to'/'not want to' manually hide the container but want to change its position so that it is outside the boundaries of the page and it looks hidden.
In that case changing the position property will definitely give you a jumpy instead of a smooth effect since this affects the whole layout of the page (Read more). What you can instead do is change its position using CSS3 animation's translate property.
Here's a demo I've coded which does exactly what you want.
http://codepen.io/anon/pen/EgcIi
The "Click me" button toggles between taking the container off and on the page and it does it smoothly. You can also adjust the time which it takes to change the position of container. (As of now its 500ms)
I want it to look like the container is fading in in position meaning I would have to get the container to that position before using any type of animation function.
Then, don't throw the element way off the page with CSS. Leave it where it is, and hide it with .hide(). Then fade it in with .fadeIn().
You'll need to manually size the container, as it won't expand to contain a hidden element.
On my screen it just popped up. Im not 100% sure what type of pop in effect you want but that said, check out http://api.jquery.com/animate/
i was going to code up an example but that page has a bunch!
good luck!
PS: scroll down for all the visual animation examples.
Here is some sample code:
$('#myBtn').click(function(){
$( '.ytv' ).fadeTo( "fast", Math.random() );
//add animation code here;
});
check out a rough fiddle.
edit: heres a rough example: http://jsfiddle.net/somdow/Lef9n/2/
just click the red area to the right of the video
Animate function in jQuery wll help you
i'm applying a css keyframe animation to an element. i only specify one keyframe (100%) for a simple transform. while the animation is running i pause using the animation playstate and apply a class specifying a different keyframe animation. what i want is that the second animation starts where the first animation was interrupted but instead the element jumps back to its start position and is animated from there. i played a bit with animation-fill-mode but it doesnt change which i think is because the animation was interrupted before it reached 100%. any ideas what i could do to make this work?
I was actually brainstorming this a couple of days ago. You are correct in assuming that your issue is the result of your animation not reaching 100%. The problem is that there is no way to simply select the values indicating how far your animation made it in the animation. From this, you have the following three options (note: I have not tested all of them):
You can break the animation into defined steps (10% intervals, 20% intervals, etc.) and then only pause it on one of the steps. This is probably the safest solution, but you will likely have to base it on time (i.e., setInterval, etc. - Yuck!)
You can calculate (also based on time - Double Yuck!) where the element is, using JavaScript, and set up a new keyframe accordingly
You can try to look at the element's properties at the time that the animation is paused (I have not tried this and I highly doubt it will work)
http://jsfiddle.net/gxve9/1/
Animations don't actually change the css, they just animate it and then put it back where it was. You just have to use javascript to save the css using something like
var prevWidth = $("div").css("width");
and then after pausing the animation, set it with
$("div").css("width",prevWidth);.
That way it stays permanently set where the first animation put it.
You have a few options here:
Append the new animation to the list with a different play state. This is not very scalable but works for some cases.
Capture the animated value using getComputedStyle and apply it yourself. The disadvantage of this is that for transform, the value returned by getComputedStyle is converted to a matrix() value so the interpolation for rotate animations will sometimes behave differently.
Use commitStyles() to do it for you. The trouble with this is browser support. It should work in the latest Firefox and Safari, and next version of Chrome (works for me in Canary).
You can see each approach demonstrated here: https://jsfiddle.net/birtles/8bv5of6n/14/
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.
I'm working on a site for myself, and I'm using a custom horizontal scroller done with Mootools that I got from another site (and got their permission to use). While I've managed to get the scroller to function the way I want to, there are two issues I'm looking to fixed and don't have the know-how myself to figure out.
I've set up a simple demo page here.
You can scroll with your mousewheel/trackpad up and down or left and right, you can grab the scroller and drag it, and you can click anywhere along the line to jump directly. So all the functionality is okay. My issues are:
If you scroll to the middle (or anywhere except the start position), then resize your browser window, the scroller handle will jump back to the start/left even though the contents stays put. If you then start scrolling again the contents will jump back to align with the scroller handle's position. Ideally the handle would stay put when the window is resized, but I can't figure out how to do this on my own.
At the end/right of the page I'd like to have a back button that smoothly scrolls you back to the start/"top". The best I've managed is what you see there now, where the contents scrolls back smoothly, while the scroller simply jumps back to it's first position. While I could work around that by simply have it jump straight back to the start, it would certainly look much nicer if the scroller would smoothly scroll its way back like the contents does.
Any help with this would be greatly appreciated!
Your first issue is occurring because positionIt() is being called every time the window resizes. Looking into that function, you can see that the bottomSlider is being initialized every time. I would break positionIt() into a initializing function and positioning function, and ensure that only the positioning function is called when the window resizes.
The second issue could probably be fixed by creating a separate step() function for the bottomSlider and calling that within onChange, rather than using an inline anonymous function. You could then create a timer or tween that calls step() to move the scrollbar back to its original position (and subsequently move the viewport in accordance with it.)
Hopefully that makes some sense!
If I create a function with jQuery that adds an empty div, performs some animation inside the blank space created by the div, then removes the div, the browser never makes room for the empty div (height and width are set).
If I don't remove the empty div in my function, then the browser will create the needed space and everything works correctly. However, I really need the blank space created by the div to be removed when the animation is complete.
Is there a way to queue up the div removall so that the browser will show the desired behavior?
Some jQuery effects have callbacks, which will are run after the effect, for example:
$('#someDiv').slideDown(100, function() {
$(this).remove();
});
By doing a Google search on jQuery and setTimeout, I found an example which sent me down a different track. The problem occurs, I think, because the div manipulation is on a separate selector from the actual animation. This causes the div to be created and removed even while the animation is still occuring. By adding a simple animate statement to the div which delays the removal until after the main animation completes, then I can achieve the desired effect.
Doesn't it work if you use a setTimeout ?-)
The problem is that the DOM isn't updated until your function ends. So using setTimeout will cause the dom to update and 100ms later the rest of your function can continue. If you don't want the new div to be seen, I'd set the position to absolute and the top to something like -5000. It will have dimensions etc, just wont' be visible. You can also set the visibility (in css) to hidden just incase you are worried it will show up on screen.