gsap animation problem

[Andy777 4 Likes (Newbie)]

I don't know how to explain what animation i want to do but if you try to view the animation on your browser, you can understand.

 

I post here the code without use codepen because in codepen displays different. 

 <style>
            body{
                background-color:black;
            }
            .box{
                background-color: black;
                width:500px;
                height:400px;
                position: absolute;
            }
            .borderLeft{
                border: 1px solid red;
                position: absolute;
                left: 0;
                height: 99.5%;
            }
            .borderRight{
                border:1px solid red;
                position: absolute;
                right: 0;
                height: 0%;
            }
            .borderTop{
                border:1px solid red;
                position: absolute;
                top: 0;
                width: 0%;
            }
            .borderBottom{
                border:1px solid red;
                position: absolute;
                bottom: 0;
                width: 0%;
                right:0;
            }
        </style>


<div class="box">
            <div class="border borderLeft"></div>
            <div class="border borderRight"></div>
            <div class="border borderTop"></div>
            <div class="border borderBottom"></div>
      </div>
 <script type="text/javascript">
            
            gsap.to(".borderLeft", {height: "0%", duration: 1})
            gsap.to(".borderTop", { width: "100%", duration: 1, onComplete() {
               $(".borderTop").css("right", "0");
               gsap.to(".borderTop", {width: "0%", duration: 1})
               gsap.to(".borderRight", {height: "99.5%", duration: 1, onComplete(){
                $(".borderRight").css("bottom", "0");
                gsap.to(".borderRight", {height: "0%", duration: 1})
                gsap.to(".borderBottom", {width: "99.5%", duration: 1, onComplete() {
                    $(".borderBottom").css("left","0");
                    gsap.to(".borderBottom", {width: "0%", duration: 1})
                }})
               }})
            }})
           
        </script>

I would like that this animation repeats in loop.

 

Sorry for not give to you a minimal demo.

[GreenSock 18,251 Likes (Superhero)]

This is what timelines are perfect for. Instead of nesting a bunch of onComplete() calls that fire off new animations, just embed them all into a nicely organized timeline that you can set repeat: -1 on (infinite). 

 

I would actually use scaleX/scaleY (transforms) rather than animating width/height because it's better for performance:

See the Pen WNJYvYB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You'll probably want to read up on the position parameter which is what controls where your animations are placed into the timeline: 

Does that clear things up? 

[Andy777 4 Likes (Newbie)]

it does @GreenSock, thanks for your help!! 

 

What does it means the comment on the file js?

 

[GreenSock 18,251 Likes (Superhero)]

I'm not sure I can explain it any clearer than I did in the comment. Here's a fork with that initial tween embedded in the timeline. Hopefully it makes sense when you see it visually: 

See the Pen WNJYyja?editors=1010 by GreenSock (@GreenSock) on CodePen

[Andy777 4 Likes (Newbie)]

Hi @GreenSock,

 

What does yPercent:o yPercent:100, the symbol "<" and the attribute immediateRender : false?

 

Could you explain to me?

[Rodrigo 5,073 Likes (Superhero)]

Hi,

 

The percent values are basically percentage based transforms which take into account the element's dimensions. So for example 100% means the entire width of the element. These are super useful for responsive animations for elements such as slides that use the entire area of the screen. You can read more about them here, just scroll down to the 2D Transforms section:
https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

The less than sign (<) is an indication for the position parameter which tells GSAP to start that particular tween at the same time as the previous one, you can check some examples and details here:

 

Finally this is a simple example of how everything works:

See the Pen XWqwNgV by GreenSock (@GreenSock) on CodePen

 

Let us know if you have any other question.

 

Happy Tweening!

[Andy777 4 Likes (Newbie)]

Thanks @Rodrigo for the explanation. Now i understand it much better.