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