Jump to content
GreenSock

Nisha Prasad

Members
  • Posts

    9
  • Joined

  • Last visited

Posts posted by Nisha Prasad

  1. Hello,

    The problem is the banner box should smoothly come down as user scroll page down. But the Scroll Trigger is not working.

     

    When we do command ng serve on local its work fine.

    But when we do command ng build --prod for putting files on our server.  The ScrollTrigger.create() not working.

  2. 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"},
    });
    }
    }
    }
    );
    }
  3. 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

×