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 doesn't care about other box animation, after 1s of starting animation from the beginning it will starts to move exactly at 1s.

Output of code:




2.

let mytimeline = gsap.timeline()
mytimeline
    .to('.box1',{x:400, duration:1})
    .to('.box2',{x:400, duration:1},"+=2")
    .to('.box3',{x:400, duration:1})


"+=2" will start 2 second after previous tween ends.
That means there will be 2 second gap after animation of box1 ends

Output of code:



3.

let mytimeline = gsap.timeline()
mytimeline
    .to('.box1',{x:400, duration:5})
    .to('.box2',{x:400, duration:1},"-=1")
    .to('.box3',{x:400, duration:1})


"-=1" will start 1 second before previous tween ends
That means when animation of box1 reach to 4 second the box2 will get started
if there was -=2 then 2 second before box1's animation ends....

Output of code:



4.

let mytimeline = gsap.timeline()
mytimeline
    .to('.box1',{x:400, duration:5})
    .to('.box2',{x:400, duration:1})
    .to('.box3',{x:400, duration:1}, "<")


"<" start when previous tween begins
That means when box2 starts box3 also starts. 
But when duration of box2 is about 4 second then, box3 will reach to destination at first then box2 because they will start exactly same time but box2 will move slowly because of duration: 4

Output of code:



5.

let mytimeline = gsap.timeline()
mytimeline
    .to('.box1',{x:400, duration:5})
    .to('.box2',{x:400, duration:4})
    .to('.box3',{x:400, duration:1}, "<2")


"<2" start 2 second after previous tween begins
That means when box2 starts box3 will start after 2 second of starting of box2

Output of code:






HTML and CSS codes for the above program:

 
<div class="boxes">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    height: 100vh;
    background-color: rgb(7, 7, 22);
}

.box{
    margin-left: 2rem;
    height: 50px;
    width: 50px;
    margin-bottom: 1rem;
}

.box1{
    background-color: red;
}
.box2{
    background-color: greenyellow;
}
.box3{
    background-color: aqua;
}



For more info check : Gsap position parameters






































Comments

Post a Comment

Popular posts from this blog

CSS simple grid layout

Image
HTML CODE < body >     < div class = "container" >         < div class = "item item1" >ONE</ div >         < div class = "item" >TWO</ div >         < div class = "item" >THREE</ div >         < div class = "item" >FOUR</ div >         < div class = "item last" >LAST</ div >     </ div > </ body > CSS CODE * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-family: Product Sans; } .container {     display: grid ;     height: 100 VH ;     grid-template-columns: 100 px repeat ( 1 , 1 fr ) 100 px ;     grid-template-rows: 80 px repeat ( 1 , 1 fr ) 80 px ;     gap: 1 rem ;     padding: 1 rem ; } .item {     border: 5 px solid red ; } .item1 ...
Read more

GSAP Timelines

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