CODEWITHSUNDEEP
javascriptsvg.js
chris_l
chris_l

Reputation: 57

Position not changed by animation

This question is about SVG.js

I use two move commands on animations of two SVG objects to swap their positions. I then use a callback from afterAll to move one of these objects further. I find that I need to specify my new position relative the the previous changes, i.e. from the position of the object right at the start. This is a headache, for keeping track of old coordinate changes (deltas).

So:

Thanks for any help...

Upvotes: 1

Views: 197

Answers (1)

gengns
gengns

Reputation: 1643

If you just want to swap SVG images maybe you don't need a library (A and B options)

A) To do so you can rely on basic CSS transition.

div {
  position: absolute;
  width: 100px;
  height: 100px;
}

#one {
  background-color: #39464e; 
  left: 0;
}

#two {
  background-color: #ff4f68;
  right: 0;
}

body.swap #one {
  left: calc(100% - 100px);
  transition: 5s;
}

body.swap #two {
  right: calc(100% - 100px);
  transition: 5s;
}

Example: https://jsfiddle.net/gengns/et9dbpur/

You can use a svg tag instead of a div or set your SVG in a div background-image.

B) If you don't want to animate, just simple swap them you can do it in a declarative way with CSS Grid.

body {
  display: grid;
  grid-template-areas: 'one two';
}

body.swap {
  grid-template-areas: 'two one';
}

div {
  width: 100px;
  height: 100px;
}

#one {
  background-color: #39464e; 
  grid-area: one;
}

#two {
  background-color: #ff4f68;
  grid-area: two;
}

Example: https://jsfiddle.net/gengns/bsacypd8/

C) Using svg.js 2.7.1

SVG.on(document, 'DOMContentLoaded', function() {
  const draw = SVG('drawing')

  // Rectangles
  const rect_one = draw.rect(100, 100).attr({fill: '#39464e'})
  const rect_two = draw.rect(100, 100).attr({fill: '#ff4f68'}).move(500, 0)

  // Swap
  rect_one.animate().move(500, 0)
  rect_two.animate().move(0, 0).after(() => {
    // Swap again
    rect_one.animate().move(0, 0)
    rect_two.animate().move(500, 0)
  })
})

Example: https://jsfiddle.net/gengns/497j1z0a/

Hope this help :)

Upvotes: 2

Related Questions