Jump to content
Search Community

how to animate with Flip when I'm using TimeLine with scrolltrigger

Moises Arrona test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

  • 1 year later...
9 hours ago, Didledee said:

Would it be possible to have ScrollTrigger scrub through a flip animation instead of playing it? Meaning I want the flip animation to progress as I scroll.

@Didledee technically, yes, but it's difficult to say for sure if that'd be appropriate in your scenario because you didn't provide a minimal demo. Flip animations are typically VERY context-dependent and dynamic, so I wonder if you're talking about something like that which might make it impractical. If you need more help, please make sure you provide a minimal demo. And it'd be best to start a new topic rather than hijack one that's a year old :)

 

Good luck! 👍

  • Thanks 1
Link to comment
Share on other sites

I'm struggling a bit to see that codesandbox at all I'm afraid. It only loads intermittently.
 

Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: SideEffect(NullComponent)


As Jack said - it's tricky to scrub a FLIP animation because FLIP is a very dynamic process. Flip's basically saying...

Grab the start and end values at that exact time and then animate an element between them

Whereas scrollTriggered animations are pre-rendered. Already set in place. So you'll need to think about what to do if your user resizes their screen in between the page loading and the timeline running.

Here's a demo showing how to scrub FLIP - At the end of the day a flip animation is just a tween

See the Pen vYppeBE?editors=0010 by scottnj (@scottnj) on CodePen



You could also add it to a timeline by storing a reference to the FLIP tween in a variable and then saying .add(flipTween)

If you want more help it would be hugely appreciated if you could start a new thread with a minimal demo (React and tailwind just complicate things for people trying to help) Just some simple coloured boxes on codepen with the bare minimum styling is ideal. Thanks!

  • Like 1
Link to comment
Share on other sites

@Cassie thanks for the thorough answer and the example. This defiantly gives me plenty to work with. In the future I'll make sure to convert all my examples to vanilla HTML/CSS/JS before sharing. Totally can see how all these frameworks just add noise to the process of ya'll helping. Thanks again 🙌🏼 

  • Like 1
Link to comment
Share on other sites

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