Mit GSAP kann man viel anstellen und im heutigen Video zeige ich euch wie man Buchstaben animieren kann. Damit kann auch sehr viel witziges machen, Buchstaben die sich bewegen und drehen oder ganz verschwinden.
Video
GSAP
1
2
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/split-type"></script> |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/split-type"></script>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}
.wort0 {
border: 1px solid #003b08;
overflow-x: hidden;
width: 50%;
text-align: center;
} |
.container {
display: flex;
justify-content: center;
align-items: center;
min-height:100vh;
}.wort0 {
border: 1px solid #003b08;
overflow-x: hidden;
width: 50%;
text-align: center;}
Buchstabe kippen
1
2
3
4
5
6
7
| const splitTypes = document.querySelectorAll(".wort");
splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });
gsap.to(".char", {rotation: 25, duration: 1, stagger: 0.2})
}) |
const splitTypes = document.querySelectorAll(".wort");splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });gsap.to(".char", {rotation: 25, duration: 1, stagger: 0.2})
})
Buchstaben fallen runter
1
2
3
4
5
6
7
| const splitTypes = document.querySelectorAll(".wort");
splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });
gsap.to(".char", {yPercent:100, duration: 1, stagger: 0.2})
}) |
const splitTypes = document.querySelectorAll(".wort");splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });gsap.to(".char", {yPercent:100, duration: 1, stagger: 0.2})
})
Buchstabe fallen von li nach rechts
1
2
3
4
5
6
7
8
9
10
| const splitTypes = document.querySelectorAll(".wort");
splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });
gsap.to(".char", {yPercent:100, duration: 1, stagger: {
each: 0.1,
from: "left"
}})
}) |
const splitTypes = document.querySelectorAll(".wort");splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });gsap.to(".char", {yPercent:100, duration: 1, stagger: {
each: 0.1,
from: "left"
}})
})
Buchstabe fallen und kommen zurück
1
2
3
4
5
6
7
8
9
10
11
12
| const splitTypes = document.querySelectorAll(".wort");
splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });
gsap.to(".char", {yPercent:100, duration: 1, stagger: {
each: 0.1,
from: "center"
},
repeat: -1,
yoyo: true})
}) |
const splitTypes = document.querySelectorAll(".wort");splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });gsap.to(".char", {yPercent:100, duration: 1, stagger: {
each: 0.1,
from: "center"
},
repeat: -1,
yoyo: true})
})
Kombination aus allem
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| const splitTypes = document.querySelectorAll(".wort");
splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });
const tl = gsap.timeline({repeat: -1, yoyo: true})
tl.to(".char",{
yPercent: 100,
duration: 1,
stagger: {
each: 0.1,
from: "center"
},
autoAlpha: 0,
ease: "steps(2)"
// https://gsap.com/docs/v3/Eases/
})
.to(".char", {
yPercent: 0,
duration: 1,
stagger: {
each: 0.1,
from:"edges"
},
autoAlpha: 1,
ease: "bounce"
})
}) |
const splitTypes = document.querySelectorAll(".wort");splitTypes.forEach((char, i) => {
const text = new SplitType(char, { types: "chars, words" });const tl = gsap.timeline({repeat: -1, yoyo: true})tl.to(".char",{
yPercent: 100,
duration: 1,
stagger: {
each: 0.1,
from: "center"
},
autoAlpha: 0,
ease: "steps(2)"
// https://gsap.com/docs/v3/Eases/
})
.to(".char", {
yPercent: 0,
duration: 1,
stagger: {
each: 0.1,
from:"edges"
},
autoAlpha: 1,
ease: "bounce"
})
})
0 Kommentare