REPEATER ANIMATION - Individual items

advanced-prototyping
repeater-widget
#1

Hello,

I have been struggling to crack the solution for repeater widget animation. Here is what i am looking for…

Question 1:
How to do a staggered effect using repeater?(eg: https://codepen.io/erikdson/pen/OgoQYN)
I tried “Show” property with a slide animation with a “wait”, but slide property uses the widget boundaries so it will be cropped. Using “Move” worked to an extent but I couldn’t crack the delay/wait logic for individual items.
What is the best way to have an overlap effect like the codepen example (listItem1 animation starts at 0ms and listItem2 animation starts at 5ms but both have a same move animation of 100ms )

Question 2:
On click on a repeater item, how can we retain the position of the item and expand it to full page transition with easing? I have tried marking rows and deleting others except the selected one, but couldn’t retain the position as the repeater widget automatically moves the item when other rows are deleted.

I have tried this without the repeater, but I really want to exploit the data table in repeater so looking for some solutions. It would be great if any axure wizard here could help :slight_smile:

list
list.gif600×621 125 KB

list_load_test.rp (68.8 KB)

#2

Hi Praveen,
I have created sample [demo] for you.

Please do the bellow steps,

Step 1: upload the RP file (Don’t change the shape name)
Step 2: copy below code and create plugin (refer the screenshot)

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script >const button = document.querySelector("[data-label='playbutton']");
letshown = true;

function enter() {

  TweenMax.staggerFrom("[data-label='list_item']", 2,
  {
    scale: 0.75,
    opacity: 0,
    delay: 0.25,
    ease: Elastic.easeOut,
    force3D: true },
  0.2);
  shown = true;
}

function exit() {
  TweenMax.staggerTo(
  "[data-label='list_item']",
  0.5,
  {
    opacity: 0,
    y: -100,
    ease: Back.easeIn },
  0.1).to({});
  shown = false;
}

function play() {
  if (!shown) {
    button.textContent = "Animate out";
    enter();
    console.log("Entering...");
  } else {
    exit();
    console.log("Exiting...");
  }
}

button.addEventListener("click", play);

enter();

</script>

(https://tf9wur.axshare.com/#g=1&p=home&c=1)

Capture
Capture.PNG1176×625 46.5 KB
REPEATER ANIMATION - Individual items.rp (101.2 KB)

Thanks,
Vikram

#3

Thank you for your time, Vikram…

Is there any way we can implement this without the plugin or injection method? The challenge here is that every time, we need to publish it to preview the change.

Also, any suggestions on the best way to implement the transition from list item to full page (like the example i shared above) ?

#4

You could copy this same code and impletment it directly in your prototype via “javascript injection” --just search that term on this forum for several ways to do this. Note: this is not supported by Axure, but it’s a hack that does work.