TweenLite absolute beginning for animations

 TweenLite syntax


Method of using TweenLite


const tl = new TweenLite.Method(Element, duration, animating property);

OR 

const tl = TweenLite.Method(Element, duration, animating property);

OR best and Popular way 

TweenLite.Method(Element, duration, animating properties)


From above;

Method = ways of animation
Element = that element you want to animate
Duration = Amount of time that your animation takes to finish
Animating property = Various properties which you want to show in animating way

Comments

Post a Comment

Popular posts from this blog

Gsap effect on click

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

Gsap timeline position parameters

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

Special Property: Stagger

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