Nisha Prasad

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.

The above code is working fine in local but not after ng build --prod

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

I have been working on angular project and implemented gsap animations. It is working fine when is on local. But when we execute ng build --prod for deployment on server its not working. On server gsap animations are not working. Any idea plz help urgently. Thank You !!!

I am looking for 3D image rotation. I have its sequence of approx 100 images but don't know how to rotate using gsap with so many images. Can any one please help ??

Can anyone please share small code snippet or demo code in which it use sequence of multiple images. Just like opening close box or something related to it.

You can check from codepen the first svg is not animating. Do know whats the error in svg. https://codepen.io/nisha_code/pen/PoQGLwg

Hello I have my dotted svg file which needs to be animated using drawsvg. Attaching my demo html file. My first dotted svg is not animating like other dashed line. gsap-runner-box.html

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 : https://codepen.io/PointC/pen/wmmmmK 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