I am attempting to work out how Invision's blog animation works. Specifically the zoom and shading on the title image pictured below when scrolling.
I would have thought this would be a CSS animation, but it doesn't appear in Chrome DevTools 'Animations' tab.
How does this animation work, and why doesn't it appear in the 'Animations' tab?
I had a quick look and here is what I came up with:
Let's start at the element .post-hero: this acts as a wrapper and has position: fixed to make the image more or less stay in place as we scroll.
Inside this there is the .hero-bg element which contains the background image itself. Note that this element has inline styles setting its background to none, but it has a data-bg attribute pointing to the background image itself. My guess is that on page load, some JavaScript is used to take this attribute and add the actual image.
The actual image is set as an <img> element, inside the .backstretch element inside .hero-bg. Now, the .backstretch element is where the animation itself happens: the opacity on this element changes as we scroll (to change the amount of shading), and there's a transform with 3D translation and scaling on the element changing as well. I guess this is done using JavaScript and a scroll event listener on the page.
Following .hero-bg, there is .hero-overlay which has a background color of #252b33 and an opacity of 0.35 to provide the shading effect on the image, together with the opacity of the actual image changing as the page is scrolled.
Edit: if you right click the .backstretch element and select "break on attribute modifications", then scroll, you'll find that the attributes of the element are modified in a file called CSSPlugin.min.js. Googling this seems to point to CSSPlugin being a plugin for the GSAP animation library... I don't have experience with it myself but I know it's popular, others can probably confirm whether or not this is what's used to do the animation. My guess is that the animation is done using GSAP CSSPlugin.
Related
I want all the components to blur out beneath the dialog box.
The dialog box should not get blurred out.
I've tried couple of ways but i didnt achieve the desired result.
Tried using filter with pseudo element, it did blur out the background behind dialog but didn't blur the text beneath the background.
*considering that all are different components.
<text/>
<background/> (it blurred its children and itself when i placed dialog inside it but the text didnt blur out).
<dialog/>
I tried changing the order of components. Didnt work.
I have a question regarding how filter actually works? Does it gets applied to only the element i apply it on and its children? Or can I use it as a curtain which will cover everything that is placed below in the stacking order? If so can i change the order of it using z-index to change its stacking order?
Any help will be appreciated. Thanks.
Have a react page and I want the SVG to change from black to white at the bottom of the page. Is there a way I can do this in react? The div container at the bottom of the page is not the parent div for the svg. The SVG is part of a stickied header
To detect if a user has reached the bottom of a page you can attach an event listener to the scroll event and compare a node's scrollHeight, scrollTop, and clientHeight properties. Read answers to a similar question to see exemplary implementations.
In reality this is not so much related to react as to the SVG itself.
My question would be, is your SVG included as an <img ...> tag or inline.
If it's an image tag you could use filters.
But if your SVG is a complex image with different colors, I would recommend you converting it to a component and using it as inline code.
That way you have way more control on what's happening with the SVG and then you just modify the path or shape's fill to fill: white.
As for when it gets to the bottom there are different options, you could check scroll position compared to viewport height or if you want something more specific you could use something like React Waypoint.
I have a scenario where I need to animate a div that has a children acting as background helpers. The children need to stay behind the div's background at all time. Without animation adding
z-index: -1 keeps them behind the tranparent background. However they do not stay behind the background when animating.
I have prepared a jsFiddle to show this:
-->https://jsfiddle.net/Jonathan002/gmv70wz7/6/
I know I can fix this by adding an extra div tag to be the background instead. I want to avoid this and direct the question on why the animation will alter my z-index values. Is there another property change happening when the div is animating?
How can I get the div to animate-in naturally (with no changes to dom) while retaining the z-index values?
Elements with transform and opacity don't obey regular z-index order.
That's because browsers create a separate layer to accelerate animations with transform, and per spec the opacity property requires special handling for compositing.
I read that some CSS transform properties do not trigger layout:
scale, rotate, position, opacity
This might be an obvious question, but does that mean they will always be applied independently regardless of other contents on the page?
For example, when I change a position property with translate(x,y) to move down a box, will it not push the contents below? I made a fiddle myself, and it seems that changing position is completely out of the dom flow.
Yes you're right, transform will not cause other elements to flow around it. This is why the div on top will not push the div on bottom down with it.
Check this link for more description.
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.
Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?
You need to define the z-index, as well as animate it.
This works in Firefox (8.0.1) and Webkit.
You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/
Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the .item and .item:hover)
The trick is to use transitions for the z-index property too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to use transition-delay so that the animation for moving the mouse out doesn't reset the z-index inmediately. Next, add a different value to transition-delay to the rule for :hover with a value of zero so that the z-index does update inmediately when the mouse goes into the item.
In short, .item has the transition for mouse out of the item and .item:hover the rules for when the mouse moves in.
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.