Is it possible to Tween a FLIP animation for use in ScrollTrigger with scrubbing?

[SteveS 177 Likes (Specialist)]

I am using the FLIP plugin to animate elements in a grid, but I want the animation to be scrubbed by a scrolltrigger. Unless I'm missing something, I don't see any documentation on doing such a thing, so any thoughts would be helpful.

[GreenSock 18,577 Likes (Superhero)]

Howdy, @SteveS. I don't see any reason this would be impossible. Here's an example of using Flip and ScrollTrigger together although it's not exactly what you described (having a Flip be the thing that's scrubbed with ScrollTrigger...right?):

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

 

Which is from this thread: 

 

If you need more help, just post a minimal demo and we'd be happy to advise. 

[SteveS 177 Likes (Specialist)]

Actually, I have had some luck setting the Flip.from() tween to a variable and using that variable on the "animation" property of a ScrollTrigger.

In lieu of a codepen, I'll briefly describe what I'm doing. If I can't figure it out in the next few hours, I'll throw it into a codepen to give a better example.

Here's what's happening:
1. In the page hero, an element animates in from autoAlpha: 0, and a random yPercent.

2. On scroll, that element expands to fill up more columns in its grid container.

Problems:
I think this is a general GSAP thing, not specific to flip or ScrollTrigger, but my FLIP animation start from the position of the element at the beginning of its from tween (some random yPercent). That means the element animates in, then jumps back up to its from yPercent when the FLIP kicks in. I think the issue is just my order of operations though, so I hopefully I can figure it out by tweaking it some.

 

[GreenSock 18,577 Likes (Superhero)]

Yeah, if you can't figure it out, we'd be glad to look at a CodePen minimal demo. 

 

Good luck!

[scottnj 5 Likes (Newbie)]

I have Flip working with ScrollTrigger scrub. Here is a CodePen example for anyone else is trying to figure it out. It turned out to be easier than I expected. gsap is awesome!

 

See the Pen vYppeBE by scottnj (@scottnj) on CodePen