In terms of JavaScript, we start by getting the SVG element and the path element – this is the shape that morphs from a star into a heart and back. This means we don’t need to write much in terms of markup: The starting codeĪs seen in the face animation example, I often choose to generate such shapes with Pug, but here, since this path data we generate will also need to be manipulated with JavaScript for the transition, going all JavaScript, including computing the coordinates and putting them into the d attribute seems like the best option. The shapes for both the star and the heart are pretty simplistic and unrealistic ones, but they’ll do. Note that all of these curves are created as cubic ones, even if, for some of them, the two control points coincide. Clicking any curve or point highlights it, as well as its corresponding curve/point from the other shape. The interactive demo below shows the individual curves and the points where these curves are connected. The ideaīoth are made out of five cubic Bézier curves. The star to heart animation we’ll be coding. Manipulating the path data can be taken to the next level to give us more interesting results, like a star morphing into a heart. The last example showcased making the shape of a mouth to go from sad to glad by changing the d attribute of the path we used to draw this mouth. Make sure you check that one out first because I’ll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one. In my previous article, I’ve shown how to smoothly transition from one state to another using vanilla JavaScript.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |