<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
initMagicScroll();
function initMagicScroll() {
const groups = [];
$('.uc-rightscroll, .uc-leftscroll').each(function() {
if ($(this).prev().hasClass('uc-rightscroll') && $(this).hasClass('uc-rightscroll')) {
groups[groups.length - 1].$els = groups.at(-1).$els.add($(this));
return;
}
if ($(this).prev().hasClass('uc-leftscroll') && $(this).hasClass('uc-leftscroll')) {
groups[groups.length - 1].$els = groups.at(-1).$els.add($(this));
return;
}
groups.push({
$els: $(this),
options: {
dir: $(this).hasClass('uc-leftscroll') ? 'left' : 'right'
}
});
});
const map = {};
for (let group of groups) {
const id = 'uc' + Date.now();
map[id] = group;
const extraStyle = group.options.dir === 'right' ? `left: -${group.$els.length - 1}00vw; flex-direction: row-reverse;` : '';
group
.$els
.css({
flex: '0 0 100vw',
})
.wrapAll(`<div id="pin-${id}" style="overflow: hidden; width: 100vw; height: 100vh;"><div id="${id}" style="display: flex; width: ${group.$els.length}00vw; height: 100%; position: relative; ${extraStyle}"></div></div>`);
}
const controller = new ScrollMagic.Controller();
for (let id in map) {
const delta = 100 - 100 / map[id].$els.length;
const sign = (map[id].options.dir === 'left') ? '-' : '';
const animation = new TimelineMax().to(`#${id}`, 1, {x: `${sign}${delta}%`, ease: Linear.easeNone});
new ScrollMagic.Scene({
triggerElement: `#pin-${id}`,
triggerHook: "onLeave",
duration: `${map[id].$els.length}00%`
})
.setPin(`#pin-${id}`)
.setTween(animation)
.addTo(controller);
}
}
</script>