The Joys of Delayed Animation with jQuery Isotope

Has anyone successfully modified the CSS3 transitions in jquery Isotope to incorporate a delay for shuffling items, such as using "transition-delay: 0s, 1s;"?

I am aiming for a specific shuffle direction - first left, then down - to create a more calculated effect when filtering (as opposed to the default diagonal shuffle). However, any alterations made to the default CSS3 transitions do not seem to work.

Below is my current CSS:

/**** Isotope Animating ****/
.isotope,
.isotope .isotope-item {
  /* adjust duration value accordingly */
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

Any insights or suggestions would be greatly appreciated!

Answer №1

For a helpful demonstration, visit http://jsfiddle.net/desandro/QwWv7/

To apply a delay to each CSS property being transitioned, it is necessary to adjust the positioning method due to transforms combining X & Y translation in one transform. By utilizing absolute or relative positioning and setting separate delays for both left and top, you can achieve this. Ensure that transformsEnabled: false is included in your options.

$container.isotope({
  itemSelector: '.item',
  transformsEnabled: false
});

Next, modify the transition-property CSS to include properties for top and left transitions.

.isotope .isotope-item {
  /* multiple -vendor declarations omitted for brevity */
  transition-property: left, top, opacity;
}

To implement delays for these properties, add values for transition-delay. Note that only top should be delayed in this scenario.

.isotope .isotope-item {
  transition-delay: 0s, 0.8s, 0s;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble retrieving the .html() content from the <label> element

Check out the code below: $('.size_click').click(function () { $(this).closest('span').toggleClass('active_size'); $('.selected_sizes').append($(this).closest('label').html()); }); There are multiple ...

Looking for assistance with text alignment?

23 Years Young From: The Boogie Down Bronx Heritage: Puerto Rican Pride Trade: Master Tailor For a demonstration, click on this link ...

The impact of Ajax on jQuery document loading within an Ajax form

I'm currently using jQuery to change the colors of cancelled bookings in a Drupal view, and it's working well. jQuery(document).ready(function(){ jQuery(".bookingstatus:contains('Cancelled')").css("color","red"); }); However, when ...

Is it possible to ensure that a newly created element functions in the same way as an existing element?

I am currently in the process of developing an application that empowers users to generate new items, modify existing items, or delete items by utilizing corresponding icons located adjacent to each item. When it comes to existing items, the action icon d ...

"The Ajax BeginForm for a list is only returning the first element of the model, or nothing at

Attempting to trigger an action using an ajax-beginform. This is the model structure being used: public class MyViewModel { public List<SubViewModel> SubViewModels {get;set;} } public class SubViewModel { public string Name {get;set;} ...

Executing Code from Tab only upon tab activation

I have multiple tabs on my page, and I want to have one tab with a widget that only loads when the user clicks on it, instead of loading along with all other tabs when the page loads. <div class="tabbable tabbable-custom"> <ul class="nav nav-t ...

Parsley JS: A Solution for Distinct IDs

I have a form that contains multiple select boxes, and I need to ensure that no two select boxes have the same value selected. In simpler terms, if select box 1 is set to value 2 and select box 4 is also set to value 2, an error should be triggered. While ...

Leverage jQuery to activate/deactivate a button according to variables

Currently, I am utilizing jQuery to carry out username and email validations prior to a user signing up... This code assigns a boolean value based on the response received from PHP. $(document).ready(function() { if (usr_checked == true) ...

jQuery functions not functioning properly when triggered by an event

I encountered an issue with my page using jQuery and Bootstrap. Everything was functioning properly until I tried calling a function on an event, which resulted in the console showing an error message saying $(...).function is not a function. For example: ...

Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left. However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneousl ...

Learn how to instruct ajax to fetch the designated information and retrieve corresponding data from the database based on the selected criteria

Looking for some help with my 2 select boxes. The first box allows users to choose a brand, while the second box should display products from that brand fetched from the database. Unfortunately, I'm not familiar with AJAX and the script provided by a ...

Dynamic loading of lists necessitates encapsulating nested lists

I'm currently working on a 3-level dropdown list that pulls content from a database for my project. I want the top level to resemble a tab menu, with a border surrounding the area underneath where the additional lists will appear. However, I am facing ...

Refreshing an AJAX call automatically in Knockout JS

Greetings everyone! I'm currently working on setting up a simple setInterval function to automatically refresh my data every minute. The line that is giving me trouble is: setInterval(incidentViewModel.fetchdata,60000); I also attempted this: windo ...

Fixed positioning upon scrolling begins prior to reaching the uppermost point (top div)

Currently, I have implemented a feature where #filter (the white select list in my sidebar) becomes fixed when it reaches the top of the page and stays there while scrolling until it reaches the footer and is released. However, I encountered an issue wit ...

Causes for the display of the text within the alt attribute

Recently, I attempted to view an HTML page in text browsers and noticed that the alt attribute value of the img tag was visible. I decided to omit the alt attribute and instead utilized CSS: .headerImg:after, .headerImg::after { conte ...

What could be causing my Material UI Table to disappear when I toggle the "Show" option?

I am incorporating the Grow material ui component to display or hide a table. Initially, the table is visible. https://i.sstatic.net/0OxPQ.png <Box className={classes.object_controls_wrapper}> <Box sx={{ display: "flex" }}> ...

The autocomplete feature in Codemirror seems to be failing specifically when writing JavaScript code

I am having trouble implementing the autocomplete feature in my JavaScript code editor using Codemirror. Can someone please help me figure out what I'm doing wrong? Here is the snippet of code : var editor = CodeMirror.fromTextArea(myTextarea, { ...

The height of scrollbars in the HTML section does not extend to full coverage

On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll ...

Transferring information between pages through ajax communication

I am working with two pages named testing.php and submission.php. My goal is to send data from testing.php to be displayed on submission.php. For example, when a user clicks on test1, they should be directed to submission.php where I want to display the te ...

jQuery - handling dynamically added elements on page load

After incorporating certain elements into the view, I want to trigger an event. I've attempted to achieve this using the code below, but it doesn't seem to work: $(".featWrap").on("load", ".box", function() { $(".featWrap").slick({dots: t ...