Javascript Animation
First, I created a ‘ball’ to bounce in my animation. The series of concentric circles was grouped together and saved as an .svg file.
I pressed ‘SVG Code’ to view the code, and copied and pasted the <style> and <g> sections into my brackets file.
I then chose to change the background color of my animation, and so I went into my ‘style.css’ file and added a new hex code value, changing the background to a teal blue.
I also replaced the ‘CMU logo’ source file to a motif of my choosing. The file in this case is ‘Untitled-3–01.png’.
Next I began my animation. to move the ball across the frame, I used the transform function and specified start and end coordinates. I also specified the easing, which gave the ball a bounce effect. Lastly, I made sure to tell the program to play the animation by adding ‘moveAnimation.play();’
I continued to move the ball down and across the screen by specifying new coordinates, and adding a new play animation function at the end that specifies that the subsequent animation run after the one before.
