Trying to make a Jquery function work

hochpierrejean · March 29, 2021, 12:01pm

Hello, so, I would like tu put in my website that function :
On eacg scroll, the animated element performs it’s animation. With this code, it is supposed to do it every time it appears on the page, and not once the first time you pass on.

But I can’t seem to make it work… If somebody can’t teach me !

I make an html element on Wix editor with this html code :

<style>
h2{
  margin: 0;
  padding: 10px; 0
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0px;
  font-size:18px
}
.container{
  min-height: 300px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner-content{
    display:flex;
    justify-content:center;
    align-items:center;
    width:200px;
    height:300px;
}
.box_1{
    align-self: flex-end;
    opacity: 0.5;
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    overflow: hidden;
    -webkit-transition: opacity 0.5s,-webkit-transform 0.7s;
    transition: opacity 0.5s,-webkit-transform 0.7s;
    -o-transition: opacity 0.5s,transform 0.7s;
    transition: opacity 0.5s,transform 0.7s;
    transition: opacity 0.5s,transform 0.7s,-webkit-transform 0.7s;
    margin-bottom: 20px;
}
.box_1.animated{
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
</style>

<div class="container">
  <div class="inner-content">
    <div class="box_1"><h2>TEST</h2><p>Test test test</p></div>
</div>
</div>

And, on Velo I put this code on my masterPage.js after I install the npm package (jquery, @type/jquery, jsdom and punycode)=

import $ from "jquery";
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

const punycode = require('punycode');

var $animation_elements = $('.box1');
var $window = $(window);

function check_if_in_view() {
 var window_height = $window.height();
 var window_top_position = $window.scrollTop();
 var window_bottom_position = (window_top_position + window_height);
 
  $.each($animation_elements, function() {
 var $element = $(this);
 var element_height = $element.outerHeight();
 var element_top_position = $element.offset().top;
 var element_bottom_position = (element_top_position + element_height);
 
 
 if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('animated');
    } else {
      $element.removeClass('animated');
    }
  });
}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

But, when I preview my result, I have this error message :

Cannot find module 'punycode' in 'public/pages/masterPage.js' (in red)
Loading the code for the site. To debug this code, open masterPage.js in Developer Tools.
Loading the code for the Projet Naegari page. To debug this code, open amch9.js in Developer Tools.

I think i was wrong on my html element… But in truth, i have no idea

If someone can help me it will be great !
Or if someone have another solution to anime an elements everytime you scroll in (and not juste once like the default effect in Wix) I take it

Thank a lot

CODE-NINJA · March 29, 2021, 3:37pm

To animate some of your elements on your page/site, you can use predefined animations, like shown here in this VELO-API…
https://www.wix.com/velo/reference/wix-crm/$w-wixforms/show

This would show an element in a normal way…

$w("#myElement").show();

This one would do the same, but with some animation…

$w("#myElement").show('fade');

You have a choice of the following predefined animations…

You also can give your selected animation some options, like…

—> “duration”
—> “delay”
—> “direction”
and so on…

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

And use them in your selected animation…

$w("#myElement").show('fade', fadeOptions);

Another possibility you will find here…

An example-code could look like this…

let floatOptions = {
  "duration":   2000,
  "delay":      500,
  "direction":  "top"
};

$w.onReady(()=>{
    $w('#myElement').onClick(()=>{
        $w('#myElement2').show('float', floatOptions)
    })
})

hochpierrejean · March 29, 2021, 3:52pm

Yes of course,

these possibilities are also available in the simple editor of Wix, but I want this animation to be performed at each passage of the scroll, even during the same session.

These effects shown are achieved only once, during the first passage if I’m not mistaken

And it is this mechanism that the Jscode that I wanted to implement is supposed to be made…

With these properties, I can just show / hide the elements at the end of their initial animation.
What I want to take as a trigger is if it is visible or not on the page, on the screen depending on the position of the scroll bar:

If it is visible: show,

If it is not visible: hide

At each passage of the scroll bar

CODE-NINJA · March 29, 2021, 4:01pm

What I want to take as a trigger is if it is visible or not on the page, on the screen depending on the position of the scroll bar:
As initial triggering event-handlers?
https://www.wix.com/velo/reference/$w/postpage/onviewportenter
https://www.wix.com/velo/reference/$w/postpage/onviewportleave

You scroll your site where you have your elements on.
When one of your elements reaches/gets the → “viewportEnter” → do something?

hochpierrejean · March 29, 2021, 4:04pm

God ! These triggers already exist!

You teach me something, I will try ASAP and I tell you if I was successed

Thanks a lot

CODE-NINJA · March 29, 2021, 4:05pm

Read this post here, it also could be very useful for you…
https://www.wix.com/velo/forum/community-discussion/scrollto
and perhaps this one, too…
https://www.wix.com/velo/forum/community-discussion/auto-scroll-effect-between-two-strips

hochpierrejean · March 29, 2021, 6:56pm

So… IT’S WORKING GREAT !!

With any external cods, that was anwsom, thanks so much !

For those who would go through it, we cannot use the elements that we want to announce as a trigger:
I used a transparent box as a trigger and it works wonderfully!

This is what my code gives in the final to annimate an element, it’s so simple …

let floatEffectOption = {
 "duration":   1500,
 "delay":     0,
 "direction" : "right"
};

export function box16_viewportEnter(event) {
  $w('#image4').show("float",floatEffectOption)
  **// You can add other items 
}
export function box16_viewportLeave(event) {
  $w('#image4').hide("float",floatEffectOption)
  **// You can add other items 
}

Thank again Russian-dima

CODE-NINJA · March 29, 2021, 10:01pm

No problem you are welcome .
Good luck and happy coding.

Topic		Replies	Views
Some code and animation not functioning on live site Ask the community code , question	6	407	May 10, 2019
Can't get animation to repeat while scrolling the website Ask the community code , question	11	2862	May 6, 2023
Animate an element using code Ask the community code , question	0	53	June 20, 2022
Animated Header Issue Ask the community code , question	9	553	April 5, 2019
Animation 'on scroll'(??) Ask the community code , question	0	368	March 9, 2019

Trying to make a Jquery function work

Related topics