mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-30 21:51:56 +01:00
28 lines
934 B
HTML
28 lines
934 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<title>Greensock-Test</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="1000" height="1000"
|
||
|
|
viewBox="0 0 1000 1000">
|
||
|
|
<g id="myGroup">
|
||
|
|
<rect id="myRect" width="400" height="40" fill="#FF00FF" />
|
||
|
|
<circle id="myCircle" cx="500" cy="200" r="50" fill="#FF00DD" />
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/gsap.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.0/CSSRulePlugin.min.js"></script>
|
||
|
|
<script>
|
||
|
|
// siehe https://greensock.com/cheatsheet/
|
||
|
|
gsap.to("#myCircle", {duration: 3, cx:440, cy:400, ease:"bounce", fill: "#00FF00"});
|
||
|
|
gsap.to("#myRect", {rotation: 25, width:1000, cy:400, duration: 3, ease:"bounce", fill: "#00FF00"});
|
||
|
|
// gsap.to("#myGroup", {rotation: -25, duration:4});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|