Develop Reference

How to do animation on scroll in js on both ways (top/bottom)

I created a little aniamtion in JS by using bounding client. Once I scroll down until the text/content appears, I change its opacity to 1 by applying ".active" from CSS. And when I scroll up above the element again, opacity changes back to 0 (because ".active" gets taken away).
The problem is I want to make the same thing happen when I scroll up to the content element from below. Once the user goes below the content element, opacity should go to 0, then when they scroll back up (so the content element is again in view), opacity should go to 1. So it makes the animation work in both directions, something like on scrollrevealjs's front page.
document.addEventListener('scroll',()=>{
let content = document.querySelector('.text');
let contentPositiontop = content.getBoundingClientRect().top;
let screenPosition = window.innerHeight ;
if (contentPositiontop < screenPosition){
content.classList.add('active');
}
else{
content.classList.remove('active');
}
});
.text{
transform: translateX(700px) translateY(1000px);
font-family: Inter;
font-weight: 800;
font-size: 40px;
opacity: 0;
transition: all 2s ease;
position: absolute;
}
.active{
opacity: 1;
}

You just need to check the height of the bottom of the content element as well as the top.
(For the top, we needed to add in the screen height (window.innerHeight) because we were comparing its position to the bottom of the screen. We don't need this for the bottom because we are comparing its position to the top of the screen, which has a vertical position of 0.)
When both the bottom and the top are in range, we show the content element.
(If the content element's height were greater than the height of the screen for some reason, you would have to choose values between 0 and window.innerHeight to use to trigger the transition.)
document.addEventListener('scroll',() => {
const
content = document.querySelector('.text'),
top = content.getBoundingClientRect().top,
bottom = content.getBoundingClientRect().bottom;
if (top < innerHeight && bottom > 0){
content.classList.add('active');
}
else{
content.classList.remove('active');
}
});
.spacer{ height: 104vh; }
.text{ height: 100vh; background: blue; transform: translateX(20px); opacity: 0; transition: all 2s ease; }
.active{ opacity: 1; }
<div class="spacer"> </div>
<div class="text"></div>
<div class="spacer"> </div>
.

CSS Animation - Steps - to Animate Bookmark Star

I have the following code:
let animation = document.getElementById('fave');
animation.addEventListener('click', function() {
$(animation).toggleClass('animate');
});
.fave {
width: 70px;
height: 50px;
position: relative;
overflow: hidden;
}
.fave img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
animation: test_animate_reverse 1s steps(55);
}
.fave .animate {
animation: test_animate 1s steps(55);
left: -3519px;
}
#keyframes test_animate {
from {left: 0;}
to {left: -3519px;}
}
#keyframes test_animate_reverse {
from {left: -3519px;}
to {left: 0;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="fave"><img src="https://cssanimation.rocks/images/posts/steps/twitter_fave_rectangle.png" id="fave"></section>
The target image is: https://cssanimation.rocks/images/posts/steps/twitter_fave_rectangle.png (albeit already modified so that all the images are positioned horizontally).
The result is quite satisfactory already. However, I have concerns:
As can probably be seen, my star always animates from the last frame of said image to the first frame whenever I refresh the browser window. If possible, I'd like it to not do that when I first refresh the window and only reverse-animate when I toggle it from 'active' to 'not active'.
I feel like using two #keyframes just to reverse an animation that is exactly the same is kind of inefficient. Is there a way to achieve the same effect without having to make an additional reverse #keyframes?
Is there a way for me to achieve the same effect without specifying the size of section explicitly when said section does not have a parent?
When I click quickly a few times on said image, if possible, I'd like it to finish its current animation first before proceeding to the next one. With my code now, preceding animations are immediately ended when a new animation is run.
EDIT
I've tried to not use the reverse #keyframes by changing to the following:
.fave img {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
animation: test_animate .7s steps(55);
animation-direction: reverse;
}
What happened is the animation completely vanished.

Why not use the code from the actual tutorial where you got the image. It uses transition rather than animation and seems neater.
It will automatically reverse the animation too with the transition applied to the element.
You can set a disabled flag and use setTimeout() to prevent multiple clicks before the animation has finished.
var click_disabled = false;
$('.fave').click(function() {
if (click_disabled) {
return; // do nothing
}
$(this).toggleClass('faved');
// Set correct aria-label
var label = $(this).attr('aria-label') == 'Favourite' ? 'Unfavourite' : 'Favourite';
$(this).attr('aria-label',label);
click_disabled = true;
// Timeout value should match transition length
setTimeout(function(){
click_disabled = false;
}, 1000);
});
.fave {
background: none;
border: 0;
padding: 0;
width: 70px;
height: 45px;
background: url(https://res.cloudinary.com/shanomurphy/image/upload/v1547543273/fave_ltre0q.png) no-repeat;
background-position: 0 0;
transition: background 1s steps(55);
outline: 0;
cursor: pointer;
}
.fave.faved {
background-position: -3519px 0;
}
<button class="fave" aria-label="Favourite"></button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Background color changing it's height onload

I've been reading for couple hours from now, and probably I have problem even with asking right question.
What I would like to achieve is: changing the main page background height from 0 to 100% in let's say 10s, so after 1 second background color got 10% page height, after 2 seconds 20% of page height and so on. It should start to change after page load.
It could be jquery, css, or some external library, just want it to work.

Something like this?
body {
width: 100vw;
height: 100vh;
position: relative;
&::before {
content: "";
display: block;
position: fixed;
width: 100%;
background: red;
height: 0;
z-index: 0;
animation-fill-mode: forwards;
animation-name: expand;
animation-duration: 10s;
}
}
#keyframes expand {
from { height: 0; }
to { height: 100%; }
}
So basically, you add another layer underneath your content, which animates to the height of your page for 10s (the animation-duration)
Working JSFiddle: https://jsfiddle.net/y4kpcmjc/2/

From the official jquery docs
The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.
Here is the example
<img id="image" src="..." />
...
<script>
$(document).ready(function() {
$('#image').css('height', '0');
$('#image').animate({
height: "100%"
}, 10000, function() {
//Finished loading
});
})
</script>

How can I get only the specific H3 I am hovering over to show and not all of them?

I am trying to have text appear over each image as the user hovers over that specific image. I don't want all of the text for every image to appear when a user hovers over one image. I have it where only the one photo becomes opaque but right now the text shows up for every image when hovering over any image.
HTML:
<div class="image">
<img class="projectImage" src="images/peralta.png" alt="">
<h3 class="hiddenH3">This is a test!</h3>
</div>
SCSS:
.image {
position: relative;
width: 100%;
.projectImage {
width: 100%;
transition: all 0.5s ease-in;
}
.hiddenH3 {
display: none;
position: absolute;
top: 45%;
width: 100%;
}
}
JS:
$('.projectImage').on("mouseover", function() {
$(this).closest('.projectImage').addClass("coolEffect");
$('.hiddenH3').fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).closest('.projectImage').removeClass("coolEffect");
$('.hiddenH3').fadeOut(1000);
});

Use .next along with this
$('.projectImage').on("mouseover", function() {
$(this).addClass("coolEffect");
$(this).next(".hiddenH3").fadeIn(1000);
});
$('.projectImage').on("mouseout", function() {
$(this).removeClass("coolEffect");
$(this).next(".hiddenH3").fadeOut(1000);
});
You can also remove .closest(".projectImage") as this refers to that image.

Why don't you do this with CSS? Since the selectors needed are very old and entrenched, you can do something like this:
.projectImage + h3 {
transition: opacity 1000ms;
opacity: 0;
}
.projectImage:hover + h3 {
opacity: 1;
}
This will fade in your h3 when you hover over the project image, as long as you structure it in that way (i.e., ing, then h3). You can also remove the classes cooLEffect and hiddenh3 as we have defined that by only targeting the h3 that comes after a project image.
The fancy transition effect will only work on modern browser, but older browsers gracefully degrade.
Edit: SASS / LESS
.image {
.projectImage {
& + h3 {
transition: opacity 1000ms;
opacity: 0;
}
&:hover + h3 {
opacity: 1;
}
}
}

Animating bars to width of Text

I am creating a nav bar for my website and I want the slide outs to animate to the width of whatever text is inside it I also want everything on one line. Here is the jsfiddle and my jquery code so far
http://jsfiddle.net/2UEpd/26/
$(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've been trying for a while now, any help is appreciated.

Display:table propertie or inline-block would help.
An idea would be to play width text-indent and letter-spacing for instance.
Here a sample of the idea via CSS only, using table-layout properties so container fits to width used by its content text. http://codepen.io/gc-nomade/pen/kaEoe
basicly:
.slideNav {
height: 30px;
width: 0px;
padding:0 15px;/* gives it 30px width minimal */
line-height:30px;
display:table;/* shrink /expand to size needed by content */
position: relative;
white-space:nowrap;
text-indent:-3em;
letter-spacing:-1em;
transition:1s; linear ;
opacity: .7;
color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
opacity:1;
text-indent:0em;
letter-spacing:1px;
color: white;
}
the toggle click close/open feature on menu is driven via :focus and pointer-events for demo prpose. javaScript should take care of this for a better/good practice.