GSAP Flip Animation

[Fullerfort]

Hi all!

 

I wanted to make a book flip animation that flips like a book and zooms towards the book content. I used a template based off Jhey's flipbook animation

See the Pen VweZryJ by jh3y (@jh3y) on CodePen

where it use scrollTrigger to control the flipping and zoom animation. I managed to do some tweaking but im stuck where one the first page i want to make it that it will zoom further towards page content due to not able to pause the flip animation and do the zoom in and out animation (of the page content) without make it buggy. I'm guessing the page is declared dynamically and has conflicts with other animation.

 

I'm fairly new to the GSAP works and was wondering how to pause the flip animation and do another animation.

 

Thank you and have a great day!

See the Pen abxRgyx by Fullerfort (@Fullerfort) on CodePen

[Rodrigo]

Hi @Fullerfort,

 

Right now you have a logic issue since you're running your code only for the first page:

PAGES.forEach((page, index) => {
  set(page, { z: index === 0 ? 13 : -index * 1 });

  if (index === 0){
    to(page, {
      rotateY: `-=${180 - index / 2}`,
      scrollTrigger: {
        scrub: 1,
        start: () => (index + 1) * (window.innerHeight * 0.25),
        end: () => (index + 2) * (window.innerHeight * 0.25),
        markers:true,
      },
    });

    to(page, {
      z: index === 0 ? -13 : index,
      scrollTrigger: {
        scrub: 1,
        start: () => (index + 1) * (window.innerHeight * 0.25),
        end: () => (index + 1.5) * (window.innerHeight * 0.25),
      },
    });
  }
  else return false;
});

That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO.

 

If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN:

https://developer.mozilla.org/en-US/docs/Web

 

Happy Tweening!

[Fullerfort]

Sorry for the late reply @Rodrigo , was busy improving the code so that it translates well to what i want to do with the book tho its still buggy as heck.

 

Reason is that i want make an if condition is that i want to add additional animations inside each page, tho i must admit I'm not good at creating a dynamic function for that. Based on what you're saying is that i should leave the PAGES function as it is and just do my other animation separately?

[Rodrigo]

6 hours ago, Fullerfort said:

Reason is that i want make an if condition is that i want to add additional animations inside each page, tho i must admit I'm not good at creating a dynamic function for that. Based on what you're saying is that i should leave the PAGES function as it is and just do my other animation separately?

Not at all, just don't include the page flipping on that conditional block because that has to happen no matter what, right? Always create the page flipping animation and depending on the conditional block create the rest animations.

 

Happy Tweening!