React Challenge Webinar 1.2: Slider

Webinar video

  • The session was interrupted at the end due to Google Hangouts issue. To be continued in Session 2.

The code for the slider

Assignments

💥 Make sure to complete the assignments before coming to the webinar on Monday! A lot more fun stuff ahead, better to lay a solid foundation first.

1. Help Mr. Skinny Pose

  1. Add another slider that adjusts the rotation angle of Skinny’s wing

Hints
  • There’s a known bug in the transform function in framer library 1.0.9. Use 1.0.6 instead.
  • Use y attribute to move the slider downwards
  • Use this to customize the rotation center  style={{ transformOrigin: "bottom right" }}
  • Also try it without transformOrigin
  • Do you still remember “object literal shorthand”? Use it to make the code look better!
  • This assignment also gives you exercise on reading other people’s code, understand it and make changes. Believe it or not, this is actually more important than writing completely new code.

Solution (Promise me: don’t peek until you’ve tried your best! 🙂 )


2. iOS Task Switcher

  1. Build the task switcher interaction using drag attributes and useAnimation
Hints
  1. What could the info.point.y value be when the screen is dragged up? Use console.log to find out.
  1. How to define dragConstraints when the drag direction is vertical?
  1. Use both onDrag and onDragEnd
  1. useAnimation can be used multiple times.
  1. Use both left/top and x to put the Google map screen into the correct place and animate it
  1. transition can be used in animationControls.start(). E.g.:

animationControls.start({ 
  x: 100
  transition: { duration: 0.1 }
})

  • Use this to give the animations some final touch.

Solution


3. More drag and drop!