FLIP animations | HTTP 203
Вставка
- Опубліковано 12 вер 2024
- Cassie Evans from GreenSock walks through FLIP - a great animation technique for transitioning between states.
Purple box FLIP demo → goo.gle/3mRYiBO
List shuffle demo → goo.gle/3xTZ4ob
List shuffle with GSAP → goo.gle/3xVkmlo
List item transform → goo.gle/3xxpgDs
GSAP FLIP plugin → goo.gle/3NW801Q
More videos in the HTTP 203 series → goo.gle/HTTP203
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Also, if you enjoyed this, you might like the HTTP203 podcast → goo.gle/HTTP20...
#HTTP203 #ChromeDeveloper #WebDev
Have been looking forward to this episode for ages, and it's finally here!
Jake, i have to say you've made a "Full Stack by protest" dev who really had no interest in front end into someone who really enjoys the web now.
I've had a play around with the GreenSock lib and i have to say it's really great.
I find Jake's taste for socks simply exquisite.
Should've worn Green Socks for the occasion though...
Don’t you mean “exsquidsite” 😂
I've been trying THIS for a month and almost reached the same solution. Thanks!!
I really hope Cassie stays in the show, I love everything about her so far, also GSAP is so good and so performant that there's little reason to animate things natively, IMHO. Absolutely loved this one!
edit: it's good to know what the lib is doing behind the scenes to avoid some pitfalls, but I thing this is true for every lib
There's another two episodes with Cassie, then I'll need to find another friend (although, once I start running out of friends I'll loop through the list again)
@@jakearchibald The list starts with Paul, right?
Ah a nice comment on the internet. What a lovely thing. Thanks Felds.
@@jakearchibald So called, Micro Friends.
Love Cassie’s work. Made me interested in web animation.
The main problem I have with this technique is that we not always want to rescale the layout. Sometimes we just want the container boundaries to change revealing more content (think AppStore iOS cards).
There are two approaches to solve this problem that I know of.
1. You create a nested transform that nullifies the effects of the outer transform. The problem is that we use `1/x` which is not linear and the animation interpolation will look awful if we won’t precalculate a bunch of key frames in advance. I tried to solve this by doing a bunch of math and dynamically approximating a bezier easing function that would fight this effect. By since we cannot yet have an arbitrary easing functions the approximation isn’t very good...
2. Another approach that I have in theory, but haven’t tested it yet is to animate `clip-path` of an element. The questions here are: would it also be only composing? Would it work well in all browsers (especially Safari, it does a lot a weird stuff when it comes to animations)? How would I handle something like rounded corners?
I love the episode! It touches the topic that I’ve been struggling for months now. Still haven’t found a perfect solution thought...
Unfortunately clip-path doesn't animate on the compositor. It's something I've been wanting for years, but it still hasn't landed.
Amazing content as usual… and TIL moment that now background color transition runs on the compositor. 👍👍
FLIP is one of the most fantastic and useful techniques I've learned for building interactive user interfaces. ❤️
Take expanding a card from a list into a modal, it is a transition that seems so simple and intuitive, but actually not that easy to implement.
After reading Paul's blog "FLIP Your Animations", I successfully did what I thought impossible! Yes, the blog post just lifted up the magician's curtain! 🪄
btw, miss Paul on UA-cam very much, hope to see more videos on he's channel!
This is the first time I could actually understand flip animations - that demo was superb
This was actually pretty informative, thank you guys :)
This was very fun! Is it a good thing, hoping Jake doesn‘t get new friends?
Great episode! Just wondering at 7:37 if the top is 100 and the bottom is 1000, shouldn't the height be 900?
Astute observational skills! That's just me popping in 'magic numbers' and not paying attention. But yes you're right
Guys you are so cool and funny! Enjoyed watching your video very much, thank you! 😋
Are there going to be new podcast uploads to streaming platforms (spotify, etc.)? I've finished the Surma era a while ago and my commutes are awfully quiet now
Me and Surma recorded a podcast recently! It should be out in the next day or so.
Another great one. Thank you both!
!Patch-Surma -- I mean, Cassie -- is wonderful 😁 Also, I'd never heard of FLIP -- I mean, SEIP -- and I may definitely use it someday! (Or should it be SEEP: Start End Exchange Play?)
What about "Start Hindmost Invert Transition"?
SEEP is actually a better name, since flipping things is a common animation already
Bonus points if the mnemonic can be PAUL SUCKS
@@jakearchibald Play And Utilize Linear Start and Ultimate Conditions for Keyframe Sequencing?
SERP.
Start, End, Reverse, Play.
Nice socks :D. Did you want Paul to notice those )?
Hey, I even convinced Paul to give a talk shoeless once ua-cam.com/video/vAgKZoGIvqs/v-deo.html
Great stuff! Completely changed my approach to animation on a browser. I tried and tried to think of with a better acronym, but only came up with IMPA. Is it better than FLIP? No! But in a way it better describes the essence of the technique. You note the (I)nitial position. You (M)ove to the new position. Then (before the update happens) (P)roject the moved image back to the initial position. Last, you (A)nimate the projection. It's visual ventriloquism!
Visual ventriloquism has a nice ring to it
I love it
Please bring back Surma Das on the show.. Really missing him a lot.. He is your awesome partner @Jake Archibald..
Note: Here, I am not disrespecting Cassie or Jake or anyone..
Something like SENT would have been a more descriptive acronym:
- Start
- End
- Negative
- Transition
Hah, that's actually pretty good
does javascritp expose a Vector library ? i mean it probably uses it for calculating positions and stuff in the browser so exposing it shoudlnt be a big ask
in this case a streamlines version might be
new Vector(first)
.subtract(last)
.multiply(-1)
Check out DOMMatrix and DOMPoint. I've been thinking of doing an episode on those.
@@jakearchibald If they're useful for animation stuff outside of WebXr, YES please :)
@@RomanSteiner_xD oh yes! I use them for drawing shapes etc
@@jakearchibald 👀❤
@@jakearchibald Please do an episode! I'm a Senior Engineer and I've never even heard of them until now!
What about animating to/from auto? (I.e. For width and/or height) do we have a good way to do this yet?
Good question! GSAP does actually let you animate 'auto'. Here's a demo. codepen.io/GreenSock/pen/yLKLXPv
But (depending on the use case) you could use FLIP. With text containers it's usually best to do clip paths (if you have the time to get fiddly) or animate the height because of scale messing with text sizing/reflows
This is the solution to that exact problem.
I have a feeling an invisible rectangle that scales to auto can translate the coordinates from auto to pixels.
The name is clearly annoying you Jake so how about this for an alternative: Position Animation, Undo Layout?
#0:36 right: what happened to Surma anyway?
He left Google
@@jakearchibald ah, thanks. Thought so.
So who's maintaining his repos on Github then? I'm mostly interested in the container polyfill 😇
@@CirTap I'm not sure who's working on that particular one, but it's part of the strategy for releasing container queries, so it will be maintained
Lol could tell she wasn't around in the Flash days, "ActionScript 4" haha
She said "Actionscript forum" as in a support forum
@@jakearchibald and apologies.
Nothing wrong with a bacronym
RIP surma, gone but not forgotten 😩
What the difference
video is great but the bit about friends and clothing is ridiculous.
What kind of stupid format is it? Can you just tell about subject without annoying giggles!
Nope. I think you need to find a different show to watch. Here, have your money back.
Apologies for ruining your free content with my personality.
Is a fun animation really the right subject for you?
@@HolgerNestmann Cannabis is not legal in our country. I can't laugh on this.
@@cassieevans7929 absolutely savage 😂