I have a little chat widget, just a small square div that’s absolutely positioned vertically center in the browser window on page load. When the user scrolls down the page I want the widget to scroll with the page, I.e. disappear but once scrolling has stopped for the chat widget to transition back into vertical center.
I’ve searched high and low but can’t seem to find anything.
The nearest is this. Element transform transition between appearing 'relative' and 'fixed' not smooth
Any help greatly appreciated. I’d rather avoid jquery if poss and just use vanilla JS.
Cheers Richard
I think it will more simple if use animejs in case you want make it smooth.
let timeout;
window.addEventListener("scroll", (ev) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
anime({
targets: ".chat",
top: window.scrollY + window.innerHeight / 2,
easing: "easeOutCubic",
duration: 500
});
}, 100);
});
.chat {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: red;
}
.idk {
height: 400vh;
}
<script src="https://unpkg.com/animejs#3.2.1/lib/anime.min.js"></script>
<div class="chat">
hello
</div>
<div class="idk">
</div>
Related
How can I detect changes made by CSS3 animations or web animations (Element.animate)??
(Sorry for my bad English! this is my first question in Stackoverflow)
I know about MutationObserver, it responds only if I change the inline style or if I use requestAnimationFrame (since I change the inline style using it). But if I use CSS3 animations or Web animations, MutationObserver doesn't respond since they don't change the inline style.
See this... There are two divs here... div1, div2. div1's position will change when div2's position changes. But this happens only if I use requestAnimationFrame as I said before.
My question is how can I do this for css3 animations and web animations (Element.animate)?
const div1 = document.getElementById('div1');
const div2 = document.getElementById('div2');
/***** Add mutation observer to detect change *****/
const mutation = new MutationObserver(mutations => {
div1.style.left = div2.style.left;
});
mutation.observe(div2, {
attributes: true
});
/***** Animation with css *****/
function cssAnimation() {
div2.style.animation = 'anim 1.5s linear';
}
/***** Animation with web animations *****/
function webAnimation() {
div2.animate({
left: [0, '500px']
}, {
duration: 1500,
easing: 'linear'
});
}
/*****Animation with requestAnimationFrame ******/
// Current left position of div2
const left = 0;
function requestAnimation() {
// Increase left position 5px per keyframe
div2.style.left = `${(left += 5)}px`;
// Increase left position until it reaches to 500px
if (left < 500) {
requestAnimationFrame(requestAnimation);
}
}
function clearAnimations() {
left = 0;
div2.style.left = 0;
div2.style.animation = 'unset';
}
#keyframes anim {
from {
left: 0;
}
to {
left: 500px;
}
}
#div1 {
background: orange;
width: 100px;
height: 100px;
position: absolute;
top: 200px;
}
#div2 {
background: lightgreen;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
}
<div id="buttons">
<h3>Animate with...</h3>
<button onclick='cssAnimation()'>Css3</button>
<button onclick="requestAnimation()">request animation frame</button>
<button onclick="webAnimation()">web animations api</button>
<button id="clear" onclick="clearAnimations()">Clear</button>
</div>
<div id="div1">
Div1
</div>
<div id="div2">
div2
</div>
Both CSS Animations and Web Animations are based on the principle that you delegate the playback of the animation to the browser. That allows the browser to run the animation on a separate thread or process when possible, so that it runs smoothly. Updating style from JavaScript on each frame is best avoided where possible.
In your example, can you simply run the animation on both elements at the same time? Web Animations, at least, allows synchronizing the animations.
When the remainder of the Web Animations API is shipped, it will be much easier to duplicate animations from one element and apply them to another but for now you would need to call animate twice.
As others have pointed out, it is possible to observe significant moments in the playback of animations (when they start, finish, repeat etc.) but there is no event that runs on each frame. If you want to perform and action on each frame you need to use requestAnimationFrame.
If you pass div2 to getComputedStyle in requestAnimationFrame you will get the animated style for that frame which you can then apply to div1. (That is, reading div2.style.left will only give you the style specified via the style attribute but getComputedStyle(div2).left will give you the animated style including style changes from CSS animations and Web Animations). But, again, that will lead to poor performance and the two animations will not necessarily be synchronized since the CSS animation or Web animation may run on a different thread or process.
You can use requestAnimationFrame and window.getComputedStyle() to get current animated styles during the animation, note, included fill:"forward" at Element.animate() call
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
/***** Add mutation observer to detect change *****/
var mutation = new MutationObserver(function(mutations) {
div1.style.left = div2.style.left;
});
mutation.observe(div2, {
attributes: true
});
/***** Animation with css *****/
function cssAnimation() {
div2.style.animation = "anim 1.5s linear forwards";
let animationFrame;
function getCurrentStyles() {
console.log(window.getComputedStyle(div2).left);
animationFrame = requestAnimationFrame(getCurrentStyles)
}
getCurrentStyles();
div2.addEventListener("animationend", () => cancelAnimationFrame(animationFrame));
}
/***** Animation with web animations *****/
function webAnimation() {
let animationFrame;
function getCurrentStyles() {
console.log(window.getComputedStyle(div2).left);
animationFrame = requestAnimationFrame(getCurrentStyles)
}
getCurrentStyles();
div2.animate({
left: [0, "500px"]
}, {
duration: 1500,
fill: "forwards",
easing: "linear"
}).onfinish = function() {
cancelAnimationFrame(animationFrame);
console.log(window.getComputedStyle(div2).left);
};
}
/*****Animation with requestAnimationFrame ******/
//Current left position of div2
var left = 0;
function requestAnimation() {
//Increase left position 5px per keyframe
div2.style.left = `${(left += 5)}px`;
console.log(window.getComputedStyle(div2).left);
//Increase left position until it reaches to 500px
if (left < 500) {
requestAnimationFrame(requestAnimation);
}
}
function clearAnimations() {
left = 0;
div2.style.left = 0;
div2.style.animation = "unset";
}
#keyframes anim {
from {
left: 0;
}
to {
left: 500px;
}
}
#div1 {
background: orange;
width: 100px;
height: 100px;
position: absolute;
top: 200px;
}
#div2 {
background: lightgreen;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
}
<div id="buttons">
<h3>Animate with...</h3>
<button onclick='cssAnimation()'>Css3</button>
<button onclick="requestAnimation()">request animation frame</button>
<button onclick="webAnimation()">web animations api</button>
<button id="clear" onclick="clearAnimations()">Clear</button>
</div>
<div id="div1">
Div1
</div>
<div id="div2">
div2
</div>
For css animations, you have the animationstart and animationend events that could help you with what you are trying to achieve. However, there is no animationchange or animationupdate event, and it is this way, as far as I know, by design. Without events during the animation happening, it is possible to reach full hardware acceleration, with the interpolation computations done directly in the GPU. So, be aware that while you might be able to mimic what an animationchange event would do via animationstart, animationend and requestAnimationFrame, this is probably going to involve a performance penalty.
You're over complicating things. But to listen for animation changes you can listen on these events instead of the mutation observer.
animationstart //will fire has soon as the animation starts
animationiteration //will fire if the same animation is looped can be infinity or more then 2
animationend // will fire when the animations have ended
also please use translate instead of animating the left property.
I'm looking to append divs from the bottom. At a certain point, the vertical scroll should kick in so you can view divs that were appended earlier on. I'm trying to replicate a typical chat application and how messages come from the bottom. Here's the codepen...
http://codepen.io/jareko999/pen/yaQmgk
Before I put the code, I'll explain a couple of workarounds I've tried thus far. The pen currently has the container absolutely positioned with a bottom of 0. The problem, which is a pain, is that once the height goes beyond the height of the viewport, it won't scroll. This is the problem with the absolute positioning workaround.
Another workaround I've tried is doing a height of 100vh and display of flex with justify-content flex-end so the columns start at the bottom. The problem with this is that the scroll will always start from the top. I believe the solution is a scroll function that I've created to scroll to the bottom every time a new div is added. Would this be the best method? The key here is that I want to be able to scroll up to the older divs but have the newer divs start from the bottom. Think of a typical chat application like slack or messages or similar.
HTML
<button onclick="myFunction()">Hey here's a box</button>
<div id="container">
</div>
CSS
body {
margin: 0;
width: 100%;
}
button {
position: fixed;
z-index: 10;
}
#container {
position: absolute;
bottom: 0;
width: 100%;
}
#box {
width: 100%;
background: tomato;
opacity: 0;
height: 100px;
transition: .2s;
}
#box:last-child {
opacity: 1;
height: 0;
animation: .2s height linear forwards;
}
#keyframes height {
to {
height: 100px;
}
}
#box:nth-last-child(2) {
opacity: .8;
}
#box:nth-last-child(3) {
opacity: .6;
}
#box:nth-last-child(4) {
opacity: .4;
}
#box:nth-last-child(5) {
opacity: .2;
}
JS
function myFunction() {
var box = document.createElement("div");
box.setAttribute("id", "box");
var container = document.getElementById('container');
container.appendChild(box);
// window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}
Is there a better solution than the function I've created to scroll to the bottom? Much appreciated.
Ok, so after messing around with some JS, I figured it out. I love when that happens...
Here's the codepen...
http://codepen.io/jareko999/pen/yaQmgk
I created a setInterval function for scrolling to the bottom.
var myVar = setInterval(function(){
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
}, .1);
However, since this interval runs every .1 seconds, I need to kill it in order to scroll around the divs above (like old chat messages), but I want the animation (of the new div coming in) to finish. So, I created a setTimeout function to kill the setInterval function at 200 ms.
setTimeout(function(){
clearInterval(myVar);
}, 200);
I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.
html:
<div id="navbar_header">
some link
</div>
<div id="main_content">
<p>Some content...</p>
</div>
<div id="navbar_footer">
some link
</div>
css:
#navbar_header {
background: #22313F;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
#navbar_footer {
background: #22313F;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}
Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:
$(document).ready(function(){
var lastTopPosition = 0;
$(window).scroll(function(){
var topPosition = $(window).scrollTop();
if (topPosition > lastTopPosition ){
$("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
} else {
$("#navbar_header").stop(true).animate({'top':'0px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
}
lastTopPosition = topPosition;
}
});
This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)
If I understood this right, something along the lines of:
$("#main_content").scroll(function(){
$('#navbar_header').show(300);
$('#navbar_footer').show(300);
});
Where show(300) will basically do a 300ms showing animation of your divs.
I am using some jquery to slide a legend in and out next to a map. I have used this code before but now I am using it within a responsive framework so I am changing some things to percentages rather than pixels widths. Perhaps I have some things out of order in my script but the div containing the legend drops below the map while it animates back and forth.
Here's my script:
$(".hideLegendRight").click(function () {
$(this).hide();
$(".label").hide();
$(".zoomTo").hide();
$(".legendMenu").hide();
$("#legendMap").animate({
width: "0%"
}, 500);
$(".buttonsMap").animate({
left: "25"
}, 500);
$("#wrapperMap").animate({
width: "100%"
}, 500, function () {
$(".showLegendRight").show();
});
google.maps.event.trigger(map, 'resize');
});
$(".showLegendRight").click(function () {
$(this).hide();
$(".buttonsMap").animate({
left: "0"
}, 500);
$("#legendMap").animate({
width: "35%"
}, 500);
$("#wrapperMap").animate({
width: "65%"
}, 500, function () {
$(".hideLegendRight").show();
$(".legendMenu").show();
$(".zoomTo").show();
$(".label").show();
});
google.maps.event.trigger(map, 'resize');
});
And here's my jsfiddle
You are seeing this issue because of how html styling works. You won't fix this problem by merely changing some script value. Quite literally your issue is that as your #wrapperMap div grows, it doesn't leave enough room for you #legendMap div to be displayed. Not only that, but everything is automatically defaulting to a relative position. So when the #wrapperMap grows it displaces the #legendMap so that it is below it. Here's a good StackOverflow answer that outlines your problem.
Make div stay in top of parent
Pretty much you want to make the parent relative and the child absolute with a couple nuances to make it show up in the right spot. Here's the css I either added or altered to fix your problem.
.grid_12 {
position: relative;
}
#legendMap {
position: absolute;
top: 0px;
right: 0px;
width: 35%;
float:right;
height:458px;
background-color:#404040;
z-index: -1;
margin-bottom:20px;
overflow:hidden;
}
fixed JSfiddle
I'm trying to replicate the effect on this website in the portfolio section where it slides a panel in the full size of the viewport and then slides it out when you click close.
Example here: http://alwayscreative.net/#portfolio
Here's my current markup:
<section class="panel" id="portfolio">
<section class="content">
<h1>What are you <strong>interested</strong> in?</h1>
<a class="btn-portfolio" id="btn-commercial" href="#">Commercial</a>
<a class="btn-portfolio" id="btn-residential" href="#">Residential</a>
</section>
</section>
The .panel section is 100% height and width of the viewport and I'd like 2 different panels to be able to slide in — one for #btn-commercial and one for #btn-residential.
Any ideas how to make this happen?
If it helps any, here's my site so far: http://www.freshbrand.ca/testlink/top40/#portfolio
Here's how you would do it with JQuery but clearly you can do it in normal javascript if you prefer. Set up the panels with position absolute in your css:
.panel {
position: absolute;
top: 0;
height: 100%;
border-width: 0;
margin: 0;
}
.panel inactive{
display: none;
}
.panel active {
display: block;
left: 0;
width: 100%;
height: 100%;
}
in your javascript (after the dom has loaded) get the screen dimensions and set the positions of the inactive elements to just off the right hand edge of the screen:
$('.panel').css('width', screen.innerWidth);
var setup = function() {
$('.portfolio-panel.inactive').css('left', window.innerWidth);
$('.portfolio-panel.active').css('left', 0);
}
setup();
When you wish to slide a panel in from the right, pass its id to the following function:
var slideIn = function(panelId) {
$('#' + panelId).animate({
left: 0
}, 400, function () { // animates the #left property from the screen width down to zero (i.e. slide it in from the right hand edge of the screen)
// tidy up
$('.portfolio-panel.active').removeClass('active').addClass('inactive');
$('#'+panelId).removeClass('inactive').addClass('active');
setup();
});
};
EDIT: The event handler would look something like this:
$('.btn-portfolio').click(function() {
slideIn($(this).attr('id').substr(4)); // extract the panel name from the id and pass it into slideIn
});
The only remaining issue is to eliminate the horizontal scroll bar you will probably see during the animation. Just add overflow-x: hidden; to the element to which the scroll bar belongs (probably body, but it depends on how you've structured and styled the rest of your site)
This is basically a single page website, a lot of jQuery plugins are available for the same.
I personally prefer
http://joelb.me/scrollpath/
Check out it's demo and download the code from github's link
https://github.com/JoelBesada/scrollpath
Hope this helps