Jump to content
Search Community

gsap animation problem

Andy777 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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. 

                background-color: black;
                position: absolute;
                border: 1px solid red;
                position: absolute;
                left: 0;
                height: 99.5%;
                border:1px solid red;
                position: absolute;
                right: 0;
                height: 0%;
                border:1px solid red;
                position: absolute;
                top: 0;
                width: 0%;
                border:1px solid red;
                position: absolute;
                bottom: 0;
                width: 0%;

<div class="box">
            <div class="border borderLeft"></div>
            <div class="border borderRight"></div>
            <div class="border borderTop"></div>
            <div class="border borderBottom"></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() {
                    gsap.to(".borderBottom", {width: "0%", duration: 1})

I would like that this animation repeats in loop.


Sorry for not give to you a minimal demo.

Link to comment
Share on other sites

  • Solution

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? 

Link to comment
Share on other sites



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:


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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...