How exactly can I recreate the animation from the https://theme.co/x sales page for the video modal? I’ve got a modal setup and positioned how I want, but I can’t figure out how to replicate the infinite animation with the pulsing color.
This can be disregarded - added my own css infinite pulse.
Unless I’m just blind or not using Pro correctly, it seems like implementing animation-iteration-count : infinite; into a toggle would be easy and helpful for users.
Hello Kevin,
Thanks for writing in! It is good to know that you have resolve the issue already.
Best Regards.
@ruenel Is there a way to target only the toggle for modals?
Such as: .toggle {XXXXXXX;}
I’m target the toggle right now, but the target changes when I update my layout or the section. Right now I’m using:
.x-anchor.x-anchor-toggle.has-graphic.e208-27.m5s-29.m5s-2a
but this changes frequently.
Hi Kevin,
You can add a class to the Toggle directly through the Toggle > Customize tab as shown in the given screenshot and add the custom CSS code based on that class.
Hope it helps.
Thanks
@tristup This was the first solution I used, but it applies the class to the entire element. My intent is to animate ONLY the toggle. Your solution animates the modal as well. I can achieve this by inspecting the toggle, but the class changes whenever I adjust the section.
I wasn’t sure if there was a class for ONLY the toggle that isn’t seen in the editor. Such as .toggle or something.
EDIT: Disregard, answered my own question. .x-anchor-toggle is the class for the toggle only.
Hi Kevin,
Instead of using .x-anchor.x-anchor-toggle.has-graphic.e208-27.m5s-29.m5s-2a you can use test-tog the custom class added through the customize tab so it does not affect if you change the Layout or add any new element to your page. If you want any specific selector inside the Toggle you can use the custom class as parent selector.
Hope it helps.
Thanks
@tristup I think I see what you are saying. Applying my animations to .test-tog was making the modal activated by the toggle infinite pulse.
But using .x-anchor.x-anchor-toggle.has-graphic.e208-27.m5s-29.m5s-2a.test-tog targets the toggle only and wont change?
Hi Kevin,
Instead of this .x-anchor.x-anchor-toggle.has-graphic.e208-27.m5s-29.m5s-2a.test-tog you can use .test-tog and that will work same. If you explain what exactly you are trying with this custom class, we may help you further on this.
Thanks
@tristup I am animating ONLY the toggle of a content modal that contains an embedded video. Using only the .test-tog results in the modal and video being animated too.
After messing around for a while, here is the solution to apply the custom class to ONLY the toggle and NOT the content inside the modal: .x-anchor.x-anchor-toggle.has-graphic.test-tog
Hi Kevin,
Glad that you are able to find the solution.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.