Animating SVG objects on and off screen, with dynamic generation

Question

I am attempting to create an animation using an SVG object that I have whereby, each individual SVG rectangle in a single row animates in a scrolling fashion, either up or down. I'm struggling to find both the resources to learn how to do this and the best method to actually implement this functionality.

I think I would also need the elements to be dynamically generated so that, there is never a gap in the rectangles as the exit and enter the screen.

The code I have so far:


  
    
      
        
      
    
  


/* Keyframes */

@keyframes slide {
  from {
    top: 0;
  }

  to {
    top: 100%;
  }
}

/* General Stying */

body {
  margin: 0;
  padding: 0;
}

.hero--wrapper .hero--inner {
  max-height: 745px;
  height: 745px;
  overflow: hidden;
}

.page--center {
  margin: 0 auto;
  max-width: 1140px;
  padding: 0 20px;
}

.hero--wrapper .hero--inner .svg-rect--el {
    position: relative;
    height: 100%;
    width: 100%;
}

.hero--wrapper .hero--inner .svg-rect--el svg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.hero--wrapper .hero--inner .svg-rect--el svg rect {
  animation: slide 10s linear infinite;
}

Link to jsfiddle

It's not a lot so I do apologies but, if someone could point me in the right direction, that would be greatly appreciated.

Thanks :)

Holger Will · Accepted Answer

nice idea! here is one way to do it. This version uses SMIL animations. the reverse motion is a bit of a hack, there is probably a better way to implement it.

how it basically works: I place the rectangles at 0,0 and move them to the right. I calculate how long a rectangle needs to travel it's own length (+ the space between two rects) and then set the starting time of the animation to a negative value corresponding to its position, so that it reaches it's correct place at time 0s.

if you have any question, just ask, i will modify the answer to clarify how this works... hope it helps

var svgns = "http://www.w3.org/2000/svg"

function rect(w, h, c) {
  var rect = document.createElementNS(svgns, "rect")
  rect.setAttribute("width", w)
  rect.setAttribute("height", h)
  rect.setAttribute("class", c)
  return rect
}

function animate(from, to, dur, begin) {
  var anim = document.createElementNS(svgns, "animate")
  anim.setAttribute("attributeName", "x")
  anim.setAttribute("from", from)
  anim.setAttribute("to", to)
  anim.setAttribute("dur", dur)
  anim.setAttribute("begin", begin)
  anim.setAttribute("repeatCount", "indefinite")
  return anim
}

function createRow(rectWidth, rectHeight, rectPadding, numRects, dur, classes) {
  var g = document.createElementNS(svgns, "g")
  var totalWidth = (rectWidth + rectPadding) * (numRects)
  var distanceToTravel = (rectWidth + rectPadding) * (numRects)
  var pixelPerSecond = distanceToTravel / dur
  var durPerRect = (rectWidth + rectPadding) / pixelPerSecond
  for (var i = 0; i < numRects; i++) {
    var r = rect(rectWidth, rectHeight, classes[i % classes.length])
    var a = animate(-(rectWidth + rectPadding), distanceToTravel, dur, -(i * durPerRect))
    r.appendChild(a)
    g.appendChild(r)
  }
  return g
}
row1.appendChild(createRow(89, 32, 5, 10, 17, ["c1", "c2", "c2", "c1", "c3"]))
row2.appendChild(createRow(89, 32, 5, 10, 13, ["c2", "c1", "c1", "c3", "c2"]))
row3.appendChild(createRow(89, 32, 5, 10, 11, ["c3", "c3", "c1", "c2", "c1"]))

rect {
  rx: 5
}

.c1 {
  fill: #38324d;
}

.c2 {
  fill: #42cc7f;
}

.c3 {
  fill: #937ce3;
}

Animating SVG objects on and off screen, with dynamic generation

Answers (1)

Related Questions