Jump to content
Search Community

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

SteveS test
Moderator Tag

Recommended Posts

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

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.


Link to comment
Share on other sites

  • 10 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...