Loading...
React/Framer Challenge Webinar 1.1: Toggle
Webinar video
https://youtu.be/rIwYI3JGh0s
The code for the toggle
webinar1-toggle - CodeSandbox
The online code editor tailored for web applications
Pictures
Assignments
💥
Make sure to complete the assignments before coming to the webinar on Wednesday! A lot more fun stuff ahead, better to lay a solid foundation first.
1. Checkbox
Make a checkbox that works like this
(Ignore
the green line on the right):
Hints
Use this character inside the box: ╳
How do you animate the opacity of a frame? Check out this page:
https://www.framer.com/api/frame/
#visual
Solution
(Promise
me: don’t peek until you’ve tried your best!
🙂
)
toggle-assignment-1-solution-checkbox - CodeSandbox
The online code editor tailored for web applications
2. Fancier checkbox
Hints
useCycle
can be used multiple times
Solution
toggle-assignment-2-solution-fancy-checkbox - CodeSandbox
The online code editor tailored for web applications
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
Webinar video
The code for the toggle
Pictures
Assignments
1. Checkbox
2. Fancier checkbox