Sujoy

Hi @ZachSaucier same animation not working in mobile device. but in desktop it's working. Now I manage it and it's working. Still if you have any better suggestion then let me know. Like why it's not working in mobile. I use the simple code. Thanks,

Hi @ZachSaucier You can check my last post like how I write the code. I just put the code in pen which is not working in Mobile version. here is the pen : https://codepen.io/zooreact/full/xxbbWOg

Here is code how I wrote : console.clear(); const threshold = 0.4; // trigger const options = { root: null, rootMargin: '0px', threshold: threshold }; const observer = new IntersectionObserver(animHandler, options); const targets = document.querySelectorAll(".animationcont"); const ar = [].slice.call(targets); let animations = []; let count = 0; for (let target of ar) { animations[count] = new TimelineMax({paused:true}); observer.observe(target); count++; } let path = window.location.pathname; //Home page if(path === "/manager/html/index.html") { // One set of animations animations[0].from(".block1", 0.5, {opacity: 0, yPercent:20}); animations[0].from(".block2", 0.51, {opacity: 0, yPercent:20}); animations[0].from(".block3", 0.52, {opacity: 0, yPercent:20}); animations[1].from(".help_box1", 0.5, {yPercent: 20, opacity: 0}); animations[1].from(".help_box2", 0.5, {yPercent: 20, opacity: 0}); animations[1].from(".help_box3", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box1", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box2", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box3", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box4", 0.6, {yPercent: 30, opacity: 0}); animations[2].from(".plan_box5", 0.6, {yPercent: 30, opacity: 0}); animations[2].from(".plan_box6", 0.6, {yPercent: 30, opacity: 0}); animations[3].from(".footer_top", 0.5, {yPercent: 20, opacity: 0}); } //News page else if(path === "/manager/html/news.html") { // Another set of animations animations[0].from(".block1", 0.5, {opacity: 0, yPercent:20}); animations[0].from(".block2", 0.51, {opacity: 0, yPercent:20}); animations[0].from(".block3", 0.52, {opacity: 0, yPercent:20}); animations[1].from(".help_box1", 0.5, {yPercent: 20, opacity: 0}); animations[1].from(".help_box2", 0.5, {yPercent: 20, opacity: 0}); animations[1].from(".help_box3", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".footer_top", 0.5, {yPercent: 20, opacity: 0}); }

Hi @ZachSaucier Thanks you It's really help me and it's work for me but I am facing another problem like animations are not working on mobile version. Not sure why it's happen using the same code. though it's was not working before adding the location. Any idea about that why it's happening. like top section is working and the middle section is not working and the bottom section is working. Not sure why it's happen.

Hey @mikel Can you write some code here plz like how I can write it. I have tried but I can't solve it.

Hi, Her is the code pen link https://codepen.io/zooreact/full/wvBvWPv . Thing is that when I am applying this code for single page it's work firn. But when I am trying to apply it for others pages it's not working. It's look like the Opacity was not count 0 to 1 it's count 1-0. I want to write separate loop for the separate pages. How i can do it?

Hi, I am new here and I have not much idea about GSAP. I have 4 pages website and website have different sections. For example : Home( have 4 section),About(have 5 section) ,services(have 7 section), contact (have 3 section). Now I took the code from here https://codepen.io/PointC/pen/aLxmJp. and modified it. After modify my code look like below. Now i am facing problem when allow this in my pages. I like to break the animation creating a new animation for about us page or other pages. How can start write a new animations for other pages. Please suggest me. You can check the file what I wrote in my script. console.clear(); const threshold = 0.7; // trigger const options = { root: null, rootMargin: '0px', threshold: threshold }; const observer = new IntersectionObserver(animHandler, options); const targets = document.querySelectorAll(".animationcont, .animationnews1, .animationnews2"); const ar = [].slice.call(targets); let animations = []; let count = 0; for (let target of ar) { animations[count] = new TimelineMax({paused:true}); observer.observe(target); count++; } TweenMax.set(".heading1, .n_top_info, .footer_top", {yPercent:0}); TweenMax.set(".news_bottom1", {yPercent:0}); // timeline for each section //home start animations[0].from(".block1, .n_top_info", 0.5, {opacity: 0, yPercent:20}); animations[0].from(".block2, .n_top_img", 0.51, {opacity: 0, yPercent:20}); animations[0].from(".block3", 0.52, {opacity: 0, yPercent:20}); animations[1].from(".help_box1", 0.5, {yPercent: 20, opacity: 0}); animations[1].from(".help_box2", 0.5, {yPercent: 20, opacity: 0}); animations[1].from(".help_box3", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box1", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box2", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box3", 0.5, {yPercent: 20, opacity: 0}); animations[2].from(".plan_box4", 0.8, {yPercent: 30, opacity: 0}); animations[2].from(".plan_box5", 0.8, {yPercent: 30, opacity: 0}); animations[2].from(".plan_box6", 0.8, {yPercent: 30, opacity: 0}); animations[3].from(".f_top_box", 0.5, {yPercent: 20, opacity: 0}); animations[4].from(".articale_box1", 0.5, {yPercent: 20, opacity: 0}); animations[4].from(".articale_box2", 0.5, {yPercent: 20, opacity: 0}); animations[4].from(".articale_box13", 0.5, {yPercent: 20, opacity: 0}); //home end // observer handler function animHandler(targets, observer) { for (var entry of targets) { if (entry.isIntersecting) { let i = ar.indexOf(entry.target); animations.play(); } else { return; } } }; custom.js