Get more practice around coding animations and adding proper animations on screen 2 and 3.
- [Narrator] In this video we'll continue adding…animations for our second screen.…So, let's get to it.…So, once you come back to where you see all the screens,…you need to go to screen number two,…and then in the scroll event we'll remove…those two buttons that show up when we scroll.…So, we'll be working on the scroll event.…If you remember, once you click start button…and you scroll at the end there's two buttons that show up.…We want the buttons to flow a little bit better.…
So, let's go ahead and do an animation for those.…So, the first thing we want to do is…check where those buttons are.…So, if we click on the properties,…it's already where we want it,…and that's not what we want to do.…We want to move it a little bit further down,…so it moves from a position where it's outside…and then move into frame.…So, what I'm going to do is grab it,…and drag it all the way down wherever position.…As long as it's outside of the frame you're good.…
And then copy the Y position,…and do the same for the steer boat.…So if you check both buttons are…
- Importing designs from Sketch and Photoshop
- Inserting and styling screens
- Adding animation with auto-code
- Working with general syntax
- Programming with variables and objects
- Using functions and code snippets
- Creating assets
- Making interactions
- Animating screens
- Adding a scrolling component
Skill Level Intermediate
Q: This course was updated on 08/28/2017. What changed?
A: A new video was added that covers recent changes to the interface.
Sketch: Mobile Design Workflowswith Diane Cronenwett1h 30m Intermediate
1. A Refresher on Great UX
2. The Framer UI
The menu9m 25s
3. The Non-Coding Framer Tools
4. Programming Basics and Usage with Framer
5. Finalizing Your Screen Assets
6. Add Interactions to Your Prototype
7. Add animations to Your Prototype
8. Final Touches
Next steps1m 22s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.