We Keep Coding

Using ScrollReveal to animate in parts of SVG

I'm using the ScrollReveal library to animate in sections of my site.
I have a pretty complex vector which contains five groups. I'm trying to animate these five groups in separately using this library.
Here is my approach currently:
My SVG is a bit lengthy and Stack has a body count character limit, so I created a demo using JSFiddle here.
Each group has a class and as you can see from the demo, it initially loads, then disappears. None of the reveal effects are working? I have other divs with the same parameters which work, but it doesn't work with this SVG for some reason?
If we inspect the white space, I can see that the parts are not appearing because the opacity is 0. But, on scroll, this opacity isn't changing and I don't want to force opacity to 1 via CSS as this I want the part to fade in nicely, whereas setting it to 1 will just make it a static image.

I encountered this same issue. I could not figure out how to get the opacity to work using ScrollReveal directly, so I ended up using ScrollReveal to detect the scroll position and then trigger a callback function to toggle the class. It doesn't require much CSS, but it does require a little bit.
Here's a generic version of my code as an example:
#ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
svg {
.class-one {
opacity: 0;
transition: opacity 8000ms #ease-out-expo;
&.visible {
opacity: 1;
}
}
.class-two {
opacity: 0;
transition: opacity 8000ms #ease-out-expo;
&.visible {
opacity: 1;
}
}
.class-three {
opacity: 0;
transition: opacity 8000ms #ease-out-expo;
&.visible {
opacity: 1;
}
}
}
(function($) {
// Reveal the block
ScrollReveal().reveal(".container", {beforeReveal: showGraphic, viewFactor: 0.3});
// Define the showGraphic function
function showGraphic() {
$(".container svg .class-one").addClass( "visible" );
setTimeout(function() {
$(".container svg .class-two").addClass( "visible" );
}, 1800);
setTimeout(function() {
$(".container svg .class-three").addClass( "visible" );
}, 3600);
}
}(jQuery))

How to remove a div with fade out effect in JavaScript?

I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css solution.
document.querySelector('.list').addEventListener("click", function(e){
if (e.target.localName === "span") {
var removeTarget = e.target.parentNode.parentNode;
removeTarget.parentNode.removeChild(removeTarget);
};
});
This code is removing the div element with no effect. How can i add a fade out effect?

I've made this function a while ago for a personal project:
function removeFadeOut( el, speed ) {
var seconds = speed/1000;
el.style.transition = "opacity "+seconds+"s ease";
el.style.opacity = 0;
setTimeout(function() {
el.parentNode.removeChild(el);
}, speed);
}
removeFadeOut(document.getElementById('test'), 2000);

There are two ways you can achieve this: CSS3 animation or jQuery animation.
CSS3 Animation
In your CSS document, add:
.list {
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}
This will make any change of opacity to your item fade by 1000ms.
Change line 4 of your JavaScript to:
removeTarget.style.opacity = '0';
setTimeout(() => removeTarget.remove(), 1000);
This will make your item change opacity to 0, thus making the transition from step 1 have an effect. Then it will remove the item with your code after 1000ms.
Note: Make sure the time of the CSS3 transition and the setTimeout are the same.
jQuery Animation
Get jQuery
Go to the jQuery Website and download it, or
Add ` in your HTML document before any jQuery code.
Change line 4 of your Javascript to:
removeTarget.fadeOut(1000)
This will Fade Out your item by 1000ms, you can change this time to whatever you want.

In 2020 you can forgo use of use setTimeout for the animationend event, removing the need to maintain the duration in two places:
.fade-out {
animation: fade 2s;
-webkit-animation: fade 2s;
-moz-animation: fade 2s;
}
/* Animate opacity */
#keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#-moz-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#-webkit-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
const elementToFade = document.getElementById('my-element');
elementToFade.onanimationend = (e) => {
if (e.target.classList.contains('fade-out')) {
elementToFade.parentNode.removeChild(elementToFade);
}
};
// To fade away:
elementToFade.classList.add('fade-out');

It's a good question, but to animate some element in html, this element has to exist while it is animating. So, you have some ways to do this, a good way is hide this element with CSS and after the animation you remove this element. While you hiding you can animate, you can see this example:
<style>
.hide{
opacity: 0;
}
.fade-out {
transition:1s linear all;
}
</style>
<span class="list fade-out">
This is a List, click me to hide
</span>
<script>
document.querySelector('.list').addEventListener("click", function(e) {
if (e.target.localName === "span") {
//Add CSS hide and animate with fade out
var currentCSS = this.className;
this.className = currentCSS + ' hide';
var removeTarget = e.target.parentNode.parentNode;
setTimeout(function(){
removeTarget.parentNode.removeChild(removeTarget);
},1000);
};
});
</script>

Add the following CSS class to the element using elem.className="my-animation"; on click:
.my-animation {
animation: fade 3s steps(90) forwards;
-webkit-animation: fade 3s steps(90) forwards;
-moz-animation: fade 3s steps(90) forwards;
}
#keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.0;
}
}
You may control the speed of the animation by modifying the steps(number) as well.

Just goto jQuery source code, take out the fade code which is in pure javascript, and use it, no need to reinvent the wheel,
or a hint is reduce the height of div to 0 slowly using setTimeInterval()
or a css solution would be to use transform and transition properties

Javascript slide effect onclick

I'd like to add a slide & fade effect to a DIV, with purely Javascript, using "onclick".
The code is here: http://jsfiddle.net/TCUd5/
The DIV that has to slide has id="pulldown_contents_wrapper".
This DIV is contained in a SPAN, that also triggers it:
<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" >
<div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper">
And I think the JS code that controls the SPAN onclick is:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
If it is not possible to make it with pure JS, do you have an idea how could I do it with Mootools? (*I'd like to use only pure JS or the Mootols framework).
I have tried to implement the code from: why javascript onclick div slide not working? but with no results.
Thanks a lot.
I have managed to make it with Mootools, but I can't figure it out how to add a slide & fade effect, and a delay on mouseout
window.addEvent('domready', function() {
$('updates_pulldown').addEvents({
mouseenter: function(){
$('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
physics: 'pow:in:out',
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).show();
},
mouseleave: function(){
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
delay: 1000,
}).hide();
$('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown')
},
});
});
var toggleUpdatesPulldown = function(event, element, user_id) {
showNotifications();
}
Any idea?

jQuery is a lot easier, but with pure javascript you can do it.
In the CSS you'll need to use transitions
#thing { position:relative;
top: 0px;
opacity: 0.8;
-moz-transition: top 1s linear, opacity 1s linear;
-webkit-transition: top 1s linear, opacity 1s linear;
}
then in the javascript when you change the position of the element, it should change via the css transitions.
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.style.top = someValue; //something like '100px' will slide it down 100px
element.style.opacity = '1.0'; //will fade the content in from 0.8 opacity to 1.0
element.className= 'updates_pulldown_active';
showNotifications();
EDIT - provided jQuery code
call the jQuery library, most easily done from the google hosting
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
make the hover function
$(document).ready(function() {
$('.updates_pulldown').hover( //first function is mouseon, second is mouseout
function() {
$(this).animate({top: '50px'}).animate({opacity: '1.0'});
},
function() { //delay 1000 milliseconds, animate both position and opacity
$(this).delay(1000).animate({top: '0px'}).animate({opacity: '0.5'});
}
)
})
the function timing will be the same as whatever you set it to in the css with transition tags. using 'this' instead of the class name again makes sure that the effect only occurs on the specific instance of the class that is hovered over. im not sure if this animation is exactly what you were asking for, but if i understand the question correctly then the main functionality will work for you. just change the numbers and such to fit your needs.

Smoothly change css

my situation is as follows:
I have the following function
var showHideMemberContent = function(){
if(isHidden === false){
$("#showHideMemberContent").text("Member Content");
$("#main").css("height","-=187");
$('#mainBottom').hide('slow', function() {
isHidden = true;
});
} else {
$("#showHideMemberContent").text("Verberg");
$("#main").css("height","+=187");
$('#mainBottom').show('slow', function() {
isHidden = false;
});
}
};
So when the function executes it hides the "mainBottom" div. The "main" div should decrease/increase its height.
It does so, but I need to know if there is a way to do this smoothly.
Thanks in regard.

You can use CSS to achieve this. Simply add this rule to your CSS declaration for #main:
#main {
-khtml-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
Here the height part defines the property to apply the transition to, the 0.3s defines the time it takes to transition from one state to another, and the ease property defines the function for the transition. Ease will slowly accelerate to 50% transition and then decelerate to 100%.
The advantage of using CSS over jQuery's animate function is that the CSS transform is hardware accelerated when supported, and will be smoother and more efficient. The disadvantage is that some antiquated browser versions will not support the effect, however it will simply fall back to a non-animated height change, rather than breaking.
To learn more about CSS transitions, follow the link below to Mozilla's article. They're a great reference for these sort of things and an excellent place to start learning, or even brush up on your knowledge. I've also included an example of this technique below.
MDN article on transitions.
Here is a jsfiddle example.

Yes, use jquerys animate() method, http://api.jquery.com/animate/.
Include jquery ui if you want to use easing types other than "linear" or "swing". Its passed as a second argument (string), to the animate method. https://jqueryui.com/easing/
Example (with jquery ui loaded):
$(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){
/* animation comlete */
});
Also, work on your accept rate.

You can use animate for that:
var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });

if you want to operate with css and classes, not the style attribute, you can use jquery-ui's switchClass() or toggleClass() methods http://docs.jquery.com/UI/Effects/switchClass http://jqueryui.com/demos/toggleClass/

Use animate()...
var showHideMemberContent = function(){
if(isHidden === false){
$("#showHideMemberContent").text("Member Content");
$("#main").animate({height:-=187}, 300);
$('#mainBottom').hide('slow', function() {
isHidden = true;
});
} else {
$("#showHideMemberContent").text("Verberg");
$("#main").animate({height:+=187}, 300);
$('#mainBottom').show('slow', function() {
isHidden = false;
});
}
};

jquery animate .css

I have a script:
$('#hfont1').hover(
function() {
$(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover
},
function() {
$(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout
}
);
how can i animate it or slow it down, so it wont be instant ?

Just use .animate() instead of .css() (with a duration if you want), like this:
$('#hfont1').hover(function() {
$(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
$(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});
You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.

You could opt for a pure CSS solution:
#hfont1 {
transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out; /* FF 4 */
-webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
-o-transition: color 1s ease-in-out; /* Opera */
}

The example from jQuery's website animates size AND font but you could easily modify it to fit your needs
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
http://api.jquery.com/animate/

You can actually still use ".css" and apply css transitions to the div being affected. So continue using ".css" and add the below styles to your stylesheet for "#hfont1". Since ".css" allows for a lot more properties than ".animate", this is always my preferred method.
#hfont1 {
-webkit-transition: width 0.4s;
transition: width 0.4s;
}

If you are needing to use CSS with the jQuery .animate() function, you can use set the duration.
$("#my_image").css({
'left':'1000px',
6000, ''
});
We have the duration property set to 6000.
This will set the time in thousandth of seconds: 6 seconds.
After the duration our next property "easing" changes how our CSS happens.
We have our positioning set to absolute.
There are two default ones to the absolute function: 'linear' and 'swing'.
In this example I am using linear.
It allows for it to use a even pace.
The other 'swing' allows for a exponential speed increase.
There are a bunch of really cool properties to use with animate like bounce, etc.
$(document).ready(function(){
$("#my_image").css({
'height': '100px',
'width':'100px',
'background-color':'#0000EE',
'position':'absolute'
});// property than value
$("#my_image").animate({
'left':'1000px'
},6000, 'linear', function(){
alert("Done Animating");
});
});