Combining scroll trigger (with scrub) on a timeline timeline and multiple flips with class update

[roshit121]

i am trying to create an effect where the card has an intro animation, then it has a certain arrangement and after some time has an outro animation. 
i want everything to be on a scrub.
for the positioning of the elements i have tried to use the flip plugin. but i can't seem to make multiple ones work on scrub.
everything seems to be playing all at once.

See the Pen xbORgEz?editors=1111 by RoshitShrestha (@RoshitShrestha) on CodePen.

[mvaneijgen]

Hi @roshit121 welcome to the forum!

 

I've taken the logic from this pen and applied to to your 

See the Pen JjVPyxd?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

If you create an arrow function in the .add(()=>{}) it will just run that code when it is triggered, if you directly add it to the .add() logic will make it part of the timeline. 

 

See the Pen LEZbWxE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Also note that I've removed ScrollTrigger. 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects.

 

Hope it helps and happy tweening! 

[roshit121]

@mvaneijgen, thanks for the tip.

I wanted to know if you can store the flip state only after the animation in the timeline has ended.

I have tried using a different approach to this, by creating dummy trigger elements. it works to some point but it creates a large spacing at the bottom which doesn't go away when using pinSpacing: false. 

I also dont know if nesting scrollTriggers like this is a good practice specially when i want to reverse the timeline when scrolling back.

See the Pen pvbNRQd by RoshitShrestha (@RoshitShrestha) on CodePen.

[mvaneijgen]

No you can not create nested ScrollTrigger. The best way I like to think about ScrollTriggers is that is is just animating something on scroll. So without any ScrollTrigger the animation should work how you expect and then all ScrollTrigger is doing is animating that specific animation tied to the scrollbar. 

 

This below part I find really important to understand how ScrollTrigger works

Quote

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects.

 

I've also written a post with this logic in mind, maybe this will get you a better insight now ScrollTrigger works

 

 

Hope it helps and happy tweening! 
  

[roshit121]

thanks for the post, it was an interesting read

But for me scroll trigger is not the issue. The main challenge i am facing is saving the different states for consecutive flip animations to happen.

 

// first animation
mainTl.add(() => {
  flipState = Flip.getState(items);
  cardGrid.classList.remove("is-stacked");
  return Flip.from(flipState, {
    duration: 2,
    ease: "power3.inOut",
    absolute: true,
    scale: true,
    stagger: { amount: 1 },
    immediateRender: false
  });
});

// second animation
mainTl.add(() => {
  flipState = Flip.getState(items);
  cardGrid.classList.add("is-collected");
  return Flip.from(flipState, {
    duration: 2,
    ease: "power3.inOut",
    absolute: true,
    scale: true,
    stagger: { amount: 1 },
    immediateRender: false
  });
});

when i tried doing this instead of  
first animation starts-> first animation ends -> second animation starts -> second animation ends
its  giving me
first animation starts -> animates to the second state directly -> end

so i tried directly using the from tween instead of the arrow function
 

mainTl.add(() => {
  flipState = Flip.getState(items);
  cardGrid.classList.remove("is-stacked");
  console.log("first state")
});
mainTl.add(
  Flip.from(flipState, {
    duration: 2,
    ease: "power3.inOut",
    absolute: true,
    scale: true,
    stagger: { amount: 1 },
    immediateRender: false
  })
)
mainTl.add(() => {
  flipState = Flip.getState(items);
  cardGrid.classList.add("is-collected");
  console.log("next state")
});
mainTl.add(
  Flip.from(flipState, {
    duration: 2,
    ease: "power3.inOut",
    absolute: true,
    scale: true,
    stagger: { amount: 1 },
    immediateRender: false
  })
)

but this also didn't animate as i think i was unable to properly save the state before animation occured

here is the codepen demo without the scrolltrigger:

See the Pen qENqXJZ by RoshitShrestha (@RoshitShrestha) on CodePen.

[Rodrigo]

Hi,

 

I think this is more about the layout of your app rather than anything else. Also in a case like this that you want to create two Flip instances to the same targets is far better to use fit() as @mvaneijgen already suggested, the main reason for that is the fact that for the first instance you get a particular state, then you apply a class and then create the Flip animation, then you get a second state and create the second Flip instance. The problem is that when you create the second state, because the first Flip is a from() instance, the elements are still in their original position, so the state you're using for the second Flip instance is not accurate with the state and position of the elements after the first Flip instance. That's why I think is better, and far easier, to just use a more creative layout and use fit().

 

Here is the demo:

See the Pen OPXbzVW by GreenSock (@GreenSock) on CodePen.

 

It's missing the whole responsive side with GSAP Context, but is the same approach you already have in place, so you shouldn't have too many issues implementing that, I just wanted to create a proof of concepts of sorts.

 

Hopefully this helps

Happy Tweening!

[roshit121]

@Rodrigo thanks. I had tried using fit but couldn't figure out the way, your demo made things clearer.