Dynamic content for transform values?

[Travis_Holman]

Effects transform value fields have dynamic content as an option so I assume this is possible somehow, but I have not had any luck getting it to work. I’m wanting each item of the looper to have unique transform values. I thought it would be something like this:
skew({{ looper.index }}deg, {{ looper.index_zero }}deg)

But this just gives me skew(0deg,-1deg) for all items in the looper.

Am I missing something?

[Ismael]

Hello @Travis_Holman,

Thank you for the inquiry.

The index value should increment per item in the loop. Are you sure that the dynamic content is inside a Looper Provider or Consumer? Please provide the site URL and login details in the secure note so we can check the issue further.

This might also help:

– https://theme.co/docs/loopers
– https://theme.co/docs/looper-dynamic-content

Best regards,
Themeco

[Travis_Holman]

It looks like you were able to log in and look at this - any suggestions?

[ruenel]

Hello @Travis_Holman,

The Effect is applied to the Cell. The problem is that since the Cell is a Looper Consumer, the same effect is applied repeatedly. What you can do is to separate the Looper Consumer one by one and apply the random skew({{ random.float + looper.index_number + 2 % 2 - 7 }}deg, 2deg) angle.

Please check out my demo on the mentioned page.

Thanks.

[Travis_Holman]

So the way you’ve done it at the bottom of the page (https://dev.crookedtails.com/pet-spotlight/)would require manually adding a new cell every time a new featured pet is added? Which sort of defeats the purpose of dynamic content eh? If I had to do that I could just also manually set the transform value each time but I want to avoid all this manual stuff. It seems like something simple like {{looper.index_number}}deg should be unique to each consumer item? I’ve also tried applying it to a div within the looper consumer and it still doesn’t work.

[Ismael]

Thank you for the update. Instead of using the default transform field, you can try this Twig template in the Customize > Element CSS field of the Cell element with the Looper Consumer.

{% for i in 1..looper.count %}
  $el:nth-child({{ i }}) {
    transform: skew(
      {{ ((random.float * 2) + 2) * (1 + i / 50) | number_format(2, '.', '') }}deg,
      2deg
    );
  }

  $el:nth-child({{ i }}):hover {
    transform: none;
  }
{% endfor %}

This should provide enough skew randomness to each item.

[Travis_Holman]

Thanks, I think this will accomplish what I need. Out of curiosity what is the purpose of dynamic content in the transform values? Is it just for component parameters maybe?

[prakash_s]

Hello @Travis_Holman,

Glad that we were able to help you. Dynamic Content is a powerful way to pull WordPress data throughout the Cornerstone.

Thanks