Scroll-linked animations only using CSS?! Featuring Adam Argyle
ฝัง
- เผยแพร่เมื่อ 5 มิ.ย. 2024
- None other than @AdamArgyleInk has jumped on to help teach me about @scroll-timeline! Make sure to give Adam a follow on Twitter and check out everything he's up to (links below).
Animations are part of CSS, but we often have to use JavaScript to trigger the animations themselves. Well, that's starting to change now with the help of @scroll-timeline, which opens the doors to scroll-linked animations!
As of the time of recording, this is a VERY new, and only available behind a flag in Chrome Canary, but that doesn't mean we shouldn't explore it! If anything, it means that maybe we should play with it even more, as we discuss in the video (along with how it works, of course!)
🔥 The awesome stuff Adam is up to
✅ Adam on Twitter: / argyleink
✅ He has a TH-cam channel! / @adamargyleink
✅ GUI Challenges: goo.gle/GUIchallenges
✅ Transition.css: www.transition.style/
✅ The CSS Podcast: thecsspodcast.libsyn.com/
🔗 Links
Chrome Canary: www.google.com/intl/en_ca/chr...
Bramus links mentioned:
- www.bram.us/2021/02/23/the-fu...
- www.bram.us/2021/03/04/the-fu...
- / 1366532027680448514
- codepen.io/bramus/pen/vYypmON
⌚ Timestamps
00:00 - Introduction
00:55 - About Adam Argyle
01:40 - Creating a read progression bar
14:47 - Fade in navigation with scroll offsets
27:54 - Fade an image in/out
34:37 - time range and animation duration relationship
38:56 - Animating a clip-path
42:44 - @supports and @prefers-reduced-motion
46:32 - How long do we have to wait?
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I love Adams energy! would love to see more collabs with him in the future
He's great, and yup, we've got plans to do more together!
Man, CSS is getting really interesting (I say that as a React developer). Really looking forward to seeing what's next in this area.
Petition to rename experimental web platform features to pandora's box model
Thank you for this, was great watching you guys do this and I learned a ton of stuff 🙏✌️
Its literally in every video of yours that I learn something new about css, awesome video Kev
I feel bad if multiverses existed and it doesn’t have Kevin Powell
* our Kevin Powell 😉
@@sarangpratham6965 😎☺️
Kevin the conqueror 🤣🤣
AWESOME collaboration Kev!! Not only fantastic and cutting-edge content as always. Now I also discovered Adam through this one.
I never get tired of saying Thank you here. Keep it up!
This scroll-linked animations... I think the way CSS is evolving it's just so good but yet so fast! container-queries, scroll animations and more... and showcased by you. I never lose the chance to recommend this channel :)
Glad you enjoyed it!
Love the video! It introduced me to this really cool new feature.
It has changed quite a bit since your post and it's even easier and nicer now. WDM web docs have the more up to date info on it (posting a link will probably get me flagged) and I would totally check it out. It is soooooo satisfying.
Woah that's so cool and interesting, would love to have this feature in all browsers in the near future! Thanks for introducing it!
man, what a awesome video,awesome experimental feature and also learned lots from watching you guys takle bugs and problems on the fly
thats really interesting video, good job guys. Kevin ur really motivating me to learn new css weekly.
I can sense Adam's smiling even through his GUI Challenge avatar. It's contagious!
Yeah Adam is the best!
That was great. Really interesting to hear how we can potentially speed up the adoption of certain features too.
As someone who once said "I fell like I would puke if I have to work with CSS and HTML one more minute", your videos have completely changed my views on web development, it used to be this painful experience and is now an awesome puzzle solving activity. Really love all the tips and tricks.
Soooo glad to hear that! Really glad you're enjoying my content ☺️
@@KevinPowell thank you for doing it 😁 by far the best CSS channel there is. Opened my eyes to how interesting CSS can be.
css master nooooo worrdd!!!
keep going i learned a lot from you❤️
There is my Pure CSS Parallax coming. I'm happy. ^^
parallax was the first thing i came up with when i thought of what i could use this technique for :)
Yet another awesome video!!
you are really great tutor, amazing job man
I learn a lot from you. You are great.
Things getting easier with CSS. At first I didn't think it's very complicated to do scroll-animations with Javascript, but I like to do everything with CSS, if possible.
That's a very good presentation by the king of.... oh no. We can't call him that anymore. So thanks to the humble Yoda of CSS. Your padawans are always greatful.
I was looking for a video like this for my project.. there really is a God 😂😂
I've waited forever for this! HURRY UP AND GET HERE!
I wish they just expanded upon the animation spec since it's using animation anyways. It would fit neatly within the same class you're trying to animate.
animation-scroll-timeline: true, , ; and then just have the browser interpolate between that area.
@Kevin the stuff you always showing is really cool that I follow in our UI development. I’m just wondering if you have some guidelines when to use css instead of js. because sometimes I struggle do I need to just use js instead of css. on which I found sometimes the css can do what js can do. but if there is a proper guidelines atleast the maximum capabilities of css can do that will be helpful specially now that bootstrap5 can access the dom. thanks in advance for your answer.
In the beginning, I think instead of doing the offset stuff, if you wanted it to speed up, you probably could have changed the animation instead of to{opacity:1}, it could have been 10%{opacity:1} which would just tell it when you're 10% through #main then make it opacity:1
But then when you get into the start and end, that obviously gives you more power in other scenarios
Damn i need this 😍 hope this gets cross browser compatible fast 😁 awesome css feature
I'm fan of Adam's GUI challenges 🤤
Awesome video!
Thanks for this good content so far. This codepen is still online ? Can you share the link please. Does this css is now usable for everyone ? Best regard
Great video thanks
Glad you enjoyed it 😊
I was watching another one of ur videos..svg series ..u help a lot ..
Glad to hear that you're enjoying my videos!
@@KevinPowell, thank you for the amazing content, love watching your videos! Could you please make a video on the cases when media queries override applied CSS and vice versa when applied CSS overrides applied media queries? I have tried searching it on the web but did not find any useful info. Thank you!
I have a question though, will it be possible to make the page scroll to certain points, like to a specific element or to a specific % of the body?
Naming convention, what about: scroll-class and keyframes-class (or ID). So in the example: scroll-read-progression and keyframes-read-progression
Hello mates. I just love designing its typogrwohy ir webpages or animation anything. CSS i just love it and how things are being developed for CSS its really cool.
Awesome!
This is very cool
Hello Kevin,
Aria label vs Label vs Alt text vs role which is the best to use for accessibility ?
They all do very different things :)
alt text is for images, label is ideally used to label form elements, and aria-label is used if something doesn't have any text... like say an image of a logo which is used as a link to a social network. If you can't see the logo, you have no idea where that link is going :)
@@KevinPowell Thanks for the response Kevin, actually when i am doing accessibility test using aria-label, instead of selecting the it is selecting the hamburger menu and chrome extension is saying it is a "header", similarly when tabbing/jumping to logo it is directly jumping to right side notification bell icon and saying "status".
Can you please help me where am i missing ?
(left side)hamburger menu->logo (right side)notification
As I remember, scroll-based animations are possible in implemented part of houdini? But there you have to write some code. Or am I wrong?
Hi Kevin, can you make a video on how we can hide video controls on mobile? Because even though the controls attribute is not there, when someone clicks on the video, the video controls appear and I couldn't find a solution on google.
Very interesting yet concerned with possible accessibility issues? How do visitors switch it off? The feature I will use is the progress bar as they scroll down, as I have some long pages as my website is mainly text. Another feature was the images fading in from the centre, perhaps to bring attention to something... It's certainly got potential.
Near the very end we looked at how we can include it in a prefers-reduced-motion media query to disable the animations :)
By the way Kevin i have become a big fan of your tutoruals mate. Cheers
I am just at 16:00, so I don't know, if this is coming later, but could you do the reading progress with chapters on the site as well? So for every , start a new color on the progress bar?
oh, that's a super interesting question. It *might* be possible, though probably a little tricky to do. That has me thinking though 🤔
Assuming the number of h2 would be different on every page, the JS implementation of this would probably be easier to pull it off....
Is this faster/lighter than doing the same thing with javascript?
As a learning web dev I'm wondering. Why should I use experimental/beta css features and learn new css syntaxes for something that could be done in JavaScript and be backwards compatible with a whole lot more browsers? Is it just because it's cool "css only" style? Or is there something more to it?
You really shouldn't use unsupported beta stuff
Hello sir,
Any idea why anchor tags do not inherit the font color of their parent by default? I know we have to set the color of the anchor tags manually but I can not figure out why they have designed anchor tags to behave this way? 🤔
I'd assume anchor tags don't inherit it because they need to stand out, since they are different to regular text. And the purple default color helps with that. If they'd just inherit it, then they'd just be black
They have a style on them from the browser setting their color. We want links to stand out, so this is one of the defaults (just like the body has a default margin on it, or headings have different font-sizes, etc).
@@KevinPowell Thank you so much sir for replying!!! Really enjoying your content and recently I have started to do code alongs with your videos from on the first one you have uploaded!!!
@@inklingboi8431 Thank you very much for the reply!!! Both yours and sir Kevin's replies are helpful!!!
How did you use position sticky and overflow hidden together?
Not sure what you meant, Ive never had an issue there?
@@KevinPowell I was referring to this issue github.com/w3c/csswg-drafts/issues/865#:~:text=Currently%20the%20position%3Asticky%20element,hidden%20trick%20for%20clearfix%20etc.
It seems like now we can use them together
Turns out I was too lazy to debug the issue and had applied overflow-x hidden to HTML and body combined... Got it fixed... Here is my Jamstack blog in the making if you would like to see... Thanks for the inspiration singhkunal2050v2.netlify.app/
so for other people in the world won't be able see that progress bar ? because they'll have to enable that flag in chrome?
Something new💓💓💓
Great
Can we set an animation to trigger and run entirely at a specific point in the timeline?
I think the easiest way to do that would be playing with the offsets, though I'd need to play with it more to say for sure :)
I was wondering the same thing. Going by what I've seen so far, I'd say it's currently comparable to the plug-in 'ScrollMagic', but what I would like to be able to do also is have animations trigger and complete as soon as they enter the viewport - a bit like 'AOS' or 'ScrollReveal'.
Great video BTW guys!!😎
WOW
while resizing the screen desktop/mobile, objects should move smoothly without jerking. please help me on this.
Not sure exactly what you mean. Might be easier to share with an example. There is a link to my discord community in the description, might be the fastest way to get some answered there :)
@@KevinPowell hi thanks for your reply. means a lot. When we try to move elements raw to colomn at the time of window resizing in flex box, so when it moves it flicker a bit. i want that transition smoothly without flicker.
"How can someone will become CSS master?"
I have something in the works :)
Too many fun tools that feel so out of reach!
Do not use overflow x/y hideen on body, it does not work on mobile in some cases!
dear kevin, hello community. i could need a little help on a decision. i do since 1999 css - then scss - with latest features to create web applications / decentral apps. i have seen all that frameworks from 960 to bootstrap to tailwind but stoped using it these when i got advanced and when css got grid and flexbox. im fast with my vanilla workflow and produce excellent very custom user interfaces. on my newest team they asked me to go for tailwind for rapid success and i am worried i end up beeing slow and my designs will lose the slickness and the "special" feel by using all that helpers and predefined classes. i am also worried the developers will have to much options with all that modularity to fuck up the minimalism. and i am worried to end up in a situation where a div have 20 classes. and i could not find any articles about combining tailwind + scss. would you recommend me to be against tailwind and just do my work as i always do ? thanks for any suggestion :)
If you're on a team that's using Tailwind, then you sort of have to go with your team. I'm personally not a huge fan of Tailwind, but I do see why people like it. Part of it is peronal preference, but part of it is working how your team is working. As far as using it with scss... it sort of doesn't need to work with it?? Seems like two different approaches, where they don't really need one another IMO.
@@KevinPowell ok, thanks for your opinion on that. love your show and after so much years of working with css, i still learn new things on your channel.
Nice ... 5:52
At first, I was like this video is so long and At last, I was like, whoa this video ended quickly! Really this video went-by like a breeze. Make more interesting videos like this
Why do we specify time-range if the animation depends on the time we are scrolling. And we can just stop in the middle
My progression bar is not working. I am rewinding over and over and I think I have everything correct. Why my bar is not working??? 😠
what is @ ?? can anyone explain
It has been 1 year since this video but the Spec is still in flux and API has changed and polyfill is not up-to-date and so on and so forth...
Specifications
This feature was in a draft specification and has been removed from it. It is no longer on track to become a standard.
Browser compatibility
No released browser ever implemented this feature.
😭😭😭
The @scroll-timeline syntax has been deprecated, but the scroll-linked animations spec is still alive! ( drafts.csswg.org/scroll-animations-1 )
Chrome is actively working on it, with is looking to ship late this year or early next year, and FF is actively working on it as well.
@@KevinPowell I didn't even properly ask the question and yet here we have the answer I was hoping for!
Wow this could get really confusing if you use positioning to move an element/block and then reposition the top of it because of say a header image. The offset could help with this but then you're having to maintain two offsets. One for the reposition of the image and one for the scroll offset. Hmmm. Somewhat annoying.
I'd have to play with it more, but there are probably ways to get it figured out that would help with having to deal with 2 offsets. Custom properties might really help out there, potentially at least.
CSS BITCH! - Jessie Pinkman 2021
You kinda look like mocha joe
(One of the) First!