From 7081d8077300e250b1e65f329293bc231901a59f Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Wed, 7 Aug 2024 15:27:35 +0200
Subject: [PATCH] fixed animation column problem
---
src/App/App.css | 28 ++++++++++++++++++++++++++++
src/components/testsvganimation.tsx | 6 +++---
src/contents/example.tsx | 4 +++-
3 files changed, 34 insertions(+), 4 deletions(-)
diff --git a/src/App/App.css b/src/App/App.css
index 2840b7c2..d8f6de7b 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -53,6 +53,30 @@
display: none;
}
+.col-max{
+ flex: 0 0 0%;
+ width: max-content !important;
+ min-width: 77% !important;
+ max-width: 90% !important;
+}
+
+.col-2{
+ width:16.66666667% !important;
+}
+
+.col-1{
+ width: 8.33333333% !important;
+}
+
+.col-max-10{
+ flex: 0 0 auto;
+ max-width: 83.33333333% !important;
+}
+
+.col{
+ max-width: 100% !important;
+}
+
/* * * * * * * */
/* * * BODY* * */
@@ -460,6 +484,10 @@ svg {
max-width: 100%;
display: block;
}
+
+.s-svg{
+ max-width: 80%;
+}
img .middle{
vertical-align:middle;
}
diff --git a/src/components/testsvganimation.tsx b/src/components/testsvganimation.tsx
index 813b542b..c1636359 100644
--- a/src/components/testsvganimation.tsx
+++ b/src/components/testsvganimation.tsx
@@ -28,8 +28,8 @@ console.log("Started TestSVG")
scrollTrigger: {
trigger: "svg",
scrub: true,
- start:"top center",
- end: "bottom center"
+ start:"top middle",
+ end: "bottom middle"
}
})
@@ -56,7 +56,7 @@ console.log("Started TestSVG")
return (
- <div className="Animation">
+ <div className="col-8">
<svg id="svg" xmlns="" viewBox="0 0 1980 4400">
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index f6231ef3..96916625 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -6,8 +6,9 @@ import TestSVG from "../components/testsvganimation";
export function Example() {
return (
<>
- <TestSVG></TestSVG>
+ <div className="col">
<div className="col">
+ <TestSVG></TestSVG>
<h3 className="example">Exercises</h3>
<i><h6>By Your name</h6></i>
<div className="example-exercise">
@@ -185,6 +186,7 @@ export function Example() {
+ </div>
</>
);
}
--
GitLab