Trying to implement custom scroll animation effects with Lax.js into a custom code block

[William_Lee]

Hi lax.js has some awesome scroll animation effects that I would like to use with backendless but I’m not sure how to integrate this with the custom code block and get it to work.

I was able to host a test index.html and style.css files onto a free website so you can see the simple effect that I want to duplicate in Backendless here. I’m attaching images below and also zipping both the working html and css files and uploading it here.

lax_js.zip (967 Bytes)

I tried both to copy and paste the style.css into a new Extension but also tried to do this following automatic loading of CSS file using this blog post.

Then I tried to input the scripting code into the custom code block.

Finally I put the proper class names into the main container block and then the child square block that is supposed to have the scroll effects.

Parent Block

Child Block

The classes string for the scroll effect parameters is cut off in the image so I’m pasting it here below.

lax lax_preset_fadeInOut:105:0.3 lax_preset_scaleInOut:127:0.3 lax_preset_hueRotate:2055:84

Any help would be greatly appreciated with getting Lax.js working with backendless. Thanks!

[Dima (Dima Vak)]

Hello @William_Lee

Could you copy the page and styles, and provide names(in order to create a separate environment where I could make changes without breaking your existed code).

I need an app id and page/container/style names.

Regards, Dima.

[William_Lee]

Hi Dima thanks for getting back to me… Here’s the info:

app name: pcs
app id: 60F3583B-7F8D-F53D-FF3E-1D9E46092D00

page: home
id: blk_outer_frame
class: container

id: box
class: lax lax_preset_fadeInOut:105:0.3 lax_preset_scaleInOut:127:0.3 lax_preset_hueRotate:2055:84

They stylesheet extension is under “lax_js_scroll_animation”

And the custom code block is at the top of on page enter.

This is a testing page so there’s other spinner and lottie effects on it that you can please ignore thanks!!

[Dima (Dima Vak)]

Loot into lax_test page. I have done with one of the examples.

Also for other interested people
That code could help with some of libraries what doesn’t run in a standard way.

function addScript( src, callback ) {
  const s = document.createElement( 'script' );
  s.setAttribute( 'src', src );
  s.onload=callback;
  document.body.appendChild( s );
}

addScript('https://cdn.jsdelivr.net/npm/lax.js', ()=>{
 // write your code here
})

You could add it to Custom Code block.

Regards, Dima

[William_Lee]

Thanks for getting that working…
It’s real nice to know that we can implement these custom js effects!

[William_Lee]

Dima is there anyway I can copy and paste the presets into a container class name like this for the animation?

Or do I need to somehow break this down and insert it into the custom js codeless block for “on page enter” like it seems you did below?

I would like to be able to build the effects using this lax.js preset and preview tool.

[Dima (Dima Vak)]

Dima is there anyway I can copy and paste the presets into a container class name like this for the animation?

In this case - yes. You could use Block component - it’s a div under the hood

Or do I need to somehow break this down and insert it into the custom js codeless block for “on page enter” like it seems you did below?

No, I don’t insert any HTML via JS.
But you could do it both ways.

[William_Lee]

Hi Dima, I’m sorry for the confusion.

I simply don’t know where I can put this lax.js preset values into?

I tried to paste it into the UI builder classes section but it didn’t work.

Am I supposed to insert this preset value into the custom code block?

I’m not sure how to do that since this preset value is only located in the original html file and I can only edit either the js or css files and not the html file.

I tried to look for any preset values in your own code example but didn’t see any so if you could show me where to place this preset value that would be great. Thanks!

[Dima (Dima Vak)]

I tried to paste it into the UI builder classes section but it didn’t work.

I am pretty sure, classes were added. If you want to confirm it, you could inspect the element at Chrome dev tools.
Also, I think it could very helpful for you - learn how to work with dev tools.

Am I supposed to insert this preset value into the custom code block?

As I said earlier, you could do it in both ways

I’m not sure how to do that since this preset value is only located in the original html file and I can only edit either the js or css files and not the html file.

We have already discussed it. You could add a Block, and write classes in designer(as at your first pic)

I tried to look for any preset values in your own code example but didn’t see any so if you could show me where to place this preset value that would be great. Thanks!

What I do for my example:

1. Created Block(container-lax) with Text(text-lax)
2. Added styles
3. Added JS in On Page Enter Handler