Search the Community

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