# [Øvelse] stagger animationer :::info :bulb: Denne opgave skal bruges til at øve gsap.to(), gsap.fromTo() og gsap.set() ::: ## :beginner: Opret følgende filer :::success Du skal i din projektmappe oprette følgende filer. Du skal selv tilføje "start html" og import af gsap - cdn linket. <br>:star: Husk Emmet hjælpen er == '!' for start html <br>:star: :star: Husk link til css-stagger.css ::: :small_blue_diamond:ovelse-02.html :small_blue_diamond:css-stagger.css ## :pencil: Indsæt i `<body>` ``` <section> <div class="mask"> <img src="/img1.jpg" alt="Abstract image"> <p>living</p> </div> <div class="mask"> <img src="/img2.jpg" alt="Abstract image"> <p>in</p> </div> <div class="mask"> <img src="/img3.jpg" alt="Abstract image"> <p class="white">abstraction</p> </div> </section> ``` ## :pencil: Læg billederne i sammen med filerne [link](https://www.v18kunde.dk/fkd/fkd-stagger/) ## :pencil: Indsæt i css-stagger.css ``` @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap'); body { margin: 0; height: 100vh; display: grid; place-content: center; font-family: 'Playfair Display', serif; } .mask { overflow: hidden; position: relative; } img { width: 100%; height: 80vh; } section { display: flex; justify-content: space-between; gap: 4em; } p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 3rem; font-style: italic; margin: 0; } p.white { color: white; } ```