The last accordion item of three does not rotate the arrow on trigger, even though it has the same structure, class, and same interaction as the other two accordion items which work fine.
When I assign a rotate animation to an interaction it seems to work intermittently or not at all. Despite other interactions working fine, rotate has a mind of its own.
I am trying to rotate an image. I have tried targeting the image itself, the div containing the image, the class of the div, and each time something completely unique and inconsistent happens. I can’t figure out the logic of this problem because whenever I remake the animation it behaves differently, even with the same settings.
Is there a default image setting that could be interfering with this? Are rotate interactions just bugged?
I was able to work around this by adding a duplicate “accordion open” interaction to the bottom accordion item. So now my accordion menu works properly as long as the bottom item has 2x the “accordion open” interaction.
If someone can help me understand this I would appreciate it!
Hi @Taylor_Nowotny, I did some experiments with your site using the read-only link. Here’s what I found:
I tried to copy a “working” accordion block (Design) and paste it at the end. No luck. Both the third and fourth (newly pasted) blocks had issues. This suggests that the problem isn’t in the code or settings of the third block (Development). You could do other tests, like deleting the third block and copy/pasting a few “working” blocks to the end.
It seems like the accordion open andaccordion close events are running concurrently. In other words, when the user clicks, both run at the same time. This could be creating an unpredictable situation where it’s tough to say which one is executing before the other.
To fix it, I delayed the accordion open animation so it runs a bit later. I moved it back by 0.15 seconds. This way, the accordion close event is more likely to finish first.
This likely doesn’t fully explain why only that third block was experiencing issues. That part I haven’t figured out.
I think an even simpler solution would be to just have one animation, where you close the containers first (and reset the triangles), then open only the child container and animate the triangle also.
Thank you! That single animation you suggested is working so far. I set the animations to the closed/off position while targeting all elements with the class. Then I set animations in the on/highlighted position to target only children or siblings of the class.
Two hiccups: the accordion container is a sibling to the trigger not a child, while the arrow is a child, which threw me off.
And weirdly if I try to change the class target from “all elements” to “only children” then it will automatically change every action involving that element to that setting. The class target of the action cannot be changed without affecting the other actions that target that element. I hope I’m wording that okay. To work around this, I had to select another element with the same class. So if I set an action on the 1st accordion content, even if that action applies to the class not the element, I still have to select the 2nd accordion content to make another action that targets the children of the class.
But I got everything working the way I wanted in a single animation so thank you!
You know, after I responded to you I started to see the same thing, i.e. that it’s difficult to do something like this:
First action: set Size on all elements of content div class (Height=0px)
Second action: set Size on only siblings of content div class (Height=auto)
I was getting the same behavior, with the interface changing all references to content div so that everything is either “all elements” or “only siblings”. That’s a little frustrating.
I don’t know how you figured out that selecting a different element with the same class would be a workaround for this. I never would have thought of that, but I tried it and that seems to work for me as well!
There does not need to be a delay in the animation. The first actions just need to be listed first. I also set an initial state and made it animate on hover and it still works! I might remove hover as it’s not so smooth.
Putting it all in one animation solves a bunch of problems I was having by dividing my interactions up. Thank you for that.
Looks great! And not having to apply a delay is even better. I’m glad you figured out how to select multiple variations on the same Class inside a single animation. I feel like that’s a helpful detail and I couldn’t figure it out.