File: //proc/thread-self/cwd/wp-content/themes/kidzieo/js/gsap-animation.js
gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother);
gsap.config({
nullTargetWarn: false,
trialWarn: false
});
/*---- Functions ----*/
function pbmit_img_animation() {
const boxes = gsap.utils.toArray('.pbmit-animation-style1,.pbmit-animation-style2,.pbmit-animation-style3,.pbmit-animation-style4,.pbmit-animation-style5,.pbmit-animation-style6');
boxes.forEach(img => {
gsap.to(img, {
scrollTrigger: {
trigger: img,
start: "top 70%",
end: "bottom bottom",
toggleClass: "active",
once: true,
}
});
});
}
// ** Hover Image Effect ** \\
function pbmit_hover_img() {
const pbmitHoverImg = gsap.utils.toArray(".pbmit-ihbox-style-2,.pbmit-timeline .pbmit-content, .pbmit-team-style-2 .pbminfotech-box-content-inner,.pbmit-element-service-style-9 article, .pbmit-miconheading-style-20");
pbmitHoverImg.forEach((target) => {
const pbmitImg = target.querySelector('.pbmit-hover-img');
const t1 = gsap.timeline();
t1.to(pbmitImg, {
opacity: 1,
duration: 0.4,
scale: 1,
ease: "Power2.easeOut"
})
target.pbmitHoverAnim = t1.play().reversed(true);
target.addEventListener("mouseenter", pbmithoverimg);
target.addEventListener("mouseleave", pbmithoverimg);
target.addEventListener("mousemove", (e) => {
let xpos = e.offsetX;
let ypos = e.offsetY;
const t1 = gsap.timeline();
t1.to(pbmitImg, { x: xpos, y: ypos });
});
});
function pbmithoverimg() {
this.pbmitHoverAnim.reversed(!this.pbmitHoverAnim.reversed());
}
}
function getpercentage(x, y, elm) {
elm.find('.pbmit-fid-inner').html(y + '/' + x);
var cal = Math.round((y * 100) / x);
return cal;
}
function pbmit_staticbox_hover() {
var pbmit_var = jQuery('.pbmit-element-service-style-2, .pbmit-element-service-style-3, .pbmit-element-static-box-style-1, .pbmit-element-static-box-style-2, .pbmit-element-static-box-style-4');
if (!pbmit_var.length) {
return;
}
pbmit_var.each(function() {
var pbmit_Class = ' .pbmit-element-posts-wrapper > .pbmit-ele-static-box, .swiper-static-slide-nav li, .pbmit-hover-inner li';
jQuery(this)
.find(pbmit_Class).first()
.addClass('pbmit-active');
jQuery(this)
.find(pbmit_Class)
.on('mouseover', function() {
jQuery(this).addClass('pbmit-active').siblings().removeClass('pbmit-active');
});
});
}
function pbmit_title_animation() {
ScrollTrigger.matchMedia({
"(min-width: 991px)": function() {
var pbmit_var = jQuery('.pbmit-custom-heading , .pbmit-heading-subheading');
if (!pbmit_var.length) {
return;
}
const quotes = document.querySelectorAll(".pbmit-heading-subheading .pbmit-element-title, .pbmit-custom-heading .pbmit-element-title");
quotes.forEach(quote => {
//Reset if needed
if (quote.animation) {
quote.animation.progress(1).kill();
quote.split.revert();
}
var getclass = quote.closest('.pbmit-heading-subheading, .pbmit-custom-heading').className;
var animation = getclass.split('animation-');
if (animation[1] == "style4") return
quote.split = new SplitText(quote, {
type: "lines,words,chars",
linesClass: "split-line"
});
gsap.set(quote, { perspective: 400 });
if (animation[1] == "style1") {
gsap.set(quote.split.chars, {
opacity: 0,
y: "90%",
rotateX: "-40deg"
});
}
if (animation[1] == "style2") {
gsap.set(quote.split.chars, {
opacity: 0,
x: "50"
});
}
if (animation[1] == "style3") {
gsap.set(quote.split.chars, {
opacity: 0,
});
}
quote.animation = gsap.to(quote.split.chars, {
scrollTrigger: {
trigger: quote,
start: "top 90%",
},
x: "0",
y: "0",
rotateX: "0",
opacity: 1,
duration: 1,
ease: Back.easeOut,
stagger: .02
});
});
},
});
}
function pbmit_sticky() {
ScrollTrigger.matchMedia({
"(min-width: 1200px)": function() {
let pbmit_sticky_container = jQuery(".pbmit-sticky-col");
let section = pbmit_sticky_container.closest('.elementor-section');
if (!section[0]) {
section = pbmit_sticky_container.closest('.pbmit-sticky-section');
}
let tl = gsap.timeline({
scrollTrigger: {
pin: pbmit_sticky_container,
scrub: 1,
start: "top top",
trigger: section,
end: () => "+=" + ((section.height() + 250) - window.innerHeight),
invalidateOnRefresh: true
},
defaults: { ease: "none", duration: 1 }
});
},
});
}
function pbmit_set_tooltip() {
jQuery('[data-cursor-tooltip]').each(function() {
var thisele = jQuery(this);
var thisele_html = thisele.find('.pbminfotech-box-content').html();
thisele.attr("data-cursor-tooltip", thisele_html);
});
}
function pbmit_button_hover() {
const all_btns = gsap.utils.toArray(".pbmit-btn-style-text.pbmit-btn-shape-outline .elementor-button-wrapper,.pbmit-btn-style-text.pbmit-btn-shape-outline .pbmit-button-wrapper");
if (all_btns.length > 0) {
var all_btn = gsap.utils.toArray(".pbmit-btn-style-text.pbmit-btn-shape-outline .elementor-button-wrapper,.pbmit-btn-style-text.pbmit-btn-shape-outline .pbmit-button-wrapper");
}
else {
var all_btn = gsap.utils.toArray("#elementor-button-wrapper");
}
const all_btn_cirlce = gsap.utils.toArray(".pbmit-btn-style-text.pbmit-btn-shape-outline .elementor-button, .pbmit-btn-style-text.pbmit-btn-shape-outline .pbmit-button");
all_btn.forEach((btn, i) => {
jQuery(btn).mousemove(function (e) {
callParallax(e);
});
function callParallax(e) {
parallaxIt(e, all_btn_cirlce[i], 10);
}
function parallaxIt(e, target, movement) {
var $this = jQuery(btn);
var relX = e.pageX - $this.offset().left;
var relY = e.pageY - $this.offset().top;
gsap.to(target, 0.5, {
x: ((relX - $this.width() / 2) / $this.width()) * movement,
y: ((relY - $this.height() / 2) / $this.height()) * movement,
ease: Power2.easeOut,
});
}
jQuery(btn).mouseleave(function (e) {
gsap.to(all_btn_cirlce[i], 0.5, {
x: 0,
y: 0,
ease: Power2.easeOut,
});
});
});
}
function pbmit_button_hover_move() {
jQuery('.pbmit-btn-style-text.pbmit-btn-shape-outline .elementor-button, .pbmit-btn-style-text.pbmit-btn-shape-outline .pbmit-button').on('mouseenter', function (e) {
var x = e.pageX - jQuery(this).offset().left;
var y = e.pageY - jQuery(this).offset().top;
jQuery(this).find('.pbmit-button-hover').css({
top: y,
left: x
});
});
jQuery('.pbmit-btn-style-text.pbmit-btn-shape-outline .elementor-button, .pbmit-btn-style-text.pbmit-btn-shape-outline .pbmit-button').on('mouseout', function (e) {
var x = e.pageX - jQuery(this).offset().left;
var y = e.pageY - jQuery(this).offset().top;
jQuery(this).find('.pbmit-button-hover').css({
top: y,
left: x
});
});
}
function pbmit_card_verticel_pinning() {
var pbmit_var = jQuery('.pbmit-element-card-box-style-1');
if (!pbmit_var.length) {
return;
}
ScrollTrigger.matchMedia({
"(min-width: 992px)": function() {
let pbmitpanels = gsap.utils.toArray(".pbmit-element-card-box-style-1 .pbmit-card-box-wrapper");
const spacer = 0;
let pbmitheight = pbmitpanels[0].offsetHeight + 120;
pbmitpanels.forEach((pbmitpanel, i) => {
ScrollTrigger.create({
trigger: pbmitpanel,
start: () => "top 100px",
endTrigger: '.pbmit-element-card-box-style-1',
end: `bottom top+=${pbmitheight + (pbmitpanels.length * spacer)}`,
pin: true,
pinSpacing: false,
});
});
},
"(max-width:992px)": function() {
ScrollTrigger.getAll().forEach(pbmitpanels => pbmitpanels.kill(true));
}
});
}
function pbmit_row_class() {
jQuery(".wpem-row,#event-listing-view").addClass("row");
}
ScrollTrigger.addEventListener("refresh", pbmit_title_animation);
ScrollTrigger.matchMedia({
"(max-width: 1200px)": function() {
ScrollTrigger.getAll().forEach(t => t.kill());
}
});
// on ready
jQuery(document).ready(function() {
pbmit_staticbox_hover();
pbmit_title_animation();
pbmit_row_class();
});
// on resize
jQuery(window).resize(function() {
pbmit_title_animation();
});
// on load
jQuery(window).on('load', function() {
pbmit_hover_img();
pbmit_img_animation();
pbmit_sticky();
pbmit_button_hover();
pbmit_button_hover_move();
pbmit_set_tooltip();
pbmit_card_verticel_pinning();
pbmit_title_animation();
// Init cursor
const cursor = new Cursor();
jQuery('[data-magnetic]').each(function() { new Magnetic(this); });
gsap.delayedCall(1, () =>
ScrollTrigger.getAll().forEach((t) => {
t.refresh();
})
);
});