Jump to content
GreenSock

Nisha Prasad

Members
  • Posts

    9
  • Joined

  • Last visited

Posts posted by Nisha Prasad

  1. Here is my home page ts file animation function code

     

    topBoxAnimation(){
    // define images
    const images1 = [
    "assets/images/home/falling_part/Falling_Part_00000.png",
    "assets/images/home/falling_part/Falling_Part_00001.png",
    "assets/images/home/falling_part/Falling_Part_00002.png",
    "assets/images/home/falling_part/Falling_Part_00003.png",
    "assets/images/home/falling_part/Falling_Part_00004.png",
    "assets/images/home/falling_part/Falling_Part_00005.png",
    "assets/images/home/falling_part/Falling_Part_00006.png",
    "assets/images/home/falling_part/Falling_Part_00007.png",
    "assets/images/home/falling_part/Falling_Part_00008.png",
    "assets/images/home/falling_part/Falling_Part_00009.png",
    "assets/images/home/falling_part/Falling_Part_00010.png",
    "assets/images/home/falling_part/Falling_Part_00011.png",
    "assets/images/home/falling_part/Falling_Part_00012.png",
    "assets/images/home/falling_part/Falling_Part_00013.png",
    "assets/images/home/falling_part/Falling_Part_00014.png",
    "assets/images/home/falling_part/Falling_Part_00015.png",
    "assets/images/home/falling_part/Falling_Part_00016.png",
    "assets/images/home/falling_part/Falling_Part_00017.png",
    "assets/images/home/falling_part/Falling_Part_00018.png",
    "assets/images/home/falling_part/Falling_Part_00019.png",
    "assets/images/home/falling_part/Falling_Part_00020.png",
    "assets/images/home/falling_part/Falling_Part_00021.png",
    "assets/images/home/falling_part/Falling_Part_00022.png",
    "assets/images/home/falling_part/Falling_Part_00023.png",
    "assets/images/home/falling_part/Falling_Part_00024.png",
    "assets/images/home/falling_part/Falling_Part_00025.png",
    "assets/images/home/falling_part/Falling_Part_00026.png",
    "assets/images/home/falling_part/Falling_Part_00027.png",
    "assets/images/home/falling_part/Falling_Part_00028.png",
    "assets/images/home/falling_part/Falling_Part_00029.png",
    "assets/images/home/falling_part/Falling_Part_00030.png",
    "assets/images/home/falling_part/Falling_Part_00031.png",
    "assets/images/home/falling_part/Falling_Part_00032.png",
    "assets/images/home/falling_part/Falling_Part_00033.png",
    "assets/images/home/falling_part/Falling_Part_00034.png",
    "assets/images/home/falling_part/Falling_Part_00035.png",
    "assets/images/home/falling_part/Falling_Part_00036.png",
    "assets/images/home/falling_part/Falling_Part_00037.png",
    "assets/images/home/falling_part/Falling_Part_00038.png",
    "assets/images/home/falling_part/Falling_Part_00039.png",
    "assets/images/home/falling_part/Falling_Part_00040.png",
    "assets/images/home/falling_part/Falling_Part_00041.png",
    "assets/images/home/falling_part/Falling_Part_00042.png",
    "assets/images/home/falling_part/Falling_Part_00043.png",
    "assets/images/home/falling_part/Falling_Part_00044.png",
    "assets/images/home/falling_part/Falling_Part_00045.png",
    "assets/images/home/falling_part/Falling_Part_00046.png",
    "assets/images/home/falling_part/Falling_Part_00047.png",
    "assets/images/home/falling_part/Falling_Part_00048.png",
    "assets/images/home/falling_part/Falling_Part_00049.png",
    "assets/images/home/falling_part/Falling_Part_00050.png",
    "assets/images/home/falling_part/Falling_Part_00051.png",
    "assets/images/home/falling_part/Falling_Part_00052.png",
    "assets/images/home/falling_part/Falling_Part_00053.png",
    "assets/images/home/falling_part/Falling_Part_00054.png",
    "assets/images/home/falling_part/Falling_Part_00055.png",
    "assets/images/home/falling_part/Falling_Part_00056.png",
    "assets/images/home/falling_part/Falling_Part_00057.png",
    "assets/images/home/falling_part/Falling_Part_00058.png",
    "assets/images/home/falling_part/Falling_Part_00059.png",
    "assets/images/home/falling_part/Falling_Part_00060.png",
    ];
     
    const obj1 = {curImg: 0};
    gsap.to(obj1,
    {
    scrollTrigger:{
    trigger: ".page",
    toggleActions:"restart pause reverse pause",
    start:"top top",
    end: "+=140%",
    //markers:true,
    scrub:1,
    },
    duration:10,
    immediateRender: true,
    ease: "power2",
    curImg: images1.length - 1, // animate propery curImg to number of images
    roundProps: "curImg", // only integers so it can be used as an array index
    onUpdate: function () {
    // set the image source
    //$("#fallingBox1").attr("src", images1[obj1.curImg]);
    if (document.querySelector("#fallingBox1")){
    gsap.set("#fallingBox1", {
    attr: { src: images1[obj1.curImg]} ,
    duration : 2,
    css:{transition:"all 2s ease"},
    });
    }
    }
    }
    );
    }
  2. As I am new to this Draw svg plugin so unable to work on required output. I have one svg file which should be drawn when user opens the page. Below are the 3 lines svg file. I want output like this :  ie how dotted lines are moving. But mine is not working. Is my svg file code is correct. Urgent help please.

    line1.svg line2.svg line3.svg

    See the Pen wmmmmK by PointC (@PointC) on CodePen

×