Adding CSS animations and JS

[ProfessorStomp]

Hello,

I am attempting to add css animations to row elements. The css animations work, but I am having trouble getting the JS to work when the row is visible in the browser window. This is what I’ve done:

Added “tag” to the rows that I want to have the css applied.

Here is the css

.tag {
}

.tag {
opacity: 0;
transform: translate(0, 10vh);
transition: all 1.0s;
}

.tag.visible {
opacity: 1;
transform: translate(0, 0);
}

And then here is the JS, which does not seem to be working.

$(document).on("scroll", function() {
var pageTop = $(document).scrollTop();
var pageBottom = pageTop + $(window).height();
var tags = $(".tag");

for (var i = 0; i < tags.length; i++) {
var tag = tags[i];

if ($(tag).position().top < pageBottom) {
$(tag).addClass("visible");
} else {
$(tag).removeClass("visible");
}
}
});

I’ve added the CSS to the page using the css flyout within the PRO editor. This isn’t global css, but specific to the page I’m editing. I’ve added the JS in a similar fashion.

Let me know if there is anything I’m missing which is preventing this from working.

Thank so much!

[tristup]

Hi ProfessorStomp,

Thanks for reaching out.
What you are trying to do is required customization and beyond the scope of our theme support, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Although there are no options right now, in the near future, you can have the Effect Module for the elements, which can be applied to different types like scroll and others. Please find more details about the Effect Module was posted in our October Status Report here: https://theme.co/content/status-report-october-02-2020

Hope it helps.
Thanks