Animating SVG element on viewport

Question

My question is related to my previous question Triggering css animate class on scroll

I am trying to figure out how to trigger the viewport Javascript on the inner SVG element class. You can see here the example: http://codepen.io/anon/pen/Afqza





    .shackle {

     animation-name: open;
    -webkit-animation-name: open;   
    animation-duration: 0.5s;   
    -webkit-animation-duration: 0.5s;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform-origin: bottom left;

}

@keyframes open {
    0% {
        transform: rotate(0deg);    
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);    
    }                       
}

@-webkit-keyframes open {
    0% {
        -webkit-transform: rotate(0deg);    
    }
    50% {
        -webkit-transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);    
    }

}

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll("#lock"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add("shackle");
    } else {
      elem.classList.remove("shackle");
    }
  });
}, false);

Currently the whole padlock animates instead of the shackle that I want to animate. Must be something simple but I cannot figure it out.

haxxxton · Accepted Answer

The issue is that you arent applying the animation class to the shackle element, you are applying it to the lock element.

Because you are playing around with CSS3 and SVG, I can assume you dont need to accommodate for IE7 and below. Therefore, we can assume it's safe to use JS's querySelector method.

First, we'll update the style definition to indicate the class is for an animation definition (and also to separate it from the class on the shackle element that we'll use to select it).

change .shackle to .animShackle in CSS
Second, we'll need to update the scroll event listener to search within the supplied element for the .shackle classed element, and then apply the animation class to that.

update JS

JS

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;
    var shackle = elem.querySelector('.shackle');

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     shackle.classList.add("animShackle");
    } else {
      shackle.classList.remove("animShackle");
    }
  });
}, false);

UPDATE

To make the code more extensible to the need for additional elements with their own animations we need to change some of our variable names so that they feel more universal, and update the way we are getting and setting the animation class.

Add a universal class to the animated SVG's so that we can find them in our onAppear function

add class animatedSVG update querySelectorAll method to use new class rather than single id
Update the class name on the animated element within the SVG so that we can access it within the scroll onAppear.forEach method

update class .shackle to .animatedElement in HTML update elem.querySelector method to use new class rather than non-generic .shackle
Use the SVG's id attribute to create a classname for animation

add a new variable called animationClass made from the SVG id with 'anim' prepended

HTML now requires the following 3 things:

id attribute on SVG
class="animatedSVG" on SVG
class="animatedElement" on element within SVG you wish to animate

Updated JS

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll(".animatedSVG"), function(item) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;
    var animatedElem = elem.querySelector('.animatedElement');
    var animationClass = 'anim'+elem.id;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     animatedElem.classList.add(animationClass);
    } else {
      animatedElem.classList.remove(animationClass);
    }
  });
}, false);

DEMO

Animating SVG element on viewport

Answers (1)

Related Questions