GSAP Flip Tutorial - 1- (Getting Started)

The GSAP Flip plugin is all about seamlessly transitioning elements on your webpage between two different states. It makes certain transitions, that would normally be very difficult to accomplish, a whole lot easier to pull off. And it does it in a way that turns the normal way we animate on its head. FLIP is an acronym (coined by web developer Paul Lewis) which represents an approach to creating animations which are more performant for the browser. The acronym stands for: First, Last, Invert, and Play. It’s really useful for re-parenting elements and changing the flow of the document. Here’s an overview of how it works: We get the initial state with Flip.getState. We then make a state change (add a class or re-parent elements, for example). And then, finally, we make the transition invert and play using the Flip.from method. So, in the Invert and Play stages, since Flip now knows about the initial state and the final state of the element, it applies offsets to the element to make it appear in its initial state and then animates the removal of those offsets to transition it to its final state.
Created by Gregg Fine.

#gsap #flip #webanimation

? New Course Available! "Scrollytelling 101":
https://store.thecodecreative.com/scrollytelling

? Blog Article for this video: https://www.thecodecreative.com/blog/gsap-flip

?Subscribe for more free Code Creative videos: : https://www.youtube.com/channel/UCmOpHGj4JRWCdXhllVTZCVw?sub_confirmation=1

?Join The Code Creative Community on Facebook:
https://www.facebook.com/groups/thecodecreative

? The Code Creative Official Website
https://www.thecodecreative.com/

? The Code Creative Courses
https://www.thecodecreative.com/courses

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬

0:00 Introduction and Overview of the GSAP Flip plugin
0:26 Flip plugin examples
1:20 Code setup in Visual Studio Code
2:17 Installing GSAP core and GSAP Flip plugin
3:30 Setting up the JavaScript code
4:06 Understanding the FLIP concept
6:20 Writing the Flip JavaScript code

▬About The Code Creative ▬▬▬▬▬▬▬▬▬▬▬▬

The Code Creative helps web developers learn the fundamentals of programming, algorithms, as well as the latest frameworks and libraries. You can expect web development content that is fun, clear and concise, and keeps you engaged with visuals and a touch of humor.


▬Social Media ▬▬▬▬▬▬▬▬▬▬

▸ Twitter - @GreggFine
▸ Instagram - /greggfinedev
▸ Facebook - https://www.facebook.com/groups/thecodecreative


✅ Recommended related videos:

Debouncing Explained
https://www.youtube.com/watch?v=F2zF8fu7aG0&t=215s

Memoization Explained
https://www.youtube.com/watch?v=dO9LQsIpavM&t=9s

Sorting in JavaScript Explained
https://www.youtube.com/watch?v=kxUNQtheCxM&t=2s


✅ For business inquiries contact me at [email protected]