end a animation loop and start a new animation

[Sujoy]

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 . 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

See the Pen aLxmJp by PointC (@PointC) on CodePen

[ZachSaucier]

Hey Sujoy and welcome to the GreenSock forums.

 

2 hours ago, Sujoy said:

How can start write a new animations for other pages.

What issue are you running into? Can you please create a minimal demo of your issue? The thread below talks more about how to do so:

 

[Sujoy]

Hi,

Her is the code pen link 

See the Pen wvBvWPv by zooreact (@zooreact) on CodePen

. 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?

[mikel]

Hey @Sujoy,

 

Welcome to the GreenSock Forum.

 

For different pages you could build separate IntersectionObserver.js files

with the relevant options, targets and animations for each page.

 

Kind regards

Mikel

[Sujoy]

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

[ZachSaucier]

Hey @Sujoy,

 

You can set the animations based on the page's URL by using an if statement along the lines of this:

let path = window.location.pathname;
if(path === "/first-page") {
  // One set of animations
} else if(path === "/second-page") {
  // Another set of animations
} // keep going as needed...

See https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/ for more info on getting info from the window's location.

 

But with that being said, I think you are going to LOVE GSAP's stagger functionality. It can help shorted your animation above a lot: 

See the Pen vYBRPbO by GreenSock (@GreenSock) on CodePen

 

[Sujoy]

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. 

[Sujoy]

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

 

[ZachSaucier]

Sorry, we can't really help blind. If you'd like debugging help, please create a minimal demo using only the code necessary to reproduce the error (we don't need to see all of your sections, just enough to cause the issue). Most of the time this process will even help you figure out what's going on! See this thread for more info:

 

[Sujoy]

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 :

See the Pen xxbbWOg by zooreact (@zooreact) on CodePen

 

[ZachSaucier]

6 hours ago, Sujoy said:

I just put the code in pen which is not working in Mobile version.

Thanks. What's not working about it? What are you expecting it to do that it's not doing?

[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,