We Keep Coding

Trigger animation with GSAP ScrollTrigger

I've created a CSS3 Animation with a scroll trigger that I'd need in GSAP ScrollTrigger since AddEventListener('scroll'... is not compatible with GSAP because it uses some different mechanisms for scrolling.
This is the current animation that I've created:
https://jsfiddle.net/nyofa3cb/13/
This is what I've tried to do in GSAP ScrollTrigger, but hasn't worked:
gsap.to('.glitch-slide', {
keyframes: {
"0%": { backgroundPosition: '0 0' },
"10%": { backgroundPosition: '5px 0' },
"20%": { backgroundPosition: '-5px 0' },
"30%": { backgroundPosition: '15px 0' },
"40%": { backgroundPosition: '-25x 0' },
"50%": { backgroundPosition: '-50px 0' },
"60%": { backgroundPosition: '0 -20px' },
"70%": { backgroundPosition: '-60px -20px' },
"80%": { backgroundPosition: '0 0' },
"90%": { backgroundPosition: '20px 0'},
"100%": { backgroundPosition: '0 0'},
easeEach: 'expo.inOut'
},
ease: 'none',
duration: 1
})

You can add your keyframes to css and create class that init this animation. With that all you need to start this animation is to add created class to element using ScrollTrigger.
onEnter
onEnter: ({progress, direction, isActive}) => documentQuerySelector('.my-selector').classList.add('active')
or
toggleClass: {targets: ".my-selector", className: "active"}
Here are examples https://greensock.com/docs/v3/Plugins/ScrollTrigger

Lightbox like a popup

This code is a lightbox, but it's necessary click to show the content, and I need it appearing without click. Automatic. Kind a pop up.
$(document).ready(function() {
$('.lightbox').click(function() {
$('.background, .box').animate({
'opacity': '.60'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').css('display', 'block');
});
$('.close').click(function() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});;
});
});

How's this? Move code into functions and then just run open popup function on document ready:
$(document).ready(function() {
$('.lightbox').click(function() {
openPopup();
});
$('.close').click(function() {
closePopup();
});
$('.background').click(function() {
closePopup();
});
openPopup();
});
function openPopup() {
$('.background, .box').animate({
'opacity': '.60'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').css('display', 'block');
}
function closePopup() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});
}

You can trigger an event using Jquery. If you want this pop up to open automatically then use
$('.lightbox').trigger("click")
in document.ready function. This will automatically call that class click and by this your light box pop up will open.

Lightbox - Next and Prev buttons

So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/

JavaScript not working on dynamic content

I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?
For example on the parent page's javascript I have:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
and the 'child' page where HTML is loaded from
<li class="page">Home</li>
<li class="page">About Us</li>
<li class="page">Store</li>
<li class="page">News</li>
<li class="page">Contact</li>
Your help would be greatly appreciated!

try using 'delegate' method instead of 'on'.
jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});

if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead.
and when the new elements are loaded the action is already there.
jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});

try using:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -120px)"
}, 750)
});

Close function not working in Jquery

I'm trying to close a pop-up DIV using a closing function with jquery, It worked before I added the position function of the DIV, and something I did must have broken the function... I'm guessing it's a syntax error somewhere, any fresh pair of eyes out there willing to take a look?
Thw working site is at www.masterfade.com/maptest
Here's the code:
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
$('.close').click(function () {
close_box();
});
$('.backdrop').click(function () {
close_box();
});
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}

I think your event bindings and animation functions are call before DOM elements load. So event bindings will not work.
I hope the following codes will work.
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
// following lines are edited
$('.close,.backdrop').click(close_box);
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}
});

so,
i browsed to your website, and with Google Chrome Developer Tools (Console) iv'e manually called $('.lightbox').click() and close_box() and it seems that it's working as excepted and no javascript exception were thrown.
however, i'm not sure that you even understand what's not working.
i highly suggest you to use Chrome browser with developer tools, it will make your life way easier regarding web development.
using this you could monitor javascript errors and debug your code line by line.
good luck