Implementing Arrow Styles
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:01] Heidi welcome back to the reactor cores in this guy. We are going to add the arrow animation and styles sort of get started let's go into our let's go into our course library and let's modify it as a tagged have some class tags. So the first thing we want to do is give it some back take so we can put in a condition. So we want to add in course Arrow and then if it is opened a course door open. We don't want to return anything but if it is closed we want the Flip arrow. So of course arrow closed or just close should work. OK. Now let's go and throw these tags into our into our library. Yes us so dial course aero and Darkhorse aero close. Now the first thing we want to do is give this a border left of eight pixels solid and transparent. Copy that a couple times and then change this to right and bottom and then let's say transition all point three Ds. That transition will give us the animation looking for and the border bottom it needs to actually be the color we want so let's put in the blue color. What was that it was 47 B.C. I believe. That's four eight seven B.C.. And now we'll have that in our map. So let's go ahead and get rid of the arrow because it's making it have a wit and we need it with the zero so let's go ahead and go into of course library and do we the text I go back to the app and it should be an arrow. [00:02:25][143.4]
[00:02:28] So we have the arrow but it's not animating so it's super simple to animate this. All we have to do is flip it in of course library to yes US and the courts are so close. So transform rotate 180 degrees. Now if you go back to the course library or the app you'll notice it flips. Now the animation is not working. Let's try and find out why. So we have of course arrow if it's open. We're returning nothing if it's close to the clothes tag. This should be good. Now we have transition all point threes. It's because we didn't put a seconds here so let's save that and go back and it should be working. All right sweet. It works awesome. So that fixes that and the next guide. Are going to fix. Why fix it from being open all the time. Because you'll notice it's open all the time. And then we will fix this. This lines up better. So these were all lined up properly. You'll notice it moves when anything changes. So we'll fix that and then after that we will get into the schedule component a little more. OK I will see you. Actually real quick let's commit or code we forgot to do that in Lasca to get status. Get that geek commit that arrow animations and styles push origin master. All right I'll see you in the next guy. [00:04:15][106.4]
[249.8]