Run Logic | Code Animation Demo

The best place to build, test, and discover front-end code.

 
                        
                            <svg id="svgPaths" width="740"
 height="2000" xmlns="http://
www.w3.org/2000/svg">


                            
                                <use href="#linePath01" />

                                <use href="#linePath02" />

                                <use href="#linePath03" />

                                <use href="#linePath04" />

                            


                            </svg>


                        
                            * { box-sizing: border-box; }


                            html, body {
                            
                                width: 100%;

                                margin: 0;

                                padding: 0px;

                            
                           }


                            body {


                            --strokeDashoffset: 0;


                        
                            scrollTrigger: {


                            
                                trigger: "body",

                                start: "top top",


                                end: "bottom bottom",
           
                                onUpdate: (self) => {


                                
                                    
                                        let scrollProgress =
 - self.progress;


                                        gsap.set("body",

                                         {