Anyway to set font with Color gradient?

[jonathan (Jonathan Deutsch)]

@alexlii

1# There is a scroll time javascript as the following screenshot:

Where is this function being run? I don't see it triggered by any load handlers or timeline actions.

@alexlii

2# You will found there is large empty gap in mobile mode:

This does not occur in the .hype document.

You can start to identify the root of the problem by choose to "Inspect Element" on the white space.

There you will see that your iframe has a height of 8000px:

<iframe style="border:none;" frameborder="0" width="100%" height="8000px" src="https://www.lovcour.com/wp-content/uploads/sites/2/hypeanimations/26/index.html"></iframe>

But your iPhone layout has a height of 7500px. So that's probably the difference.

[alexlii (Alex)]

Hi @jonathan,

1# Do you mean there is no trigger on that page of out site?

If yes, that is just the ISSUE.

Please check the document, and you will find there is a trigger and work fine.

@alexlii

Vitalityfirstversion2.hype.zip (204.4 KB)



Also, I found the trigger works fine at

@jonathan

https://www.lovcour.com/wp-content/uploads/sites/2/hypeanimations/26/index.html

but not work at

@alexlii

https://www.lovcour.com/homenew/water_9a/

So, this issue seems related to the iframe setting at backend of Hype wordpress plugin.

2#

@jonathan

You can start to identify the root of the problem by choose to “Inspect Element” on the white space.

IT is not added by myself, it is handled by Tumult Hype Animations Plugin.

The real reason might be as following reason:

There are two layout:
The mobile layout height is 7500, and the pc layout height is 8000.
and only 8000 is in APPLIED if the project document is set as Iframe at the backend of Hype wordpress plugin.

But only 8000 seems to be applied for both mobile and pc layouts in case of Wordpress.

@Daniel, does that mean this issue is related to the Hype wordpress plugin and it is needed to be upgrade?

---

These two issues only happen when it set as Iframe.

Just as Daniel said:

@Daniel

You have a few options:

1. Switch the embed mode to ‘iframe’ in the panel for the Hype Animations plugin. There is CSS that is in the ‘head’ of the Hype document I shared which handles the gradient. When embedding as a ‘div’ (the default) this code is lost.

But if set as default Div, the Color text Gradient setting will not not work.

Hope you can understand the situation, thanks.

[alexlii (Alex)]

Hi

Here is another one test at Shop | Lovcour.com Smartwatches,Headphones,women's fashion backpacks,Laptop Backpacks,Suit Garment Bags,Camping Hiking Backpacks,Photography Backpacks,Schoolbags,Duffel Bags,outdoor sports backpack,Business Bags,Lovcour Travel Luggage Bags

I tried this way to check whether it will work properly:

@Daniel

2. Include this css directly in the Text Element. You can use the <style> tag anywhere.

The document below would work as an uploaded OAM widget

The mobile layout height is 900, and desktop layout is 1300.

Since it has to be set to iframe for "Add a container around the animation" to make the font color gradient working, in this case, only Desktop layout height will be applied both for mobile and desktop too.

[MaxZieb (Loves Hype)]

Just a side not: @Daniel explained multiple ways to embed Hype in WordPress … iFrame is only one of them. Using bold font seams very demanding … (off topic).

I wouldn’t go with iFrame and just include the styles used in head into your “additional CSS” in the WordPress customizer.

[alexlii (Alex)]

Hello @MaxZieb

Thanks for your suggestion.

I understant what you mean by this way:

@Daniel

Include this CSS in your Wordpress theme’s CSS, or as additional ‘custom CSS’ somewhere on that page:

The reasons why it is not prior choice:

1# For commercial wordpress sites, there are always several guys works on it, not like personal blog site. Cross managing might cause potential problems.

2# Themes are always kept upgrading, but there might be some issue with new latest version, and we always need to switch different themes to check issue.

3#For different themes, there are different ways to insert custom CSS, and might we need third party plugins to insert CSS for some of theme.

Anyway, the issue should be resolved within limitation itself, otherwise, it might become quite complicated.

As to these two ways:

@Daniel

1. Switch the embed mode to ‘iframe’ in the panel for the Hype Animations plugin. There is CSS that is in the ‘head’ of the Hype document I shared which handles the gradient. When embedding as a ‘div’ (the default) this code is lost.

2. Include this css directly in the Text Element. You can use the <style> tag anywhere.

The document below would work as an uploaded OAM widget

I found these two ways are PRACTICALLY same after my test, since we need make three settings for BOTH of them to make them working:

1. Uncheck "protect from external styles"
2. Check "position with CSS left/top" to make it work with Firefox.
3. Set iframe for the animation at wordpress backend

and the same issues with the above two ways:

1.Javascript will not work
2.The height

Thanks

[MaxZieb (Loves Hype)]

Then put it into a style tag inside of Hype. Like Daniel suggested. Don’t use the iFrame in that case. The styles only need to be included once in a first scene (or once per layout if the first layout is already responsive).

[alexlii (Alex)]

Hi @Maxzieb,

Thanks for suggestion.

@MaxZieb

Don’t use the iFrame in that case.

Actually, It works in preview mode, but not work in wordpress.

To make it works on our wordpress site, I found it has to be set as iframe on Tumult Hype Animations as following screenshot, otherwise, the gradient style setting will not work :

@MaxZieb

The styles only need to be included once in a first scene (or once per layout if the first layout is already responsive).

Do you mean, the style tags should be removed from mobile layout?
For test purpose, I already upload a document for your test, and you will note I already set desktop layout as responsive and removed style tags on Mobile layout, here is the screenshot :

Here is document for your check:
gradient_test.hype.zip (89.9 KB)
and the URL on our site:

Shop | Lovcour.com Smartwatches,Headphones,women's fashion backpacks,Laptop...

You will found the gradient setting not working now with div setting, but will work if it is set as iframe.

Thanks

[MaxZieb (Loves Hype)]

gradient_test.hype 2.zip (266,4 KB)

[alexlii (Alex)]

Hi @Maxzieb,

I already upload your this document to wordpress:

@MaxZieb

gradient_test.hype 2.zip (266,4 KB)

it works in Hype preview mode, but not work on wordpress, please check the page atL

@alexlii

Shop | Lovcour.com Smartwatches,Headphones,women's fashion backpacks,Laptop Backpacks,Suit Garment Bags,Camping Hiking Backpacks,Photography Backpacks,Schoolbags,Duffel Bags,outdoor sports backpack,Business Bags,Lovcour Travel Luggage Bags

[jonathan (Jonathan Deutsch)]

@alexlii

Please check the document, and you will find there is a trigger and work fine.

Thanks, I see it now. Viewport Actions are currently based on the document and not the window; this effectively means they can't be used correctly in iframes. It sounds like using the <div> method for the wordpress plugin will solve a lot of the problems (but may cause others for you based on how your site is made).

There is a newer technology called IntersectionObserver that can be a solution to this problem. We plan to adopt it for Hype's waypoints, but until then you can manually use it. I believe there's a couple examples in the forums with an "IntersectionObserver" search. Just be aware it does require semi-newer browsers to use.

[MaxZieb (Loves Hype)]

Try using the !important keyword on the styles. Other then that I don’t have time to debug your implementation.

[alexlii (Alex)]

Thanks

There is a setting on your document as the screenshot:

and I removed the instant jump setting and add a button as below:

but it will not work either with default Div setting on Hype wordpress plugin unless add those CSS into wordpress theme.

I am not asking you to debug now, just clarify the issue in this situation, and you may check below if you like:

https://www.lovcour.com/gradient-test-by-maxzieb/

Thanks

[MaxZieb (Loves Hype)]

Please read my replies… use the !important keyword on the styles. You are using the !important keyword only on some style rules not all… specially the background rule and text mask etc.

Screenshots are not helping. Please only include when necessary and please learn to use the Browser Console and Inspector. They can tell you a lot about style rules and what is applied and not!

[alexlii (Alex)]

@MaxZieb

use the !important keyword on the styles. You are using the !important keyword only on some style rules not all… specially the background rule and text mask etc.

Thanks, I am sure that I already test to input !important for all of them, but it does not work either in this case, and I already add CSS into theme. For now, it seems it is only way to make it work just like @daniel show below, it is not perfect, but it is working way indeed:

@Daniel

Include this CSS in your Wordpress theme’s CSS, or as additional ‘custom CSS’ somewhere on that page:

 <style>

 .texture-2 {
 background-repeat: no-repeat;
 background-image: url('https://www.lovcour.com/wp-content/uploads/sites/2/2019/05/My-Girlfriend-is-An-Agent-e1493668518484.jpg');
 background-position-x: 50%!important;
 background-position-y: 50%!important;
 background-size: 100%!important;
 }
 .texture-2 {
 color: #d6785d;
 }
 .masked-copy {
 -webkit-background-clip: text;
 color: transparent !important;
 }
 .masked-copy {
 padding-bottom: 12px;
 margin-bottom: -12px;
 }

 </style>

Thanks

[alexlii (Alex)]

@jonathan

There is a newer technology called IntersectionObserver

Hi @jonathan,

I just studied IntersectionObserver Intersection Observer

and I found it support lots of functions, but you know I am not technical background, so does it will meet the feature request at this post?
Feature requests upon friendly web page building for NON software coding background - #11 by MaxZieb

By the way, is there a milestone for IntersectionObserver please or any place to catch up the upcoming features of Hype please?

Thanks

[MaxZieb (Loves Hype)]

The !important keyword is missing from every second line. Put it at the end of the lines … specially the WebKit lines and the behind the URL of the texture.

[MaxZieb (Loves Hype)]

About the mentioned implementation of intersection Observer. It tracks the events and enter and exit and broadcasts them as custom behavior. The progress can also be used with a call back. These are fairly easy concepts. So If you create a square from starting at 600px with a height of 1000px and set the trigger offset to your desire … like 0.5 (middle if the screen) you get an enter custom behavior when the square touches the trigger line in the middle of the screen. Then for a height of 1000 pixel you get the progress in percent that can be used in the callback. Then you get the exit event. Technically you also get directional exit and enter events too. Thats all illustrated in the example. So include the minified version and then transfer some of the data settings from the example. If this is to much to ask maybe the project is still not well enough document for your level of expertise. I might make one explainer video on it but that might take some time so …

[MaxZieb (Loves Hype)]

@alexlii

Thanks, I am sure that I already test to input !important for all of them

I added them in the inspector on your page and it works so not sure what you tested.

[alexlii (Alex)]

Hi @Maxzieb,

Oh… God, Yes, it works, and it seems that I mis updated the document.

This is really a flexible way to manage the gradient CSS, and no need input those CSS into theme CSS one by one.

Really PERFECT!!!