forrestkirby

If I set to autoplay there is no hover function. It just plays once and then stops.

Correct, unless you check the option *Loop animation*, then the animation will continuously play in a loop.

If I set to mouse enter it doesn’t play on page load.

Correct, because the mouse enter event is the trigger to start the animation.

It seems to just play once on mouse enter but not if you hover again.

Please do not mix up these two things: (1) the animation playing once or in a loop and (2) what happens on mouse leave if *Trigger* is set to *Mouse Enter*.

About (1): If *Loop animation* is not checked, the animation will only play once until its last frame (or until the frame defined by the settings in *Animation End*). If *Loop animation* is checked though, the animation will start over again.

About (2): If *On Mouse Leave* is set to *Continue* (and *Trigger* is set to *Mouse Enter*), the animation will start playing when the mouse enters the animation and continue to play, no matter whether the mouse leaves the animation or not. If *On Mouse Leave* is set to *Pause* (and *Trigger* is set to *Mouse Enter*), the animation will start playing when the mouse enters the animation and pause when the mouse leaves the animation. When the mouse enters the animation, it will continue playing and stop again when the mouse leaves the animation.

On the Lottie element demo page under Demo 3, you will find an example that has checked the option *Loop animation* and set *On Mouse Leave* to *Pause*.

I’m a bit confused on the code. You would put that in the Yootheme script field? Generally with javascript I would use the script field.

No, the instructions refer to the file /wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-lottie/js/hd-lottie.js, I didn’t express that clearly, sorry.

Hi carlodamo,

please recompile the style. See https://yootheme.com/support/yootheme-pro/wordpress/style-customizer#recompile-style for instructions on how to do this.

Best regards

Hi Jamie,

I guess this is possible but I don’t quite understand what you want to achieve with this. If autoplay on page load is enabled, the animation will play anyway. If you then hover the animation with your mouse, it will simply continue to play. When your mouse then leaves the animation, it will stop playing and not start unless you hover it again. Is this what you are aiming for? I am asking because imagining this behaviour it sounds rather unintuitive. But nevertheless, here you go:

• add this.isFirstPlay = true; at the end of the constructor function
• after case 'mouseenter': add the line if (this.isFirstPlay) { this.isFirstPlay = false; anim.playSegments(anim.initialSegment, true); }
• change line if (this.player.dataset.onMouseleave !== 'pause') anim.playSegments(anim.initialSegment, true); to if (this.player.dataset.onMouseleave !== 'pause' && !this.isFirstPlay) anim.playSegments(anim.initialSegment, true);

I guess this should do the trick. Have a nice day!

Kind regards

I don’t understand your comment about changing the plugin. The timeline element is using the exact same dynamic content features any default multiple item element like grid, switcher etc is using. So if it’s possible with one of the default elements, it most likely also possible with the timeline element. I think it’s rather a question on how you set up your repeater and the dynamic content for this item as there are multiple ways to use this combination. For example, you could have a repeater item with only a single text as sub-item or with different kinds of fields as sub-items such as number, checkbox etc. Therefore, I cannot provide general instructions and would need to take a look at the site in question or at least be able to reproduce the setup on my end.

Kind regards

Hi Remco,

the styles are loaded properly, so no further recompilation is required. As you already indicated, this is probably caused by how the dynamic content is set up. You actually have multiple timelines, each having only one item, instead of one single timeline with multiple items. For further advice, I would need to know the exact stepts to reproduce the problem or take a look at the website in question.

Kind regards
Thomas

Hi andersjytzler,

thanks for the kind feedback. Please try to recompile the style after the first installation of the plugin as described here: https://yootheme.com/support/yootheme-pro/wordpress/style-customizer#recompile-style

Best regards
Thomas

Hi slipperjon,

it seems that the CSS & JS resources are not loaded on your page. I cannot tell the exact reason why, maybe a third party plugin is blocking this or optimizing too much or there is an issue with your server configuration. It does not seem to be a compatibility issue between the version of the plugin and YOOtheme Pro as I could not reproduce this issue on a new WordPress installation with only YOOtheme Pro 2.7.24 and Herzog Dupont 1.6.1. I would recommend to update YOOtheme Pro to the latest 2.x version or even to 3.0 nevertheless (always make a backup before the update).

As a workaround, please try to add an HTML to your layout with the following content (replace example.com by your domain, of course):

<script src="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-progress/js/hd-progress.js" defer></script>
<link href="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-counter/css/hd-counter.css" rel="stylesheet" />
<script src="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-counter/js/hd-counter.js" defer></script>
<link href="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-flipcard/css/hd-flipcard.css" rel="stylesheet" />
<script src="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-flipcard/js/hd-flipcard.js" defer></script>
<link href="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-image-comparison/css/hd-image-comparison.css" rel="stylesheet" />
<script src="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-image-comparison/js/hd-image-comparison.js" defer></script>
<script src="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-lottie/app/lottie.min.js" defer></script>
<script src="https://example.com/wp-content/plugins/herzog-dupont/includes/modules/elements/elements/hd-lottie/js/hd-lottie.js" defer></script>

For further investigation, I would need access to the WordPress dashboard and FTP access.

Kind regards

• This reply was modified 2 years ago by forrestkirby.
• This reply was modified 2 years ago by forrestkirby.
• This reply was modified 2 years ago by forrestkirby.

You set Target to .show-bio and leave CLS empty.

Target is the CSS selector to target the elements you want to toggle, in this case all elements with the class show-bio. CLS is the class that shall be toggled and defaults to the hidden attribute if left empty. As you don’t want to add/remove a class, but toggle the visibility, you can leave it empty.

Then edit the text element you want to appear after the button has been clicked. Go to the Advanced tab and into the field Class enter show-bio and into the field Attributes enter hidden. This means that this element is initially hidden. The attribute will then be removed when you click on the toggle button. If you have multiple toggles, use a different class each time if you don’t want to show all texts at once.

Maybe also take a look at the documentation on the toggle component: https://getuikit.com/docs/toggle

Please update to the latest version of the plugin which is 1.6.1. It has just been released yesterday. It fixes an issue where the render condition was too strict. Do you still experience the issue (button not displayed) after the update?

Hi Shawn,

you are right, the revealed text (field CONTENT 2) is positioned beneath the toggle button and there is no setting to change this. You can try to change the order by adding the following into the field CSS in the Advanced tab of the element, though:

css
.el-element {
    display: grid;
}
.el-element > div:nth-child(2) {
    order: 3;
}

Alternatively, you can leave the content fields empty and use separate elements which are both positioned above the button and toggle one of these or all with the toggle element. Give the elements you want to toggle a class, e. g. my-class, and set the same class in the settings of the toggle element in the field CLS. See Demo 2 on the demo page for an example.

Kind regards
Thomas

The margin is there on purpose. It’s meant to prevent the slider icon (slider thumb) from overlaying other content or not being accessible. The margin is added regardless of the row layout.

The calculation of the margin is actually not quite right at the moment, this will be fixed with aa69bd2. But the fact that there is a margin is intentional.

So if you do not want to have this margin, you are totally right in adding a CSS rule to customize the styling as there is no option to turn it off.

• This reply was modified 2 years, 2 months ago by forrestkirby.

Hi applestalk,

I am sorry, but I cannot confirm this. The width/height settings work just as intended (see the documentation on Width and Height) and there is no different behaviour depending on the row layout.

Maybe there’s a misunderstanding in what you expected these settings to do. Could you please elaborate what your settings are and what outcome you expected?

Kind regards
Thomas

Hi mosaiq,

thanks for your positive feedback!

To position the Content2 to the left of your icon, please try these steps:

– set Position to relative in the HD Toggle element settings
– add the following at Advanced > CSS in the HD Toggle element

css
.el-element > div:first-child {
    margin: 0px;
}
.el-element > [id^="toggle-"] {
    position: absolute;
    left: -100px;
    top: 10px;
    margin: 0px !important;
}

Adjust the values for top and left to your needs.

—

Screenshots

https://www.screencast.com/t/jmlZkdNp
https://www.screencast.com/t/f6lx50dFX

—

Note: Usually, I would suggest to position the Content2 as follows, but due to the animation using the transform property, this would look odd.

css
.el-element > div:first-child {
    margin: 0px;
}
.el-element > [id^="toggle-"] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%,-50%);
    margin: 0px !important;
}

Kind regards

• This reply was modified 2 years, 4 months ago by forrestkirby.
• This reply was modified 2 years, 4 months ago by forrestkirby.
• This reply was modified 2 years, 4 months ago by forrestkirby.
• This reply was modified 2 years, 4 months ago by forrestkirby.
• This reply was modified 2 years, 4 months ago by forrestkirby.

Hi fahmifitu,

unfortunately, ~theme is empty at the moment when 'theme' => function (Config $config) {} is being executed (confirmed by YOOtheme). Therefore, I will remove the check for the element status in the next version. Once there is a way to properly perform this check, I might eventually add it again.

Kind regards

Hi fahmifitu,

is_null($config->get('~theme.hd.elements')) is required if a user has not yet saved the settings for Herzog Dupont within YOOtheme Pro. In this case, ~theme.hd.elements will be null but the LESS files should still be loaded, e. g. if the plugin has been initially installed.

However, as you correctly noticed $config->get('~theme.hd.elements') always returns null in the theme function. This is wrong and I will take a look at the issue. Thanks for reporting!

Kind regards