# [OPGAVE 1] gsap.to :::info :bulb: Denne opgave skal bruges til at prøve gsap.to(). ::: ## :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-01.css ::: :small_blue_diamond:ovelse-01.html :small_blue_diamond:css-01.css ## :pencil: Indsæt i `<body>` ``` <section> <a href="#"> <div class="outer-circle"> <div class="inner-circle"></div> <svg viewBox="0 0 45 46" fill="none"> <path d="M22.579 1.94958L22.579 44.0504" stroke="white" stroke-width="2" stroke-linecap="round"/> <path d="M1.52856 23L43.6294 23" stroke="white" stroke-width="2" stroke-linecap="round"/> </svg> </div> <div class="mask"> <span>Add to Bookmarks</span> </div> </a> </section> ``` ## :pencil: Indsæt i css-01.css ``` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&display=swap'); section a { display: flex; gap: 2em; text-decoration: none; align-items: center; } .outer-circle { width: 4em; height: 4em; border: 2px solid #0062F2; padding: 2em; border-radius: 50%; position: relative; } .inner-circle { position: absolute; width: 100%; height: 100%; background: #0062F2; top: 0; left: 0; border-radius: 50%; z-index: -1; transform-origin: center; transform: scale(0); } .mask { overflow: hidden; } span { font-size: 2rem; color: white; font-family: 'Inter', sans-serif; transform: translateY(-100px); display: block; } ``` ## :pencil: Tilføj i `<script>`tag efter import af gsap cdn-link ``` const link = document.querySelector('a') const innerCircle = document.querySelector('.inner-circle') const innerText = document.querySelector('span') link.addEventListener('mouseenter', () => { // Brug gsap.to(): }) link.addEventListener('mouseleave', () => { // Brug gsap.to() og sæt værdier til 0: }) ``` ## :beginner: Du skal nu få følgende til at virke :::warning 1. Du skal give .innerCircle en 'scale' på 1 i mouseenter, og 0 i mouseleave 2. Du skal give .innerText en y værdi på 0 i mouseenter, og -100 i mouseleave :::