Okay
  Public Ticket #3619194
Rotating text functionality
Closed

Comments

  • sigmundsquirrel started the conversation

    Is there a way to make the rotating text start "rotating" the words sooner? I'm not talking about the interval between phrases. I know how to set the pause for each new phrase. What I mean is the very first rotation. 

    Right now, when you come to my site, the initial sentence remains in its static state for a longer time than I have the rotating interval set for. People will scroll down the page before they know that the text rotates at all. I need it to start right away. Is there a control for this or a code snippet I can use?

  •  1,920
    Judith replied

    Hello there,

    Thanks for writing to us.

    To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:

    From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:

    .nectar-rotating-words-title .dynamic-words span {
        transition: transform 0.0s cubic-bezier(.2,1,.3,1), opacity .0s cubic-bezier(.2,1,.3,1);
    }

    Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related

    If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help. 

  • sigmundsquirrel replied

    Thanks, Judith. That was cool. I've been adding my custom CSS to the Appearance > Customize > Additional CSS section that comes with standard Wordpress. Is it better to add them to the Salient > General Settings > CSS/Script Related section instead? Is there a difference in performance, or are they simply different ways to do the same thing?

    Thanks for the CSS snippet. It wasn't quite what I'm looking for though. I'm happy with the speed of the transitions as-is from one phrase to another. The effect of the animation is fine. The "Rotating Words Title" component works by sequentially displaying words placed in a comma-separated array. It begins by displaying the first array element (the first words) when the page loads. After a few seconds, the title animates to the second array element, then pauses, then the third, etc. 

    The initial page loads with the first array element displayed.The effect doesn't really "begin" until the second array element animates in. After that, the effect is clear. But until then, the title looks like an ordinary static title.  It seems to me like this remains on the screen too long. A person loading the site will assume the title displayed (the first array element) is the only title. And since I don't have much content at the top of the page, they may/will scroll down before the animation begins. 

    What I would like is to be able to make the animation (the second array element) begin sooner. Not to change the animation speed or transition speed of the general functionality, but to just have the initial title displayed on page load (what looks like the static title) change to the second title almost as soon as the page finishes loading...so it is clear that the title animates. There is a setting in the edit panel for this component that lets me set the timing between animations, but I don't need that. What I need is a setting (or a CSS/JS snippet) that makes the first title animate to the second title right away and then have everything work normally after that.

    This was hard to explain. Does it make sense? And is there a solution?

    tl;dr — Basically, the Rotating Words Title looks like an ordinary title until the first visible animation appears (which is when the first set of words swaps to the second set of words). Can I make this happen sooner? After that, the component is working fine, so I don't need to change the overall animation speed. Just have the first one start sooner.

    Thanks,
    Frank

  •  1,920
    Judith replied

    Hello Frank,

    Thanks for writing back.

    Unfortunately, we currently don't have a way to adjust the rotation to begin sooner

    This would require some extensive customization which I'm afraid we are not able to offer due to support scope limitations.

    However, we are partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/

    In the meantime, please don't hesitate to reach out with further questions. We're happy to help.