cs481-ekh / s23-volt

MIT License
0 stars 0 forks source link

Research animations for energy block #12

Closed RayEscBSU closed 1 year ago

RayEscBSU commented 1 year ago

Energy blocks should have animations when selected, moved, and energy transfers.

RayEscBSU commented 1 year ago

Researched MotionPathPlugin.min.js, and gsap.min.js libraries for animations. {t:120}

RayEscBSU commented 1 year ago

I reviewed JS, HTML, CSS.

I had never used bootstrap before so I watched some videos on Youtube.

Looked over the existing JS animation code.

After using the FE website I noticed if there were multiple blocks next to each other it was hard to see which specific block you are selecting. I decided on implementing a hover effect on the block. A block will grow larger when a user hovers over it. This will help the user pinpoint a specific block, similar to this example: https://techstacker.com/how-to-make-elements-zoom-on-hover-with-css/

{t:240}

RayEscBSU commented 1 year ago

Researching animations for energy blocks click and drag {t:120}

RayEscBSU commented 1 year ago

Looking over GSAP and Tween docs, trying to fid the best way to implement a "trail" effect when block is in motion. {t:90}

RayEscBSU commented 1 year ago

Look over Tween animation affects, trying to implement a trailing affect, {t:185}

RayEscBSU commented 1 year ago

Looking over gsap and looking over code for particle tail. Im still trying to comprehend how the particle tail works and how I can implement that in our project. {t:190}

RayEscBSU commented 1 year ago

Looking over particle code and trying to implement particle animation {t:180}

RayEscBSU commented 1 year ago

Researching block particle and GSAP. {t:120}

RayEscBSU commented 1 year ago

I can not get the particle code that creates a tail affect to work, I am going to try to get some sort of highlight highlight affect when a block is in motion. {t250}