the answer for all question about Oxygen Builder plugin and WordPress

Does anyone know how to create an effect with a delay for 200 ms for each next card in a repeater?

Does anyone know how to create an effect with a delay for 200 ms for each next card in a repeater?



Source

Capital Design Set

Blogzine Design Set

3 Comments
  1. Anwar says

    What type of effect?

  2. Philip says

    If it were me, I would go with GSAP (enqueued as a script on your page(s) with repeater) + ScrollTrigger + staggered timeline.

    Add a class (ie: .repeater-animate-item) to a div with 100% width and 100% height. Place all your repeater content inside this div.

    Then find a GSAP tutorial or example code which covers this combination (GSAP + ScrollTrigger + stagger) and apply the effect to your .repeater-animate-item div elements. Here are a couple examples I found in a 2 minute Google search:

    https://codepen.io/GreenSock/pen/GRjWxaJ

    https://greensock.com/forums/topic/26001-animate-all-elements-with-a-specific-class-using-scrolltrigger-with-stagger/#comment-126234

    GSAP is worth learning, even if it takes you a day or two for this one feature on your site. It becomes easier with practice and you will NOT regret having this skillset! 😄

  3. Alexander says

    jQuery(document).ready(function($){
    $(“#_dynamic_list-151-79 > div”).each(function(i){
    $(this).css({
    ‘transition-delay’ : 200*(i) + ‘ms’
    });
    });
    });

Leave A Reply

Your email address will not be published.

Oxyrealm Docs OxyMade - Oxygen Builder Design Set Mega collection