Flip state block is based on GSAP Flip extension. This block allows to make animation from one state to another state. It’s mostly for users with code skills, but there are some predefined styles which can be very helpful even if you have no any technical background.
I think that most common scenario of usage will be floating panel. When user reaches some element, it’s become sticky. Due to our experiments, if your site is e-commerce or affiliate, such button can increase your conversion in few times.
Here is example of default styles for this block. I just placed banner inside Flip block.
When you reach some point, banner goes to sticky to bottom.
It’s not required to use only this style. The idea is that you place inside Flip container your initial state of element and add styles for your animated final state. Plugin will calculate everything automatically and make smooth animations between states.
As it works independently from your item, you can combine it with other scripts or plugins/blocks. For example, if you have cart button, you can make custom animations for placing something to cart.
You can also have different objects for trigger and for animations.
Another very common scenario of usage which I see now on many sites is video which becomes sticky and minified version when you scroll below video. See example below