Effects Reference: Opacity, Animations, Transitions, Shadows, Filters, and Transforms

hi this is Elijah with the oxygen team and in this video I'll be going over the effects options that are available in oxygen the first effects option is going to be animate on scroll to choose effects for our elements we first need to choose the element so for the animate on scroll example I'll choose one of these boxes here then go to advanced effects and here's our list of available effects let's jump into animate on scroll to enable animation for an element check the enable animation box if you've defined global animation settings under manage settings global styles this is all you need to do this element will inherit the global animation settings but if you want to define an animation on a per element basis we need to manipulate these animation settings in the properties pane for the element we want to change so let's go over a few of the options that are available to begin with animation type is the type of animation that the element will use so let's hit this drop down and let's go through a couple of these fade fade left there are some flip options some slide options and some zoom options there are quite a few different animation types so you should find everything you need here as far as animations next the animation duration is the space of time over which the animation takes place if we use a very small number like 450 milliseconds it's a very fast animation but if we use a very large number like 2,800 milliseconds it's a very slow animation so you can adjust this to your liking and to the needs of your design next up is anchor placement this setting defines which position of the element in relation to the viewport should trigger the animation in most cases leaving this blank is fine this will result in the element waiting until it's in the viewport to start animating but for instance we could choose top top which will cause the animation to be triggered once the top of the element reaches the top of the viewport as you can see there so there are a lot of options available there as well but the default is going to be fine for most cases animation easing defines the speed curve of the animation for example ease in out results in an animation that's much quicker at the beginning and the end and slower in the middle so if we choose something like slide left you can see it starts fast and then slows down as it reaches its destination the animation trigger offset setting will allow you to define an offset of the animation trigger point in relation to the viewport scroll position in pixels a positive value can be used to ensure the entire element is in the viewport before the animation is triggered whereas a negative value could be used to trigger the animation before the element enters the viewport so for example let's choose top top as our anchor placement which means it won't animate until the top of the element reaches the top of the viewport and then let's add a hundred pixel trigger an animation trigger offset here and then let's scroll to see the effect we've reached the normal trigger point and it hasn't triggered yet but if we scroll down to 100 pixels the offset then kicks in and the animation is triggered so you can use a negative or a positive value to adjust when the animation is triggered in relation to the viewport position let's clear that out and now we'll talk about animation delay this is the number of milliseconds that the animation will wait to start after being triggered so let's set this to a thousand milliseconds and then let's scroll down to when the animation would normally be triggered you can see that it weights a thousand milliseconds and then begins the animation this is really useful if you were animating multiple elements and wanted them to be triggered at the same time but to offset the animations start time a little bit so that you get kind of a cascading effect the next setting we're going to talk about is the anchor setting this setting is kind of complex but it's very interesting and allows a lot of possibilities by entering the ID of another element in the anchor field you can trigger the animation of this element based on the position of the target element whose ID you've entered so let's try to illustrate this right now you can see that this is set to animate when the top of the element reaches the top of the viewport with a little bit of delay let's get rid of that so right now without an anchor value we scroll to the top and the animation starts now what if we wanted to trigger this animation based on the position of another element that's what we can do with the anchor field so let's say we want to trigger the animation of this div when this heading reaches the top of the viewport so let's grab the ID of the heading and let's go back to our div advanced effects animate on scroll and let's put a hash tag and then the idea of the heading in that field and we've defined the anchor placement which will also be used but it's based on the position of this heading rather than the div that we're editing so now if we scroll down when this heading reaches the top of the viewport the elements animation is triggered finally we have the animate only once option by default once we scroll back up the animation reverts and gets ready to fire again but if we choose yes in the animation only once option then it will only fire one time and then it will not reset once we scroll back up so that's the anime on scroll effects options let's jump back to effects and take a look at opacity opacity is simply the transparency of an element so to illustrate this better let's jump up to say this image let's select the image go to advanced effects opacity and if we adjust it down it becomes transparent and if we adjust it up it becomes opaque next is the mix blend mode drop-down this determines how an elements content should blend with the content of the elements parent and the elements background so let's go to advanced background and let's set a background color for this image maybe red and then let's set a background color for the section as well so we can see what's going on here let's choose like a blue color perfect now let's select the image and let's go to advanced effects opacity and mix blend mode now there's quite a few options so we'll just go through a couple you can see the effect here it allows it to kind of blend with the background of the parent screen overlay image in particular has a white box around it this would look much better if the image was actually cut out like a lot of modern illustrations for websites are Hugh that looks terrible let's move to something else colour there are a lot of a weird ones that you probably will never use but there are there there is options if you need them so as you can see here the mix blend mode allows you to manipulate the weight the element blends with the parent elements background next let's jump over to transition so transition is a CSS property that allows you to cause a change in the elements properties to take place over a period of time this is commonly used for hover effects so let's jump down to something we can hover over let's just choose this image and let's go to advanced effects transition and let's just pump the transition duration up to one second now obviously we're not going to see any change until we have some change that takes place now again the most common use of this is the hover effect so we're gonna have the image selected go up to the state button near the top of the properties pane and choose hover now let's go back to opacity and let's change this elements opacity on hover to almost completely transparent and then let's go back to the original state so now you can see when we hover over the element it transitions in transparency rather than just jumping to almost completely transparent this is very helpful for menu items and links and anything that you want a much smoother transition for now if we look at the other options that are available these are all CSS options and I'm not gonna go into a lot of detail but these allow you to adjust the properties and the way that the transition takes place next let's take a look at box shadow so let's find a good element here this one already has a shadow but let's let's choose this here this div and go to advanced effects box shadow and this allows us to add a drop shadow effect to elements and oxygen so let's choose a color like black to make it very apparent then we can adjust the horizontal offset the vertical offset the amount of blur and the amount of spread so we could do something like a very small spread decent amount of blur a little bit of offset and then change our shadow color to a more transparent color making a softer shadow effect so there you can see a nice drop shadow effect that we've set up very quickly next we're gonna look at the text shadow effects so let's choose this heading here and go to advanced effects text shadow this is the same as box shadow but it's for text so let's select a color change the offset change the vertical offset and change the blur as you can see we have the same controls and it's very simple to setup a nice text shadow effect the next one we're gonna look at is a filter effect so let's add an image to this section and I'll choose one I've already uploaded that'll make the effects a little bit more apparent so with an image selected we'll go to advanced effects and note that filters available for any home and an oxygen it's just that images are the most common use case so let's choose filter and filter has a lot of different options like blur we can change the blur amount brightness drast grayscale hue rotate kind of a crazy effect Bert saturate and sepia finally let's jump back to effects and take a look at transform transform allows us to manipulate the properties of an element in a lot of really interesting ways like skew translate rotate rotate X rotate y perspective rotate 3d and scale let's start with skew a very simple skewing effect along the x or y directions we've also got translate which actually changes the position of the element and we've got rotate rotate X kind of a 3d rotation effect rotate Y perspective which is kind of an interesting one because you won't actually see any effect until you actually add another transform which oxygen does allow you to layer transforms and you go to something like rotate so we've added some perspective and we're gonna rotate say X here and you can see there is a perspective effect for sure this is very dramatic for illustration purposes but I'm this can be used much more subtly for some really interesting effects so let's jump back up here and look at rotate 3d this allows us to rotate along three different axes in 3d space as you can see it's kind of a rotating and flipping effect and then the final transform is scale which is really it's just changing the size of that element so one would be the normal size two would be two times the size so on and so forth and you can scale it in the X Y or z direction so those are the effects options in oxygen again this is Elijah with the oxygen team thank you for watching

Channel: Oxygen

Views: 15,795

Keywords:

Id: j-FOy96LC8Q

Length: 14min 19sec (859 seconds)

Published: Thu Mar 07 2019