Relative tweens are useful when you want to animate a value from it’s current position. Sarah uses the example of animating color. HSL color values affect the hue, saturation and lightness so applying a relative tween to these values can lead to smooth color transitions.
(oriental introduction music)…- So onto like relative tweens and HSL kind of stuff,…this is really exciting.…This is also a brand new feature in GSAP…that I really like working with.…So how would we turn a many element scene…from day to night?…Does anybody have any ideas?…(woman talks off mic)…- Yeah, definitely.…
And so like, when all of those things,…like basically everything in the scene has…to get darker right?…The sky's getting darker,…maybe you like light the lights around it.…But in order to take a bunch of different elements…and make them all darker at once,…one time, like one way of doing it would be to just like put…an overlay on and make it darker,…but then everything is kind of like muddier,…and that's not what things look like at night,…it doesn't just get muddier.…Colors kind of change and shift…while they get darker in that way.…
So, instead of like,…or we could grab all of those things and change them…but we'd have to change each color individually.…So the cool thing about HSLA Color Training…is it's relative to the initial color that it was.…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values