My html css works

 Hover Effects for Multiple Elements using GSAP Snap of code are:   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "text" >Angela</ h1 >   </ div >   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "text" >Angela</ h1 >   </ div >   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "text" >Angela</ h1 >   </ div >   CSS * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ;   ...

 Gsap effect on click   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "head" >Angela</ h1 >   </ div > Here is the same code, small gsap effect on click; * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ; } .item {     display: flex ;     gap: 1 rem ;     align-items: center ;     cursor: pointer ; } .circle {     height: 20 px ;     width: 20 px ;     background-color: white ;     border-radius: 50 % ; } Javascript; gsap . defaults ({ duration : 0.2 }) const myAnime = gsap . timeline ({ paused...

 Tween Control on pressing buttons It is also exactly same like of tween control, as; let myTimeAnimation = gsap . timeline ()     . to ( ".box1" , { x : 400 , duration : 2 })     . to ( ".box2" , { x : 400 , duration : 2 })     . to ( ".box3" , { x : 400 , duration : 2 }) window . onload = () => {     myTimeAnimation . pause () } document . querySelector ( ".start" ). onclick = () => {     myTimeAnimation . play () } document . querySelector ( ".pause" ). onclick = () => {     myTimeAnimation . pause () } document . querySelector ( ".restart" ). onclick = () => {     myTimeAnimation . restart () } document . querySelector ( ".reverse" ). onclick = () => {     myTimeAnimation . reverse () } window.onload will keep animation stopped at the beginning, previously in tween there was single box so we can set    paused : "true" ,   inside that box property, but in t...

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...

 GSAP Timeline Since in tween we have to set delay property to play one after another and if we change delay of one we must rewrite all timing of other items. But with the help of timeline all these problems are solved: gsap . to ( '.box1' ,{ y : 200 , duration : 1 , delay : 1 }) gsap . to ( '.box2' ,{ x : 100 , duration : 0.5 , delay : 2 }) gsap . to ( '.box3' ,{ y : 400 , duration : 1 , delay : 3 }) gsap . to ( '.box4' ,{ y : 200 , duration : 1 , delay : 4 }) We should set delay after each to play this in sequence, if we set delay of box4 to 1 then our box1 and box4 will move together, so also need to estimate time correctly.  A timeline is created with gsap.timeline(); All tweens in a timeline naturally play one after the other. The same tween code written in timeline is below: gsap . timeline ()     . to ( ".box1" , { y : 200 , duration : 1 })     . to ( ".box2" , { x : 100 , duration : 0.5 })     . to ( ".box3" , { y : ...

Tween Control on pressing buttons Tween’s have a number of methods for controlling playback. In order to control a tween you need have way to reference it. Below we set up a variable to reference our tween. let mytween = gsap . to ( ".box1" , {     y : 200 ,       paused : "true" ,     duration : 6 }) document . querySelector ( ".startBtn" ). onclick = function (){     mytween . play (); } document . querySelector ( ".pauseBtn" ). onclick = function (){     mytween . pause (); } document . querySelector ( ".restartBtn" ). onclick = function (){     mytween . restart (); } document . querySelector ( ".reverseBtn" ). onclick = function (){     mytween . reverse (); } we have created our animating object along with 4 buttons with html, and on clicking each button, the tween will behave. To do this we must set variable for our tween. We have set;  Pause = "True" at  beginning because if we dont k...