LIVE: Scrolly Path with Cassie Evans! | GSAP ScrollTrigger | @keyframers 4.1

[Music] hola and amigos and welcome to keyframers i'm your host stephen shaw and i'm your host david corside today we are joined by a new coding compadre animation amigo and boolean buddy uh cassie evans hello yeah i'm really excited because cassie is an amazing animator writer and the speaker and she's she's actually recently joined team green sock working on gsap so this is our uh second green soccer green sock special guest on the show but yeah you can find her writings on css tricks code drops and also her wonderfully designed blog cassie.codes um that's an awesome domain name yeah and she also does workshops on svg animation with smashing magazine and i'm sure other awesome things as well those seem to have been a smashing success uh they've gone really well some really good output uh coming from those um but you can you can find her on twitter at uh cassiecodes and learn more about all of her projects at cassie.codes both fantastic domain names and twitter handles and your your website's just amazing so many nice little touches the little logo animation there um and i'm i'm so jealous of the little avatar animation at the bottom i've been wanting to do something like that for for years i just haven't every that's such a big thing so many people when i um put together that site were like oh i've been wanting to do my own portfolio for ages but i just can't find the time and i was like yeah i was furloughed i was furloughed for a few months so all i did was just tinker around and play and make my portfolio so i think i got lucky so awesome uh well thanks thanks so much for for joining us uh how are you feeling today i am feeling good i'm really excited for this i think this is going to be loads of fun yeah uh you you sent over a really cool animation we talked a little bit um beforehand about uh wanting to do kind of a scroll animation and using over this one by uh tubik um we've done we've done quite a few animations all right yeah by tubic um really really great um animation concepts coming from there um yeah a lot of interesting things going on in this closed brand website design um we've got the link in our stuff there um but yeah uh let's see uh so kind of the most interesting aspect i guess is is this uh like scroll path that's happening yes that's super cool i think that was the thing that drew me to it because um i've i obviously um if you've looked at any of my things have a bit of a thing for svg like that's my my one true love um so whenever i see opportunities to kind of add a little bit of um svg fun into a website i always kind of jump at it and i i recently did a website with them like a path in the background and it was really nice it's like a really good way to lead um like a user through the page without necessarily animating loads of text or things which can be confusing you can just kind of have subtle background graphics animating and i think that's often a lot more effective than going kind of all in with everything animating although that's fun too there's there's definitely balance that happens but yeah so we've we've done a little bit of uh coding ahead of time just just to get a lot of this basic layout and you know image picking and all that kind of stuff out of the way so we can focus a little more on on the kind of scroll aspect of it um so you can see here we've pretty faithfully recreated the the design we've got our nice title at the top we've got a big banner image and then and then kind of these grids of photos that kind of alternate back and forth um and and then uh cassie put together this awesome path for for the background uh what did you actually make that path in um i really like affinity designer um i i was like a long time um illustrator uh fan just because it was what i used for ages and then um when i was putting together my svg workshop um i realized that it's potentially not the most accessible program to recommend people because they've got the adobe mafia pricing um so i yeah i had a little look at different um svg graphics editors and i tried out all of them and that was the one that i actually kind of fell in love with um and i now use it for everything and i really love the the pencil tool there's like a pencil tool and you can just draw lines and it automatically exports them as strokes whereas with illustrator i think you have to make sure you've got exactly the right brush selected otherwise you get variable width strokes and then they get exported out as um like shapes with a fill right yeah yeah and that and that would be problematic for this for this animation yeah not be as easy right uh yeah i've loved uh affinity designer i've been been using that for a while it's it's very affordable um if so if you're just trying to get into svg or anything like that do do check out um affinity in their in their products they they have essentially one for every um kind of adobe program um photos like their photoshop equivalent designers their uh illustrator equivalent and publisher is their um what's what's the name of the design indesign yeah their indesign equivalent um but it's it's super affordable and and the svg output is is quite good you'll still usually want to run through like svgo or something like that to kind of trim things down but um it it feels a lot better to use than than illustrator especially for the prince i found like a lot of people um that used it in my workshops just picked up the pen tool quite intuitively whereas with illustrator it really feels like you kind of have to learn the commands and you have to kind of teach yourself how to do it whereas um affinity feels easier to pick up i think i am an illustrator person myself but definitely play around with it i know i just can't you know knock illustrator i know there are so many alternatives nowadays but that's why i started with like uh over 10 years ago and i'm just so used to it yeah it's um it's hard to give up at all that you're you're kind of fast in so what do we do first well so yeah that's that's interesting where where would you all uh like to start uh cassie you can you can certainly um take the lead there if you uh have anything in mind um i think maybe we could um tackle like the dashed strike bit of it okay it's like a nice nice place to start start in the svg bits itself right so uh we've got this stroke svg element uh down here this path is is what's winding its way down um and and so the way uh you set this up cassie you've got that stroke as position absolute uh within our um and our page container so it's just taking up the full width and height there and you've got you've got a preserve aspect ratio on there i i think that's just the default is that is that right or did you is meat okay so um preserve aspect ratio in case anyone doesn't know it's quite a tricky one to wrap your head around um it's kind of i like relating it to background size and css so um the x mode and y mid values you can say x min or x max or x mid um and that positions um the part of the svg with the the gubbins on in the v box so either kind of to the top or bottom um of the y-axis or left or right of the x-axis and then the um word value like the second value is um either meat or slice and meat will size up until it meets the container so it's kind of like background size contain um whereas slice will size up and then any excess is sliced off like background size cover nice and you can also say none and then your um svg becomes not scalable in the way that you would want it to be it gets very squishy right it gets very squishy yeah uh that that's a bit more uh like just adding none as preserve aspect ratio is a bit more like a regular image in in css when you set like a width and a height of something that's completely not its aspect ratio and it kind of squishes and changes shape um to fit that which sometimes is what you want but for something like this i could actually see that working since we're trying to get it to like fit the kind of vertical um setup of this um but you know it would certainly make the path a little less loopy um hey thank you so much christopher uh she just donated uh ten dollars um that's very nice of you awesome thank you hi chris um uh so i was showing the the spec uh for preserve aspect ratio using an app called uh dash um that's a fun little little app for referencing documentation i've got svg spec in there css spec and mdn docs and all that kind of stuff it's very very helpful so are you wanting to just go ahead and make it a dashed line or are we animating it all right yeah let's make it let's make it a dashed line because that's a nice place to start so if we want to make it a dashed line i've got the world's clickiest keyboard sorry it's just really loud it's telling me yeah it's real loud um yeah it's a mechanical keyboard that looks a bit like a typewriter ah nice and i realize it's like right next to my mic apologies that's all right that's all right um so we have the stroke dash array um attribute and i don't actually know what the numbers are inside it do you know whether they're units or percentages uh they're actually units um i believe um but there there is a way to get um get them as uh like essentially percentages um so yes dash array a list of comma and her white space separated length and percentages so i guess you can do both um but i think browser support for the percentage one might be um might be tricky but yeah typically you'll just use like a unitless kind of kind of value hey cool yeah you can use percentages that's cool um yeah yeah i think i think that uh along with like the path length attribute um is is probably a lot more common now um we've used path length uh several times before um and if you set that change like one um you can you can get a nice uh easy to use um value yeah okay that path length is a wild trick i don't know if shaw pioneered it or if it was from somewhere else but just setting it to one makes things so much easier yeah it really does when you're doing the line drawing kind of kind of technique which we'll be doing kind of part of that um here sort of yeah but yeah we'll we'll uh get to that although i did find um during one of my svg workshops because i talked to people about that and then we did um we did animating strokes with css and then animating strokes with um green suck and if you have path length set to one on a path that you try to animate with green sock it does not like it so it's it's a clever trick but you need to keep it in css world yeah yeah uh well yeah the good thing about about gsap is it's going to calculate that path length automatically for you so whereas if you're doing that in in css you kind of need to like use javascript to get the path length and then you know either use that as a css var or something something like that to actually set that in in css yeah and then you end up with loads of weird magic numbers and your code if the path length is like three million and two hundred and sixty five point seven three nine something so many decimal places so many decimal places gets really confusing yeah i do appreciate gsap doing the hard work for us there yes yeah i appreciate gsap doing maths for me because that was never my standpoint at all uh well should we get into uh gsap here yeah we can do so i guess the um best way is to just like start animating a path so let's um let's actually take off the straight dash array now we know how to do that we're going to take it off and we're just going to start with like a normal path and then we can animate that yes so i've got um gsap imported from skypack uh down here at the bottom we're we're just we're we're not using um any of the any of the extended gsap uh paid plugins for this right we're using we're gonna use drawer svg draw svg all right okay so that's a yeah that's um one of the paid plugins all right part of club green sock but we're also going to use scroll trigger which is a plug-in but it's for everyone yes yeah we have the budget for it we just got permissions everyone has the budget for scroll trigger it's free oh okay there you go uh it's awesome yeah i'll reference those uh plugins and also everyone can use all the plugins on codepen anyway even if they are part of club greensock everyone's in club greenstock on codepen that's awesome uh so let's see what what's the scroll scroll trigger plugin yes scroll trigger with a capital t okay all right uh so i've got gsap and draw svg and scroll trigger in there you're just using uh the main library you can import skype like that otherwise um here is a helpful uh gsap starter template uh yeah um so what's the reason that you're importing using skype and copen instead of the um the little codepen menu where you can add javascript libraries is it just to get the invisibility of it yeah yeah i just i like i like using imports in that way because it's it's a lot more like visible what you're what you're using and all that but since since we are um needing the extra plug-ins and stuff like that we can just um import it uh so i've got it in the add external scripts and and okay cool setting now so gsap should be available um we'll do constell new timeline i'm very unfamiliar with with the gsap 3 um syntax is it is it we don't even need a timeline right now we can just do it do a little tween all right so um if you say usap.from from then we can change things to a timeline a little bit later um yeah so is it stroke that's the svg so we want the path itself that's right strike yeah and then we've imported your spg so um you say draw svg svg is all capital um and then zero percent yeah that's great it's going to do it real quick because the default is 0.5 seconds for duration so maybe put the duration to like two seconds 10 seconds oh without the s and it's just a number okay yeah just 10 maybe yeah go nice awesome so you've probably done stroke animations in css before on keyframers i imagine you've done loads of them yeah we've done a few yeah the 2020 uh one was was a great one um but yeah with with gsap it's it's handling all those path calculations and uh the draw svg plug-in um just takes that takes that away um yeah and you can kind of do um like slightly um yeah like slightly more complex um path animations because you can specify like um from start and end values i have i have to actually go into the docs to find exactly what the syntax is i don't have it all in my head yeah um so yeah for instance you could say um let's say let's do a from two tween so a from from tween in green circus basically saying animate from these values to the values that are already specified in the code um if you do a from two it's saying animate from these values we're giving you to another set of values so so i uh changed it to just ten percent using from two so zero percent to ten percent and that's a very slow duration um but you can you can see how that's um stopping much sooner than the end there yeah and you can also pass in um at the moment we're just saying like we're giving one number value percentage value you can pass in two numbers so you could say um for the start say um zero percent ten percent oh right to give it an actual um yeah and then you could do say do 90 100 for the next one so that should draw a tiny bit of the path ah yes so the path starts the bit that you can see starts from zero to ten percent of the length through the path and then it animates that part of the path along towards the end so all of this stuff you i i have tried to do with css before and you can get there with like very clever um use of dash offset and straight dash array values and kind of tweaking things around but it just makes it so easy and so intuitive with your yes oh yeah that's that's awesome i like that it's really cool isn't it right it really makes me want to do um animations of like a little worm every time i see this i'm like just keep the little one awesome okay so we've got we've got the the basic idea of the stroke animation so if we go back and look um i mean it looks like it's just filling in the entire line um so that that's that's good um that makes that makes it even simpler we can just leave off um off that um and if we just if we just do from um from zero then it will draw out to 100 automatically because that's what it is in the code oh duration did you say 10 yeah about about 10 is probably good for the length of it but you see what this is doing is um it's at like offsetting the path and it's this like stroke the dash of a stroke of the path so if we were to go into the path again and we were to say stroke ashuri i think that's how you spell it always it always bugs me that it's not dash dash array dash uh like kebab uh separated there so you can see that this is it's just kind of ignoring that it's either ignoring it because i've spelt it wrong or it's ignoring it because of green suck let's have a look i'm going to uncomment that yeah uh it's it appears for for a second um with with the proper dashing so how do you how do you do the how would you handle the the dash um with with so um because we want to draw in the stroke i think that the best way to do it is to have um a dashed path and then have a mask and animate the same stroke within that mask and then the mask will reveal the dashed stroke underneath so we've got a kind of combo stroke animation and masking which is pretty cool yes uh so right so i've wrapped our uh our stroke in a def um element this basically is uh just a an indicator that this spg shouldn't be directly rendered um and and so this gives us our stroke there and then if we want to actually render it we go use x length x link href equals stroke and that should give us the same effect there yep cool all right um and if we wanted to do a mask i always forget all the syntax but i know there's masks and i yeah i always get confused with clip path because the crit path how you reference it and how you write it there's like camel case and kebab case and i always forget which ones which yeah so right so we would probably want to use a clip path here not not mask right oh no we want to use a mask because we want to do alpha values okay okay i think all right so we'll do we'll do mask let's ask all right that's great and we'll do we'll do the same kind of thing here where we're we'll we'll use uh the use element to duplicate that uh svg path got that there um so stroke mask let's give this an id of the dashed oak right um and then we'll move our stroke dash array down here give this an id of um mask strike mask mask strike because it's not a mask that's the marker yeah uh and then down here we'll say mask equals url right yeah yes yeah all right so in theory now we can say um mask stroke here in in gsap and we'll hey something's happening it's not refreshing for me uh so i i activated the run button you might need to uh refresh or just click the run button um when when we're animating with javascript it's it's kind of nice to um to the pin settings behavior turn off auto updating preview so that you can just trigger it um when you want um sorry that doesn't look like it's hearing let's see i think the good thing is that because we've got the stroke color set that is like gray oh so we can see that it is being masked that's really good um let's say um because in the mask we actually want the stroke color to be black right yeah that should that should help us get it rendered fully let me do a slower duration there because that's no way we want it to be white yeah because we want it to be seen as the strike draws out let's see so our our effect is not working so it's probably because we're trying to get clever with using use we could try and not be clever and just use the paths yeah and then we could extrapolate it out to use and see if that works oh and i'm doing stroke color that should just be a stroke really quick by the way fun question in the chat um monday asks for svg animations and animations in general is anime.js a good alternative to green soccer gsap and i i basically said you know try them out both see what works for you um you know not for spg for animations in general totally try them out and see what works for you um anime doesn't do anything to um make sure that svg transforms get handled consistently across browser and greenstock does loads of stuff which is why i use it because svg transforms are super complicated and stuff it's handled differently all over the place um green sock also like gives you the option of when you're setting sensors of rotation you can choose to rotate around a certain point on the svg canvas or um a certain point on the element itself um and no other animation libraries um give you that so go ahead and try but you'll definitely run into issues down the road if you're using svg yeah from from what i've seen anime is is good for like creating elements and like animating those like anime has some built-in methods for for that kind of stuff like um you know making like a splash kind of effect with with svg like confetti or something like that um whereas with with gsap it's more about manipulating an existing um dom setup um or numbers in general really right because yeah he said good with them like canvas and webgl stuff and all that as well let's say yeah no i i think i saw this somewhere a bit of a side topic but i think there was a way recently added to browsers or at least within the last year or two where you could actually have elements transform relative to themselves rather than the svg document now obviously it's really really cool um and that does mean like on projects i've worked on projects before where um for whatever reason the client doesn't want to use um much javascript or any javascript libraries like it's very stripped back um and i've used um feature queries and transform box fill box for svg animation so that means you don't get svg animations in all the browsers and you only get them in the browsers that support buildbox and hopefully they animate consistently cross browser the issue is that as it's getting rolled out in browsers there's always going to be like inconsistencies um when it's being rolled out so there have been a few times where i've had things kind of spinning around here instead of spinning around here um but i think it's like the best way to do svg animations with css at the moment that's awesome uh literally the second link i saw when i googled it was your example transform box field box really really awesome example yeah yeah and yeah that that works great yeah yeah yeah green green sock is going to tackle a lot more edge cases than just the transform origin but it is really nice to know that you could at the very least have that um as a backup yeah i think like if you're if you're happy to only have your your svg animations being like little progressive enhancements and using full box is really good yeah it's my secret i'm never happy and and you can and you can target me they're gonna have it everywhere and you should be able to target that with ad supports um oh yeah let's have that happen in supporting browsers all right uh so it looks it looks like the mask stroke setup is is working um now is it working yeah uh you might have to click that run button um just staring at the same screen yeah uh hey we were trying to be too clever well you know i think we were probably just missing some specific attribute or having too many attributes on the on the use uh reference um itself um or the don't tend to use use a lot personally um [Music] um i think it's it can be really cool in some cases but there have someone raised like a thing about the fact that it can be less performant than using um just kind of standard svg dom elements um because the browser has to like calculate and think a little bit more um yeah and also like sometimes for animation it can be a bit of a pain because you have to work with the shadow dom which sounds really cool but it's not cool no no it is not it's like the coolest sounding thing that is terrible it sounds nightmare inducing and it probably is uh well so let's let's get into scroll a little bit here so we we have a mass stroke uh animation how would we tie this to like as they're scrolling through the um through the page element say so we have um i'll decent type in here um you've included scroll trigger right yes so we're going to say scroll trigger um we're adding a scroll trigger to this tween um and now i like one of the coolest things about scroll trigger is that it's actually really performant because um it doesn't matter how many scroll triggers you add obviously if you're animating everything and adding scroll triggers to everything you're gonna have a performance problem but um all of the positions are calculated um from the get-go so the start and end positions of all the animations are calculated and then they're compared to the scroll position so we're not kind of doing this on the fly as you're scrolling it's pre-calculated which is really nice so um for scroll trigger you say um let's say what our trigger element is so what's our our main element we've got like page page yeah is our is our container there wait so let's say page um okay um so under the hood green sock uses um query selector as well so you can use any css selector you want which is cool because if you if you want to make things complex and choose all the images that are inside a certain section that's also a sibling of another section you can do that um and it and it catches the eyes a little bit right i think so maybe um so oh we can say [Music] let's do a really simple one from the start we'll just say start from the top this says when the top of the trigger um hits the top of the viewport um and then we can say end when the bottom of the trigger hits the bottom of the viewport um and then that's a typo but we can take um that out and just do shorthand um but just so you've got an idea of what that value actually is um and what we can also do is we can say um mark is true for debugging which is really nice because you can kind of see what's going on um so if you run this now hey look at that yeah so as i as i scroll down and the the line is kind of drawing now if i go backwards does it trigger in the same way it does not and you'll notice that that is triggering um just by duration there so it's triggering at the start but the duration is the time that we've set um and now what we can do instead of having duration be the time you can set scrub tree and then that does cool scrubbing with the scroll as you scroll down yeah that's a bit more um yeah so because of all the looping it kind of goes out of viewport a little bit at the start you might need to adjust the start and end values a little bit right so what we can do um or are they easing right the easing might be so there's no easing this is this is because it's rubbing right no it's yeah now it's attached to the scroll so it's your like user input is technically the ease you can't really add an ease to a scroll trigger um but what we can do i think in the demo though it started like some some way down the path yeah so we could say start [Music] when 25 higher than the element um hits the top of the viewport so it's already gone like a quarter of the way maybe if we do that adjusting it a little bit here just based on my viewport um yeah that's that looks good yeah so that's already kinda and then the bottom i think we're missing a little bit um here so we might need the same kind of adjustment for the for the bottom you can do relative values as well so i think i always forget whether it's equals plus equals plus plus equals and then you can add like a number of pixels or a percent onto the bottom so we could say like 200 pixels maybe i think you say pixels or percent maybe you can do a percent that's more like the sense yeah that looks like it give that a go and that will move the marker further down so i think we can see if you scroll down now yeah the markers kind of added further down the page so it adds a bit of padding i'm adjusting the top value because it seems to be um like going a bit too too quick um playing with those values to try and get it to match up with the but i think this is the cool bit about scroll triggers like i've i've used intersection observer quite a lot for doing um like scroll triggered animations um but it's not as easy to like quickly kind of change things and tweak values and you can't kind of sync things to scroll unless you're kind of quite clever with javascript um so yeah it's just quite nice and intuitive i think oh you know what's also fun is so we've got scrub tree and that's like it's nice it does what it says on the box like it's syncing it up to the scroll um but it just feels a little bit too closely synced like it's a bit gamified it feels like kind of jerky um what you can do is you can say wait for a few seconds um to catch up to the scroll bar um so if we say scrub scrub two it will wait two seconds to catch up to the scroll bar and then if you scroll down when you stop scrolling it kind of catches up for a couple of seconds which feels a bit like easing which is really nice it's nice is it is it like a lerp effect yeah it's like a little little look application according to offer in the chat the default value for scrub is don't want none yeah default values don't wanna exactly i think it's just siri yeah uh awesome um and and adam uh in the chat is asking about uh responsiveness um with with scroll trigger i i assume um yeah so you can do um i don't know the syntax for it off the top of my head but you can do match media with scroll triggers um and we have a little look in the in the docs so you can pass in different scroll timelines um different values for different um media queries it's great it's pretty new scroll triggers so yeah i'm still kind of like getting my head around it but i've used it on a few client projects now and it's like every time i use it i'm just like oh this is so easy yeah yeah i love i love the setup of it i i haven't gotten uh too into the into the syntax yet um so i'm playing around here um so yeah uh that that's looking really good we've got like you know 75 of the animation um right right there and uh david i notice i i think i think you did that um with the uh title at the top yeah yeah so um there's a whole lot of interesting things going on there um but that's css only uh right so right i want to know what's going on so the title at the top the way uh cassie and and keyframers slide in that looks like the y is getting cut off a little bit but that's okay i was i was wondering how you were gonna do that because um i usually if i'm doing something like that i lean into like spg masks and i just like put the text in the svg because that's what i'm used to but you're using so so we have a little trick it's using and you could use a pseudo in elements but we're using two elements in this case if you just consider like a a revealer like parent element in the revealer inner which holds the actual text and you put overflow hidden on the parents then you could just transform translate y and have that slide in and out which is also why the y is getting cut off there on keyframers so it looks like kev framers we have to hire someone named kevin or something to really complete that but yeah yeah yeah it's it's it's tricky um uh well yeah i think i think you had a little padding on the bottom and then i guess it would show you further down yeah that's what i'm working on here um a little bit uh but trying to add the padding without like creating the space in between the elements so doing a negative margin there but some the right magic numbers for it um awesome yeah and now i'm also using intersection observer which has been a huge pain it still is we did an episode on it um yeah i still don't have it completely right all right are you trying to what are you trying to trigger so i'm trying to trigger an animation when the revealer elements are in view and that's all working splendidly except for whatever reason some of the elements are not being observed like you could see some of the captions are animating just like they're supposed to but the ones next to them are not which is really weird i don't like this api but well this is this is an intersection observer have markers tree that you can add because that's really useful well i'm thinking this is where uh gsap and scroll trigger would would definitely be be helpful um please show me show me the alternative because i want to throw intersection observer in the trash uh i just wanted to yeah okay right next all right so the way the way david was triggering the animation so with observer um each element when it's technically intersecting or in the viewport adding a visible data visible class to it so we could do the same approach or we could we could animate it completely within within gsap and scroll trigger so revealer inner is really what we're wanting to animate um so we can get from and we'll do y 120 rather than the um and the css keyframes there um so g tap from and then we would do the same kind of scroll trigger setup but we're not doing it with page we just want the trigger to be the element itself so if we leave an element off is that the right approach with scroll trigger let me see sorry i was trying to work out how to do this the straight animation with like the dashes yeah but but we can add that at the end let's see i don't want scrub that's the kind of cut off text um wrappers there david added um so we would just do start uh we would probably do more like start center for those right and enter i i don't know um the right syntax there so the y value is wrong um you can do um you're just passing a number so you can also do y percent with green sucks so that's right this and then you could say 120. yeah jack doyle is saying do a four each to create a scroll trigger for each which makes sense i think so like document query selector all and then we'll do this and we can do raid you can do you can do that uh what if there's a better approach please uh interject uh um go on with what i know um so i probably do um so are these the are these the images or is this the text that we're doing the text is that right david you wrapped the text in these revealers i did yeah not the images but we could do that um yeah we could totally do that should we let's do it you know just because if you if you're all my copy paste is so broken on this keyboard no i think why not so for each of the figures i'm going to just add that revealer class and it is a harmless class it's not going to add any special styling or anything um bleach i might type on my left wacky black laptop over here for each i'm trying to do like tweens and gsat together and javascript i'm just scrolling back and forth between this this is such a cool effect it's got great wait are we both working on the same line here uh it might have been um hopefully it's up now yeah that works so one thing that i wish gsat had now that we're migrating to um animating revealer in or within javascript um just having and i i guess you could do this with variables too but just having those css variables in the css and you know able to reference them etc that's pretty nice um yeah you can animate css variables oh okay yeah you can you totally can um michelle bark has done a really good article recently on that what's going on here yeah what what have you done david i did nothing except out of the classes that i said were harmless i doing a little damage control um so all right maybe i'll take the revealer classes off the figures then yeah i think we have to wrap the image itself in that um makes sense well then i'll go ahead and do that all right so they're off the figure and i'm going to put them around the images themselves instead except i don't think that that's the broken part i think the revealer inner is yeah uh because they're being transformed okay taking them off the images too well so yeah i think what we have there is the revealer inner has the animation on it so we'll we'll take that out right for now and yeah i think that i think that got it but we're missing our trigger um i just want i took out the historic animation just so that i could see where the markers are for do you reveal it in a bit right um so for the do we need to add the trigger as the l um the element i think by default it is already that okay no it does it does need to be oh here we go so um oh but start um yeah what would be the right start value there because we don't necessarily want it triggering when that when that element is um okay there we go that's better yeah there we go so that should be when the center of the um element hits yeah yeah the center there we go oh that's so nice it is very good and then we can do you can do toggle actions as well so i always have to look at the toggle action stuff so toggle actions controls like um how the animation plays like when you scroll back up and scroll back in um so let's have a little look i think what we can do here is i feel like that's what caused the uh well you were adding it to the um to the figure itself um than um wrapper inside of it that does it i've got it added to one images so we'll first image here properly oh the toggle action so that would um been in the chat can you fix the y not completely showing by giving it a bigger line height that should help oh i suppose we can yeah i know i sort of like have framers seems to be triggering uh the maybe the toggle actions yeah i think hey there we go that's cool there we go um the image that that is nice and you can change the toggle actions depending on what you need like this is currently saying that it will play the animation when entering um and then pause it when leaving down the bottom i think and resume it when i'm entering again backwards um and then no action um when you scroll all the way past the beginning toggle actions really confuses me but it does make sense and it's one of those things that like you know when if you haven't looked at it for a while it completely breaks your brain but after you've been looking at it for like a whole project by the end of the project you're like oh yeah totally understand uh do you know why the image is not um so the the animation does work like when you scroll past it um i just have a wrapper on the very first one um the very first one in the grid um that revealer class so what the first image the first image in the grid there um if you scroll if you scroll past it you can briefly see it like animating in um i'm just not sure why it's triggering oh yeah i see okay so we could do i probably i would do a separate one for the images so this is like text right where have you done the image one um the first two in the grid should have that um that just the same add the revealer right the same the same revealer and revealer inner classes let's do a separate one for the images maybe okay killer image we'll set that up as a separate one at the text for enter i'm copy pasting i wonder whether images will need like different start and end values uh possibly do something like opacity zero and y percent so it's a little a little different oh i think on the site they were kind of scaling as well slightly and they're inside bigger elements so we could scale the images uh but we need images take the markers off the other ones as well so you can see what's going on so we've got a lot of markers right now yeah so we probably want it more more like center top bigger a little sooner yeah we could even keep percentages down as well so um yeah when top maybe even top is like 70 of the way down from the top of the viewport yeah that that looks like it's working well um can scroll triggers have delays random question um so the delays like time and scroll trigger land is based around position so you can set um like the end or the start like further up or further down the page and then that will create delays um will kind of change how long an animation plays for that kind of thing gotcha because so the secondary title where it says kev framers um i want that to have a little bit of a nice dagger but just a delay so it shows cassie cassie evans and then kat framers under that yeah um but delay doesn't work because of the way we're looping through them like that i don't okay so you're you're doing yeah yeah but guess that doesn't work yeah i'm not sure how yeah i'm not sure how you would do that that's a puzzler i'm gonna have to ask someone on the gsaf team yeah wonder who i could i'll definitely um go away and figure that one out yeah well we can we can post in the in the gsap forums yeah i'm sure that's been asked before um maybe i don't know all right so i pop into the forums from time to time it's just a wealth of information i really love the forums it they make me so happy like the vibe there is just so nice it's like stack overflow but the people aren't horrible to you i answered the question for someone the other day and they were like you're my hero i'll never forget you it's just like ah that's so nice were they trying to save the world with animations or i'll never forget so one one thing that was pointed out in the chat um the things kind of disappear at first um or or like you you see the non-animated version like appearing and then it yeah and then it uh and then it pops in um so one one thing i've always done right one one thing i've done um well it's it's like the flash of the unanimated content since we're using like from um and animating it to a different state you see the original state and then gsap loads and kicks in and and and then you get like the the correct state um so one one thing that i used to do in that in that case on the body adding a just css animation like a fade in animation if javascript doesn't load doesn't matter the body's still going to fade in but it gives you enough time for like gsap to render and load and get in that in that correct state so that you can have everything ready there and you could um set like a class in um in gsap so when gsap loads like it it instantly you know makes the body visible rather than animating um but that's this is just a simple quick approach for that there yeah i usually do that too hey that's it's nice we've got got a pretty nice pretty good setup happening here i'm gonna try taking off that and then i'll add a a revealer to the banner as well i believe the original animation banner no the banners there that's okay all right yeah fine yeah uh so um we're pretty much there with it um i want to do a little extra animation of the the dashes along that line oh yeah oh yes yes for sure did you figure out that that aspect of it um yeah i'm sorry uh and and david in the chat jack is uh is saying to keep the delay try restart as the first part of toggle actions so if we say res restart here um uh what what's the targeting class you were doing oh man i had a copy pasted page title dash secondary page title secondary let's see if that does anything no nope uh let's see page titles okay right um let's say let's just take off the toggle actions for now and see if that's just interfering with it yeah i still got so much so much fiddling around and learning to do with um toggle actions and sculpture here the i and i'll just add a delay based on the eye to make sure it's classless back there oh because it's not it's not classless dot con this is it it's j class list functions there this dot has is that right no it is contained um so yeah the delay is not not working there even if i just force it got the toggle actions commented out i removed foreign double dash dash how do you pronounce that test dash we're doing css variables for you david i i greatly appreciate it i have a soft spot in my heart for css variables it's so good because you can like then just use that everywhere wherever and it kind of cascades just super nice oh no wait we don't want we want dash offset to be a variable silly so let's look at what got offset work i had a nice clip path animation because i felt like it oh nice yes nice how did you do that with um just css clip path yeah i stuck to what i know i i really like um that clippy editor oh yeah um with these rectangular clips i think it's almost muscle memory for me and shaw to just do that but otherwise we do spend a fair amount of time in that clip path that are really really useful yes yeah we're doing anything more advanced yeah and then a simple rectangle yeah offset wrong looks looks correct what's the uh what's the intended effect there uh get like that oh it is it is happening um it's just very quick let's say duration oh oh yeah because we haven't added a scroll trigger there we go that's working awesome i'm going to add the same scroll trigger to that as we've got on the mask strike i'm just going to copy paste it so simple my typing abilities just go out the window as soon as i'm like live creating this cut suddenly can't spell anything can't remember what anything is it's a real thing same so as soon as you've got scrub enabled obviously you don't need duration anymore because it's tied to the scroll oh nice yeah that's that's such a cool effect hey look how cool that is that's really awesome so this is another thing to kind of um i mean i guess this is showing off a few things it's showing off the fact that greenstock can animate css variables which is super cool because if you wanted to animate a css um variable and then use that variable in loads of different places um it would kind of cascade all over the site which is great and potentially very dangerous doing doing that kind of approach is is not going to be as as performant as a as a regular um gsap animation i i would assume because of the cascade and because like where the css variables can be used and how the browser has to recalculate that um yeah but it is a great way to integrate uh gsap with your with your animations but also i mean this is this is also showing off like the fact that we are using draw spg here which makes makes things like really really super easy for you to do stroke animations and it gives you all of these um different kind of ways that you can set it up like we did the um animating a tiny part of it along the path um but you know you don't need your svg to animate svg parts you can um like directly target the attributes it'll just be a lot harder work if you want to do anything super fancy with it but yeah just the fact that you know the ability to animate whatever attributes whatever numbers you want is always there for you yes yeah well that that really came together it looks really good yeah it's awesome we smashed it yeah great great work everyone teamwork got it um so yeah that's that's about the the whole the whole animation um you know there's plenty of other little touches that that happen there's there's footer and all that kind of fun stuff happening in there but for the core effect here we essentially have let's see three main animations um that are all happening with with gsap and a few extra little touches that david's added in in the css as well um so the first one here see we've got our our mask stroke and this is what's actually drawing the the stroke in the background so as we scroll you can see the stroke kind of coming along with us um just kind of trying to summarize since we've bounced around uh so many so many times um so this this mask stroke is just a path um that's kind of uh using using mask um on the real visible path that's rendered down here um so that it draws it in place typically with like a line drawing technique you're just you're just gonna animate like the stroke dash array or use uh draw svg um in this in the same kind of way but since this is a dashed path we kind of need to add this extra mask layer on top of it to make sure that it it draws it correctly and we've got that triggering with scroll trigger so it's tied to the page element that's the kind of container there and it's starting a little bit earlier than the top we've got that negative five percent so you can see the path is is already a little bit visible and change that a little bit too to get more of the path uh visible and then as we scroll it continues drawing all the way uh to when we reach the bottom of that page element with a little extra addition in there to keep it scrolling so that uh the line completes itself and that is super cool um and and we have the stroke itself um animating so this is the this is the path that's getting masked to be drawn in and cassie set up the stroke dash offset with the css variable just to show off how css variables can be used with gsap and animated that way we could target that property directly but here it works it works really great um and what that does is kind of gives that marching ants effect you know like when you're using a selector in a photo app um to to show and to uh just give a little extra movement as you scroll and that's that's super cool turned out really nice uh with the same kind of triggers there that's that's really awesome um for for all the like text animations we have this revealer and revealer inner um wrapper that david set up and all that's happening with with that revealer has overflow hidden on it and that's that's really the important bit and then the inside bit revealer inner um we're animating each of those so this is a gsap util two array um it's basically an internal um util i i would imagine um yeah i i really like them there's quite a lot of utils but i've been kind of leaning into them quite a lot for creative coding stuff recently because they've got lots of like maths things that do quite a lot of heavy lifting for you uh but this basically does document.queryselector and turns it into an array so that you can use true array functions on it like for each or map or whatever so we've got each of those inner elements being targeted and then we're pushing that down y percent 120 um so that it's that it's outside of the overflow hidden container and whenever it's in the viewport in the top of it is in the center of the viewport triggers that animation thanks david for updating those uh captions for us i had to yeah and uh and yeah that's just so cool and thanks for getting those those toggle actions um in place um properly and then the images it's it's basically the same sort of thing but we're targeting them with a different class um actually we could have done the same class and just targeted image dot reveal image um or whatever but this is a little bit easier and so we're doing opacity for those as well as like a bit of a scale animation happening there so yeah this is a a great example of scroll trigger how we can get it to integrate in in a page like this to add just a little bit of dynamics on on a page as you scroll typically you don't want that to be um too heavy like you don't want to animate too many things like tied directly to the scroll or like too many things animating in and out as you're scrolling because that can be pretty distracting um but something like this where it just kind of gives a little little oomph um to the to the elements as they as they come into the viewport i think that's a really great approach yeah and i mean as as always prefers reduced motion is there if you use it yes right match media is is your is your friend for scroll animations um targeting targeting them to get get values right for smaller screens or to uh disable for prefers reduce motion i think we've done that in one of our in one of our videos um definitely yeah i think so i wonder if gsab has any utilities for that too that would be really easy yeah i it's a thing that i um i would really love the ability to say like if if the user has first reduced motion set um either play this animation or like you know maybe scroll this animation to the end and stop it or play this one faster because i think that's the thing with prefers reduce motion there's it is reduced motion that that is the thing and i have in so many sites because i've run out of time just being like if the user has preferred reduced motion just like yank all the animations out no animations for anyone um and actually you can you can do like capacity fades and you can do small animations and kind of micro interactions it's just kind of big swipey things that trigger people usually so it would be really nice to kind of have some like granularity um with that i usually just tend to um like check the prefers reduce motion in javascript and then i'll kind of create different if i have enough time create different timelines or tweens depending on whether they've got it toggled or not yeah well this this turned out really really great uh thank you thank you so much cassie for uh helping helping with the setup and for walking us through all of this um no worries it was super fun thank you for having me on absolutely uh well yeah i before before we go at least at least one uh interview interview question uh oh well let's do let's do two uh interview yes we're hiring [Laughter] uh i'm not looking for work okay uh so so you did you did just start uh with with gsav um so what what is kind of your role now um working working on green sock um i'm the lead bestower of animation superpowers which is a totally grown-up real real job title that's quite a title yeah um i think it's it's mostly like it feels like um kind of a bit of a dream come true because i've been doing all of my svg workshops and i have like a little creative coding um meetup that i run as well and i've got you know my svg slack where i'm always helping people with green salt problems um so that was all the stuff i was doing as like a side gig um on top of my agency job so now i'm i'm just doing that that's that's what i do i kind of teach people animation things help out in the forums make demos um gonna help with documentation at some point there's quite a few exciting things coming up which i'm gonna hopefully have some input into um but yeah it's it's just very kind of community focused and animation focused which is 100 my vibe so that's awesome yeah pretty jazzed about it kind of kind of a dev rail kind of kind of thing yeah or developer advocate kind of thing yeah that's that's awesome uh well uh any any favorite like web animations or techniques that you've come across recently um anything oh that's a good one you're excited i think i mentioned i mentioned earlier um when david asked about um css variables um so michelle barker who has the css in real life blog and is just generally awesome and makes amazing things she's just written a really really good blog post um on co-drops about her her website and how she animated um this kind of mask using css variables and green suck um and i think css masking not svg masking but she goes into a lot of different types of masking yeah and it's just a really cool effect but it's also a really well-written article that everyone should check out yeah dynamic css masks with custom properties and gsap just drop the link in the chat yeah so awesome it's a really good one yeah that's a wild demo yeah that's that's really nice um so yeah you you definitely need to check out uh michelle barker's uh stuff css in real life and that article this looks quite amazing and uh yeah so people can find you at uh cassie codes on twitter your website is also cassie.codes well not dot com https colon backslash backslash cassie.codes um and yeah any anything else uh you you'd like to promote that's it really yeah oh if you're if you're interested in svg animation um i have a little slack channel it's it's very like small friendly little community so if you would like an invite to that um just hit me up on twitter and i'll give you an invite very cool oh also when i have a newsletter i forget i have a newsletter oh yes i have a newsletter that i do with uh louis called view box and it's all about svg yes stuff where where can they find that uh button down from viewbox.com nice these are amazing domain names i have so many that i don't do anything it's box domain name view dot box you gotta jump on that one if that ever becomes yeah or would it be good i think we were looking for that initially that's awesome uh so yeah definitely subscribe uh to view box um and and check uh everything else out that cassie's got going on and uh yeah you can find green sock at justgreensock.com and learn more there the documentation there is is very helpful um and and will surely get even better uh with cassie uh working on that yeah and watch this space for like loads of exciting green sucks stuff i've got lots of ideas so hopefully there'll be um all sorts of things happening soon wait uh well be before we go uh our show is supported by our sponsors codepen at codepen dot io uh css tricks at css tricks dot com and viewers like you you can pledge at patreon.com keyframers and subscribe to our channel for more great content we've got uh plenty of links available below including uh cassie's links there as well so uh all right any any final words that's it for me all right well thank you all so much for watching um and thank you cassie for coding with us today till next time thank you so much for having me adios enemy ghosts adios [Music] you

Channel: keyframers

Views: 3,085

Keywords: keyframers, animation, css, 3d, javascript, flip, transition, css variables, button, react, component, keyboard

Id: sFJa1ThZReA

Length: 83min 57sec (5037 seconds)

Published: Mon May 17 2021