While animating a page transition I noticed a weird behavior.
On mobile... when I start a page from translate(%100,0); it starts from its beginning position and animates out of view to the left instead of starting from outside of view to the left... and animating to the center of view.
You can see the issue live at dbz-test.myshopify.com.
The animation works perfectly on desktop... but try it from your phone.
Related
I'm currently working on a landing page using React and Next and what I'm trying to achieve is
I have a hero where everytime the page load for the first time it shows only a logo in the center and this logo slowly slides up and while the logo is sliding up I have another animation where I see one text slides from left to right and another text slides to right to left, all of this stays in the middle and the logo stays at the top.. after I think 2s I have another animation that is more like a blink when this blink happens it appears some text and a button and after 1s happens another blink that make the logo dissapears, I'm trying to figure out how to do all of this with sass, sorry if it's a little bit confusing😅 this is my first time doing this type of animations and I'm trying to figure out how to show only the logo everytime the page loads for the first time.
Here is a codepen with what I'm trying to achieve, thanks
[Codepen](https://codepen.io/Alissonicole/pen/YzvPZzg?editors=1100).
I have been facing a very irritating error with firefox over the last day.
I have replicated the bug here: http://jsfiddle.net/kmz9tv77/1/
There is one container div, with two children, bgpanel a red background div with the text background, and fgpanel a purple background div with the text foreground, and an opacity of 0.5.
The container div has a perspective value of 1px, the bgpanel is translateZ(-1px) and then scaled by 2, to keep the perceived size the same.
The fgpanel is as it is.
The idea is to generate a parallax effect while scrolling. The bgpanel div will move slower, while fgpanel will move at the same speed.
On chrome this works perfectly. On Safari too. On firefox, halfway down the scroll the layer farther away, bgpanel, suddenly decides to vanish. If I force firefox to repaint by going to the element inspector and switching the top property on and off on bgpanel, things work again for a while, but again bgpanel goes off if you scroll down beyond a point.
What's happening?! Am I missing something fundamental here? Help!
I have a simple animation (via CSS) which brings my content from the bottom of the screen to the top. Margins are set to auto. My problem is that when this animation is coming up,on the right side it appears a scrollbar which persist till the end of the animation. I want to disable this scrollbar till the end of animation because my elements moves to the right for a few pixels after scrollbar disappers (because my margins are set to auto – and i want them to be so).
Thanks for any info!
set body{overflow:hidden;} before the animation and remove it after the animation ends.
I created an animation for an div, so it pulses when the mouse hovers the div. But when I leave the div with the mouse, the div snaps back into the original state. Is there possibility to transform it smoothly back to the origin?
http://jsfiddle.net/ninerian/npN89/
I tried a transition of padding and font-size, but it looks not so smooth and the origin isn't centered like with transform.
What you want is -webkit-animation-fill-mode: forwards; I coudln't get it to work in jsfiddle for some reason, but that is supposed to allow the animation to complete after being stopped if it is stopped in the middle of the animation.
I've started playing around with transitions and have come up against quite a big problem. I have a set of divs that transition from 0 to 1 opacity when the user hovers over them, the problem is that when the fixed div that contains my site's navigation is on top of them they overlap it - meaning the user cant click on the navigation, as shown on the right of the image below:
When the transition finishes it goes back to its normal state (like on the left of that image) but as soon as the mouse moves the whole thing starts again so its impossible to click on the navigation. Is there any solution to this? Or would a jQuery alternative be the answer?
I can post the code Im using if it's of any use.
Set your header z-index. That should solve the problem.
header{
z-index:999;
}