Raise the Stakes explainer

The aim of this puzzle: Make the balloon increase in speed as it falls, and remove it if it gets hits the ground.

Walkthrough of the solution: To change the way a transition moves a shape from point A to B, we use .ease(). The .ease() function takes 1 argument which is stored in the d3 library. In this case, there’s only 1 ease function listed: .easeQuadIn. To apply the new easing function, we simply attach .ease(d3.easeQuadIn) to the .transition(). To make the balloon “pop” if it touches the ground, we need to use .remove(). We know that the balloon touches the ground when the transition is over, so we can simply add .remove() to the .transition() as well. The transition knows to only remove the balloon at the very end, even if you use .transiton().remove()...

Review cards:
This last puzzle might test your memory a bit. You learned about .ease() and .remove() back in the 1st Animations course. If you complete Cutting Ties, you should be able to figure out Raise the Stakes. If you want a little more practice, try solving Bowl a Strike and Strange Gravity from the last course.

Sample code solution:
(Tap below to reveal)

Since this is part of the final topic of the Animations II course and it is testing your knowledge, there is no sample solution code.

D3 Concepts: .ease(), .remove()

I successfully completed the last task Raise the Stakes, but everyday I have notification from application about incomplete task. Is it a bug or a feature? I would keep notifications ON if new courses will appear, but these messages are boring me.

Best regards,

A post was merged into an existing topic: Keyboard in playground