My html css works

 Pulse hover effect GSAP HTML code: css; Javascript; Output of the code:

 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...

Special Property: Stagger The stagger property allows you to offset the start time of multiple targets in a single tween.  In GSAP3 you no longer need the staggerTo(), staggerFrom(), and staggerFromTo() methods of GSAP2. gsap . to ( '.box1' , {     y : - 400 ,     stagger : 0.1 }) there will be 0.1 timing difference between 1st and 2nd box, and 0.1 timing difference between 2nd and 3rd, I mean  each box will start 0.1 seconds after the previous one starts. lesser the value of stagger lesser will be duration and timing get overlapped, the greater the value greater the timing difference between elements A stagger object gives you greater control over where the staggers start from and how the timing is dispersed. gsap . to ( '.box1' , {     y : - 400 ,     stagger :{         each : 0.2 ,         from : 'end'     } }) each:0.2  means there will be 0.2 seconds  be...

GSAP ease property  Ease will control whether your animation  slows down  or  speeds up . Easing is the primary way to change the timing of your tweens   gsap . to ( ".box" , {     x : 800 ,     backgroundColor : 'red' ,     duration : 4   })   gsap . to ( ".box1" , {     x : 800 ,     backgroundColor : 'green' ,     ease : "power4.out" ,     duration : 4   }) Here we are comparing the moment of two boxes, having one with no ease property and another with power4.out,  We will notice that second box will move faster then first. This means the power4.out gives speed near to the end. The more the value with power the more faster will be. Some other ease properties are: ease:”bounce”  will bounce on the way out ease:”bounce.in ” will bounce on the way in ease:”bounce.inOut”  will bounce on the way in and out There are many other eases you can visit at :  GreenSoc...

 GSAP delay and repeat property delay : how much time should transpire before animation begins repeat : how many times the animation should repeat yoyo : when set to true the animation will play back and forth repeatDelay : how much time should transpire between each repeat gsap.to(".box", {x:300, repeat:-1, yoyo:true, repeatDelay:1}); Now this will repeat forever, going back to left side from right side slowly is due to yoyo property, otherwise, when reaching at right side, it directly goes to left and but with yoyo we can see box going slowly towards left side

 Using GSAP instead of tween and timeline Timeline and tween are older version of Gsap so you can use both using just from new statement called gsap,  For gsap include the following script tag; <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> for latest script tag visit :  CDN gsap code simple tween using gsap statement gsap . to ( ".boxes" , {     duration : 1 ,     x : 250 ,     y : 300 ,     backgroundColor : "yellow" ,     rotation : 360 ,     stagger : 0.1 }) that stagger makes time gap between different element,  here when one box starts to animate, then after 0.1s another box get animated syntax:  gsap . method ( "target" , { properties for animation }) method = .to,  .from, fro...

 TweenMax Make sure to include this, if you include only this script of tweenMax then even tweenlite also works  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha512-8Wy4KH0O+AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58+Y8Z08qzeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> It's syntax and it is also same as that of tweenlite just here there are some additional features; const box1 = document . querySelector ( ".box1" ); const box3 = document . querySelector ( ".box3" ); const array = [ box1 , box3 ]; TweenMax . to ( array , 1 ,{     backgroundColor : "red" ,     y : 200 ,     autoAlpha : 0 , }) Some tweenMax Methods; const allbox = document.querySelectorAll(".boxes") TweenMax. staggerFrom (Element, duration, {     other porperties --------,     stagger : 0.5 }) const allbox = document.quer...

 Using TweenLite to Multiple Elements const square1 = document . querySelector ( ".box1" ); const square2 = document . querySelector ( ".box3" ); const boxArray = [ square1 , square2 ] TweenLite . to ( boxArray , 1 ,{     backgroundColor : "red" ,     y : 200 ,     autoAlpha : 0 }) Yes you can create array having selected element to which you want to apply same animation; If you want to apply same animation for all element at once then you can use queryselectorAll; const allItems = document . querySelectorAll ( ".boxes" ); TweenLite . to ( allItems , 1 ,{     backgroundColor : "red" ,     y : 200 ,     autoAlpha : 0 }) Properties onStart = when you click certain things then that tweenlite animation starts, you can use with html elements like buttons, links etc const allItems = document . querySelectorAll ( ".boxes" ); TweenLite . to ( allItems , 1 ,{     backgroundColor : "red" ,   ...

 TweenLite different Methods const square = document . querySelector ( ".box1" ); TweenLite . to ( square , 1 ,{     backgroundColor : "red" ,     y : 200 ,     autoAlpha : 0 }) to = Change Element orginal state to that kept property state, i.e animating state const square = document . querySelector ( ".box1" ); TweenLite . from ( square , 1 ,{     backgroundColor : "red" ,     y : 200 ,     autoAlpha : 0 }) from = Brings element from animating property to original state const square = document . querySelector ( ".box1" ); TweenLite . fromTo ( square , 1 ,{     backgroundColor : "red" ,     y : 200 ,     autoAlpha : 0 }, {     backgroundColor : "pink" ,     y : - 200 ,     autoAlpha : 1 , }) fromTo = Initializing initial and final position and animating according to user