aktuelle.kurse/m152/auftraege/x_gitressourcen/Animationen/SVG/50_Greensock.html

28 lines
934 B
HTML
Raw Normal View History

2021-07-20 16:00:23 +02:00
<!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>