[Saving animation state between page loads]

To answer my own question...

 

The position, scale and orientation is modified on the SVG object - this is where to look to save and restore the state of the SVG.

 

The scale and position are in the viewBox attribute, orientation in data-svg-origin and transform, for example in the demo shown:

 

<svg id="map" class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="173.169 19.9044 1000 1000" style="">
  <title>Demo Square</title>
  <g id="viewport" data-svg-origin="488.94370908783253 572.0179250471222" transform="matrix(-0.80649,0.59125,-0.59125,-0.80649,1243.48156,500.66229)" style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px 0px;">
...
</svg>

Add a function to store these values in session, or elsewhere, for example:

 

//
// Update saved map state in session
// ===========================================================================
function updateCurrentTransformation() {
  var savedMapState = new Object();

  savedMapState.svgViewBox = svg.getAttribute("viewBox");
  savedMapState.viewportOrigin = viewport.getAttribute("data-svg-origin");
  savedMapState.viewportTransform = viewport.getAttribute("transform");

  sessionStorage.setItem("savedMapState", JSON.stringify(savedMapState));

  //console.log("VBX: " + savedMapState.svgViewBox + "  VPO: " + savedMapState.viewportOrigin + "  VPT: " + savedMapState.viewportTransform);
}

Call this function whenever the map changes - for example at the end of the drag:

 

var draggedSvg = Draggable.create(proxy, {
	...
  onDragEnd: function () {
    updateCurrentTransformation();
  },
});

At page initialisation, read these values and modify the SVG attributes with saved values if any:

 

// Get saved map state - will exist if map moved
var savedMapState = JSON.parse(sessionStorage.getItem("savedMapState"));

if (savedMapState != null) {
  //console.log("Session exists")

  if (savedMapState.svgViewBox != null) {
    svg.setAttribute("viewBox", savedMapState.svgViewBox);
  };
  if (savedMapState.viewportOrigin != null) {
    viewport.setAttribute("data-svg-origin", savedMapState.viewportOrigin);
  };
  if (savedMapState.viewportTransform != null) {
    viewport.setAttribute("transform", savedMapState.viewportTransform);
  };
}

Finally, remove the stored session when required, fore example when the SVG is set to original size etc:

 

//
// RESET VIEWPORT
// ===========================================================================
function resetViewport() {

  ...

  // remove saved map sate session values
  sessionStorage.removeItem("savedMapState");
}

 

A working demo and the code referred to is here

[Saving animation state between page loads]

Super stuff and thanks for the response. Let's get to it...

On 2/1/2023 at 3:27 PM, Rodrigo said:

based on the error you're getting, you are creating a circular reference which means that you are trying to Stringify an object that has a reference to itself inside:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value

Yah well I figured that out real quick and got the solution too..

 

Before I got into fixing recursive references, I reached out to ask the fundamental questions

 

Question 1: Is it possible to save animation state between page loads?

 

Question 2: If it is possible, how would you implement this?

 

I realise now that I made a mistake in offering any code. Forget my code. How would you achieve the result?

 

[Saving animation state between page loads]

I'm using GSAP to manipulate an SVG map. See pen, based on @OSUblakes fine work with

See the Pen oGoyYb by osublake (@osublake) on CodePen

 

I'd like to be able to maintain the map's position following a page refresh or ajax call for updated content. The whole SVG content will change although the bounds will not - the change would be in the icons.

 

I've already attempted to save what I think might be useful in sessionStorage but get errors storing the object data. It doesn't help that I'm not a JavaScript man, as might be obvious with the following code that spits out it's dummy at the point of storing object with TypeError: cyclic object value Is what I'm trying to do possible, and if so, how?

 

See the Pen dyjLbPm by EddieGreen (@EddieGreen) on CodePen