Questions tagged [animation]

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

I've been experimenting with CSS animations and I've run into a bit of a snag. I'm looking to create a div that fades in with a delay - meaning it won't be visible until the animation starts. Here's what I have so far: http://jsfiddle.net/qJfZN/1/ Basica ...

Currently, I am in the process of developing a GatsbyJS website using Material UI. I have been attempting to create a blinking animation by utilizing the withStyles HOC. I made an attempt to include the animation within the styles: const styles = theme =&g ...

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

I have developed a task management application using Angular and I wanted to implement a fading effect for each task when it is created and before it is deleted. Despite successfully applying the fade in effect at the todo-item component level, I encounter ...

I have implemented the anime-js animation library to create an effect where a div grows when hovered over and shrinks when moving the mouse away. You can find the documentation for this library here: The animation works perfectly if you move slowly, allow ...

Trying to create a CSS3 animation featuring a puzzle piece on my website. Below is the code I'm using. Strangely, the animation only seems to be working on Safari and Chrome. Any tips on how to make it compatible with Firefox and Opera? Appreciate your h ...

My exit and new animation are not working as expected. I want the new animation to trigger every time a user clicks on a different menu link. I've tried using "animate='visible'", placing it directly over motion, but still no luck with the exit o ...

Greetings, fellow coders! #div1{ position: fixed; top: 50%; left: 50%; margin-left:-100px; margin-top: 420px; width: 158px; height: 158px; background-image:url(imag ...

I dedicated a significant amount of time to create a unique and eye-catching logo animation for my website! The logo animation I designed perfectly matches the size of the logo image and can be seamlessly integrated into the site. The issue arises when th ...

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas for the ...

I am currently facing an issue with a webpage I created where the text freezes when scrolled down to the last paragraph, while the images continue to scroll. Although my implementation is functional, there is noticeable jankiness when using the mouse wheel ...

I need to apply specific classes to an element with an id of ig-container. The classes I want to add are: $("#ig-container").addClass("animated bounceInRight"); I aim to animate this element once it becomes visible on the screen, triggered by a user scro ...

I've been searching everywhere for a solution to my issue, but none of them seem to work. As someone new to CSS3 Animations, I appreciate your patience. I created a simple animation using CSS3 that functions perfectly in IE and Firefox, however, it ...

When it comes to CSS timing functions, they often appear to exist between two specific points: https://i.stack.imgur.com/qyvON.png Even with the option of using custom bezier curves, the curve created can only transition from one point to another. https ...

In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...

I am working with an array containing numerous items. I have implemented ngFor to display only the first few items with a scroll feature. Each item is animated to slide from left into the view port. However, I would like this animation to apply to the bo ...

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

I created an animation that works perfectly when hovering over the target elements, however, it doesn't smoothly transition back to its original position when the cursor moves outside of the target element. Instead, it snaps back abruptly and unattrac ...

My Wordpress site features some animations that work flawlessly when the site is scrolled. The code looks like this: jQuery(document).ready(function($){ $(window).scroll( function(){ if(!isMobile) { $('.animate_1').each ...

I am facing an issue with my animation where it works perfectly in Chrome but not in IE. The desired effect is to slide a panel into view from outside the browser window, and upon clicking the exit button or <div> covering the rest of the page, the p ...

Looking to create a simple animation with the angular animation package The goal is to smoothly transition from opacity 0 to opacity 1 for a fade effect. I've had success with other properties like height and display, but struggling with opacity. Here's ...

I have 2 distinct HTML pages, namely welcome.html and login.html. These two pages are incorporated or "inserted" into a common page called index.html through the utilization of an exclusive attribute known as ngview, together with a router provider. This i ...

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

I'm attempting to make a div fade up when it enters the viewport by using the library found at https://github.com/michalsnik/aos Unfortunately, all that seems to happen is that the div gets hidden. In the head section of my HTML file, I've refe ...

Attempting to replicate the moving animation in a Svelte example using Vue.js. Here is my progress so far. Simply click on the todo items to view them. new Vue({ el: "#app", data: { items: [ { id: 1, name: 'John', done: false }, { id: ...

My goal is to create a hover effect on a box that triggers another div with easing effects. Below, you'll see that the .images{} class has a 0s infinite scroll initially, but when the .box:hover > .images{} selector is activated, it changes to a 10 ...

Can anyone help me figure out why the animation doesn't work when I try to change the vertical position of a form using JQuery? I want the input field to smoothly move to its new position so that users can see it happening. Here is the JsFiddle link: http: ...

Currently, I am attempting to add animation to a css div without including the top property in the original div style. I omitted it because I wanted to delay the animation, so I placed it within the @keyframes property. However, the element disappears afte ...

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

I want to smoothly fade out the old view and fade in the new view. The challenge is that the new content must be positioned absolutely until the old one fades out. I also want to set a specific top position and height for the new content, but when I try to ...

I've designed some boxes that function similar to notifications, but now I want to smoothly slide them in from the left instead of just fading in. I know that I need to use .animate rather than .fadeIn to achieve this effect. The code snippet I&apos ...

I found a code snippet online that animates items as they appear on scroll. However, the code only triggers animation for one item at a time. How can I modify the code to trigger the animation for all items? const observer = new IntersectionObserver(e ...

My attempt at creating a basic animation is not producing the desired smoothness. .animate { animation: motion 1.5s steps(27) forwards; } @keyframes motion { 100% { background-position: -5778px; } } <div class="animate ...

Currently, I am facing an issue with the exit animation of a modal created using framer motion. While the initial animation on opening the modal works perfectly fine, the exit animation fails to trigger and the modal disappears abruptly without any transit ...

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

I've created a cool soundboard with interactive buttons. Each button plays a unique sound when clicked and changes appearance when hovered over. However, I'm facing a challenge in animating an image to move from the left side of the screen to 500px to th ...

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

I need help creating an animation where a plane flies across the screen, exits from the left side, and re-enters from the right side in a continuous loop. How can I achieve this effect to make the plane fly endlessly across the screen? Here is my code: ...

Vue.js v2.2.1 JSFiddle: https://jsfiddle.net/loop_/59g7w1pa/8/ .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave { opacity: 0.5; } ".fade-enter-to, .fade-lea ...

I have developed an app that utilizes a checkbox to control the appearance of an overlay on a screen. To ensure smooth transitions, I have incorporated animations into the process. #overlay{ position:absolute; height: 100vh; width: 100vw; ...

Currently, I am using KreatureMedias Layerslider and trying to make a fullwidth wave bob up and down. This is what I have at the moment... <img class="ls-layer" data-ls="durationin:1500;scalein:1.1;offsetxin:-50;loopcount:-1;loopoffsetx:0sw;loopoffset ...

$scope.hideSampleList = function ($event) { if(animationApplied){ $($event.currentTarget).next().hide(300); } else { $($event.currentTarget).next().show(300); } } Currently, animation is only applied ...

Is there a way to make my text flash twice per second? I attempted to create animated text, but it didn't work out! ...

I am facing an issue with the FAB button and 3 Icons. The functionality is working fine on click for both show and hide actions, but the transition is too delayed. I want the icons to appear step by step, even though I have adjusted the transition delay se ...

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

I'm attempting to animate the scale of my react component. Although it seems straightforward, I've run into some issues while following a similar example from the React-Motion demos: var customComponent = () => { let newStyle = { scale: spring(1.1, pre ...

I implemented a unique typewriter animation on my homepage by utilizing code from this source and making minor HTML edits to customize the content. https://codepen.io/hi-im-si/pen/DHoup. <h5> <body>Hello! I am Jane.</body> < ...

Have you ever tried creating a CSS3 animation in HTML? You can check out an example here. <div class="parent"> <a href="#">First</a> <a href="#">Second</a> <a href="#">Third</a> </div> With the ...

Is there a way to implement an if statement that triggers an animation when the right image reaches +400px, and then animates back to -400px upon hovering over the image? $('#left img').mouseenter(function() { $('#right img').animate ...

I recently created a basic animation that involves setting an element to "position: absolute" in order to translate it. Everything functions perfectly as intended on Chrome, however, when testing it on Safari, the absolute positioning seems to be completel ...

I followed the instructions from a tutorial on W3Schools here to create this code. The "open model" button triggers the modal to open with a smooth CSS animation, which looks great. However, when I click the close button, the modal abruptly closes without ...

I'm currently implementing a Modal component within my app, utilizing Portals. My goal is for the Modal to smoothly fade in when it is rendered and fade out when it is no longer displayed. Upon examining the documentation for react-transition-group, I no ...

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

I can't seem to figure out why the animation is not working as intended in the code below: app.directive('openMenu', ['$animate', '$timeout', function($animate, $timeout) { return { link: function(scope, elem) { elem.bind('click', ...

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my HTML d ...

I am experiencing an issue with my code where multiple animation effects are running simultaneously. Specifically, when I hover over navbarli1 and then move to another li element with the same navbarli1 class, the slide-down effect is not working as expect ...

Look at the code snippet below: function myFunction(z){ if(z == 1){ $(".cloud").each(function(index, element) { if(!$(this).attr('id')){ $(this).css("left", -20+'%'); $(this).next('a').css("left", -20+'%'); } ...

I'm having an issue with animating on click using CSS. The animation works fine on the first click, but it doesn't work on the second click. This is because the click event is being overridden by jQuery to enable the dropdown menu to open onClick ...

I have been trying to incorporate a feature on my Shopify frontage website where our logo appears fullscreen and then fades away or disappears after a few seconds, allowing people to access the rest of the website. However, I am facing difficulty in making ...

I am in the process of developing a unique image slideshow without relying on any plugins. My goal is to incorporate simple fade transitions, where one image fades out and the next one fades in seamlessly. The slider should function by appending images wit ...

After coming across this helpful answer, I successfully added a rotating GIF image as an icon inside an INPUT control on its right side. Simply applying the "busy" class to my control did the trick, and now it looks like it's in progress. input.busy { ...

I'm completely lost with what I have accomplished. My goal was to create an animation where an element slides in from a certain position and then slides back when another element is clicked. To achieve this, I included the second event within the callback ...

I am struggling to find suitable examples demonstrating how to animate the width of an element in Angular using the new animation feature. In my app, I have a side drawer that I want to expand or close when the user clicks a button. However, when using ng ...

Can anyone help me figure out what I'm doing wrong here? I'm trying to apply my slide animations to each slide without having to manually copy and paste for each index. The console log is working for every slide except for the first one (0), bu ...

Snippet <Collapse in={expanded} onTransitionEnd={() => console.log('finished')} > <div>foo</div> </Collapse> Error Detection The callback function (onTransitionEnd) is not triggered af ...

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

Animating the elements of my website is a simple task for me, however I am looking to have them animate only when they are visible on the screen without relying on pixels or offsets. I want the animations to be responsive, even in phone mode, without hav ...

I'm currently working on animating an image, specifically moving it from left to right and back. However, before I dive into implementing CSS animation keyframes, I noticed that I am having trouble getting the HTML element to follow the CSS styles I a ...

Recently, I made the switch to a custom theme in Angular Material version 7 and Angular version 7. Everything seems to be working fine except for the animations - specifically, the mat-progress-bar is no longer moving as expected. This is the code for my ...

I have been trying to implement direction: 'reverse' and timeline.reverse(), but so far it hasn't been successful. Interestingly, when I set loop: true, the reverse animation can be seen within the loop. However, my goal is to trigger this action through s ...