diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md
index b043fe110..a5a68a05c 100644
--- a/ci/release/changelogs/next.md
+++ b/ci/release/changelogs/next.md
@@ -9,3 +9,4 @@
- Fix a bug in 32bit builds [#1115](https://github.com/terrastruct/d2/issues/1115)
- Fix a bug in ID parsing [#322](https://github.com/terrastruct/d2/issues/322)
- Fix a bug in watch mode parsing SVG [#1119](https://github.com/terrastruct/d2/issues/1119)
+- Namespace transitions so that multiple animated D2 diagrams can exist on the same page [#1123](https://github.com/terrastruct/d2/issues/1123)
diff --git a/d2renderers/d2animate/d2animate.go b/d2renderers/d2animate/d2animate.go
index b2f1b3074..7fca92dd7 100644
--- a/d2renderers/d2animate/d2animate.go
+++ b/d2renderers/d2animate/d2animate.go
@@ -14,23 +14,23 @@ import (
var transitionDurationMS = 1
-func makeKeyframe(delayMS, durationMS, totalMS, identifier int) string {
+func makeKeyframe(delayMS, durationMS, totalMS, identifier int, diagramHash string) string {
percentageBefore := (math.Max(0, float64(delayMS-transitionDurationMS)) / float64(totalMS)) * 100.
percentageStart := (float64(delayMS) / float64(totalMS)) * 100.
percentageEnd := (float64(delayMS+durationMS-transitionDurationMS) / float64(totalMS)) * 100.
if int(math.Ceil(percentageEnd)) == 100 {
- return fmt.Sprintf(`@keyframes d2Transition-%d {
+ return fmt.Sprintf(`@keyframes d2Transition-%s-%d {
0%%, %f%% {
opacity: 0;
}
%f%%, %f%% {
opacity: 1;
}
-}`, identifier, percentageBefore, percentageStart, math.Ceil(percentageEnd))
+}`, diagramHash, identifier, percentageBefore, percentageStart, math.Ceil(percentageEnd))
}
percentageAfter := (float64(delayMS+durationMS) / float64(totalMS)) * 100.
- return fmt.Sprintf(`@keyframes d2Transition-%d {
+ return fmt.Sprintf(`@keyframes d2Transition-%s-%d {
0%%, %f%% {
opacity: 0;
}
@@ -40,7 +40,7 @@ func makeKeyframe(delayMS, durationMS, totalMS, identifier int) string {
%f%%, 100%% {
opacity: 0;
}
-}`, identifier, percentageBefore, percentageStart, percentageEnd, percentageAfter)
+}`, diagramHash, identifier, percentageBefore, percentageStart, percentageEnd, percentageAfter)
}
func Wrap(rootDiagram *d2target.Diagram, svgs [][]byte, renderOpts d2svg.RenderOpts, intervalMS int) ([]byte, error) {
@@ -99,13 +99,13 @@ func Wrap(rootDiagram *d2target.Diagram, svgs [][]byte, renderOpts d2svg.RenderO
fmt.Fprint(buf, ``)
for i, svg := range svgs {
str := string(svg)
- str = strings.Replace(str, "Chicken's plan
+}]]>Chicken's plan
-Approach roadChicken's plan
+Approach roadChicken's plan
-Approach roadCross roadChicken's plan
+Approach roadCross roadChicken's plan
-Approach roadCross roadMake you wonder whyChicken's plan
+Approach roadCross roadMake you wonder whyChicken's plan
\ No newline at end of file
diff --git a/e2etests-cli/testdata/TestCLI_E2E/internal_linked_pdf.exp.pdf b/e2etests-cli/testdata/TestCLI_E2E/internal_linked_pdf.exp.pdf
index 64ceca2ea..463c4cc7a 100644
Binary files a/e2etests-cli/testdata/TestCLI_E2E/internal_linked_pdf.exp.pdf and b/e2etests-cli/testdata/TestCLI_E2E/internal_linked_pdf.exp.pdf differ