Issues Encountered:
- The animation I implemented lacks responsiveness as images and text tend to move around and appear disproportioned on smaller screens.
- The .moveup class fails to animate properly despite numerous attempts to set up CSS transitions correctly. Upon adding the class through jQuery, the affected pictures simply jump instead of animating smoothly.
Project Background:
I am currently developing a website that includes a short animation before the welcome section slides aside, revealing the main content of the site/application underneath.
My project utilizes Bootstrap 3 framework along with Animate.css for animations, in addition to my custom .moveup class.
I am facing significant challenges in maintaining the responsiveness of my animation. Any changes in screen size result in various issues that are overwhelming for me to handle.
About the Animation:
The animation comprises 5 elements sliding up in sequence - #ani_text_1, #ani_plus, #ani_text_2, #ani_equals, and #ani_text_3. Afterward, 3 other elements - #ani_mcloud, #ani_man, and #ani_check slide down. Finally, #ani-plus and #ani_equals move further up between them, concluding the animation.
Code Snippets:
HTML Content:
<div class="container-fluid">
<!-- Your HTML code goes here -->
</div>
CSS Styling:
/* Your CSS styling rules */
JavaScript (jQuery):
// Your JavaScript/jQuery script