Skip to content

Instantly share code, notes, and snippets.

@patsma

patsma/main.js

Created July 19, 2021 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save patsma/f09e2896043751597473467882838c2a to your computer and use it in GitHub Desktop.
Save patsma/f09e2896043751597473467882838c2a to your computer and use it in GitHub Desktop.
Download ZIP
ScrollTrigger example
Raw
main.js
// "use strict";
window.addEventListener('load', () => {
(function () {
gsap.registerPlugin(ScrollTrigger);
gsap.set('body', {autoAlpha: 1})
gsap.set('html', {overflow: 'visible'})
let select = x => document.querySelector(x)
let selectAll = x => document.querySelectorAll(x);
let mobileBreakPoint = 800;
//NAVIGATION
let header = select('header')
let headerIn = select('.header-inn ');
let headerInClone = headerIn.cloneNode(true);
headerInClone.classList.add('sticky');
header.appendChild(headerInClone)
// PAGES
const amenitiesPage = selectAll('#amenities-page').length;
const apartmentsPage = selectAll('#apartments-page').length;
const millharbourPage = selectAll('#millharbour-page').length;
const homePage = selectAll('#home-page').length;
const registerPage = selectAll('#register-page').length;
const privacyPage = selectAll('#privacy-page').length;
const termsPage = selectAll('#terms-page').length;
const cookiesPage = selectAll('#cookies-page').length;
const contactPage = selectAll('#contact-page').length;
const journalPage = selectAll('#journal-page').length;
// PAGES END
const triggerMenu = selectAll('#trigger-menu').length;
function animatedCursor() {
gsap.set(".cursor", {xPercent: -50, yPercent: -50});
var ball = document.querySelector(".cursor");
var pos = {x: window.innerWidth / 2, y: window.innerHeight / 2};
var mouse = {x: pos.x, y: pos.y};
var speed = 0.1;
var fpms = 60 / 1000;
var xSet = gsap.quickSetter(ball, "x", "px");
var ySet = gsap.quickSetter(ball, "y", "px");
window.addEventListener("mousemove", e => {
mouse.x = e.x;
mouse.y = e.y;
});
gsap.ticker.add((time, deltaTime) => {
var delta = deltaTime * fpms;
var dt = 1.0 - Math.pow(1.0 - speed, delta);
pos.x += (mouse.x - pos.x) * dt;
pos.y += (mouse.y - pos.y) * dt;
xSet(pos.x);
ySet(pos.y);
});
}
let locoScroll
locoScroll = new LocomotiveScroll({
el: document.querySelector(".wrapper"),
smooth: true,
});
locoScroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(".wrapper", {
scrollTop(value) {
return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector(".wrapper").style.transform ? "transform" : "fixed"
});
function menuTriggers() {
var isSTicky = false;
const menuLink = document.querySelectorAll('.menu-link-wrapper');
const exploreLink = document.querySelector('.explore-link');
const exploreLinkTrue = document.querySelectorAll('.explore-link').length;
const exploreLinkNew = document.querySelector('.explore');
const exploreLinkNewTrue = document.querySelectorAll('.explore').length;
const menuToggleTl = gsap.timeline({defaults: {ease: 'sine.out'}});
menuToggleTl.set('nav', {pointerEvents: 'all', display: 'block'})
menuToggleTl.set('html', {overflow: 'hidden'})
menuToggleTl.add('icon-swap')
menuToggleTl.to('nav', {autoAlpha: 1})
menuToggleTl.to('.sticky', {background: 'transparent', height: '7.6vw'}, '<')
menuToggleTl.to('.hamburger', {pointerEvents: 'all'}, '<')
if (journalPage > 0) {
menuToggleTl.to('#journal-page .header-inn', {background: 'transparent'}, '<')
menuToggleTl.to('.journal-back a', {color: '#fff'}, '<')
}
menuToggleTl.from('.hamburger', {opacity: 0, rotation: '-=45'}, 'icon-swap')
menuToggleTl.to('.menu-link-wrapper > span', {opacity: 0}, 'icon-swap-=0.5')
menuToggleTl.from('.nav-items-menu > *', {autoAlpha: 0, y: '+=10', stagger: 0.2}, '-=0.5')
menuToggleTl.from('.nav-footer > *', {autoAlpha: 0, y: '+=10', stagger: 0.2}, '<')
menuToggleTl.to(['.menu-link-wrapper', '.logo svg path', '.register-link'], {
color: '#ffffff',
fill: '#ffffff'
}, 0)
menuToggleTl.reverse()
if (menuLink > 0) {
menuLink[0].addEventListener('click', (e) => {
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
document.querySelector('.header-inn').classList.toggle('menu-active')
if (!isSTicky) {
gsap.to('.sticky', {y: -100, autoAlpha: 0})
} else {
gsap.to('.sticky', {y: 0, autoAlpha: 1})
}
})
menuLink[1].addEventListener('click', () => {
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
document.querySelector('.sticky .register-link').classList.toggle('menu-active')
if (isSTicky) {
gsap.to('.sticky', {y: 0, autoAlpha: 1})
}
})
}
if (exploreLinkTrue > 0) {
exploreLink.addEventListener('click', () => {
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
} else if (!menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
})
}
if (exploreLinkNewTrue > 0) {
exploreLinkNew.addEventListener('click', () => {
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
} else if (!menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
})
}
// var timer = null;
// window.addEventListener('wheel', function (event) {
// if (event.deltaY < 0) {
//
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
// console.log('scrolling up');
// menuFixedTl.play()
//
// }, 150);
//
//
// } else if (event.deltaY > 0) {
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
// console.log('scrolling down');
// menuFixedTl.reverse()
// }, 150);
// }
// }, false);
if (amenitiesPage > 0 && window.innerWidth < mobileBreakPoint) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
gsap.to('.sticky', {y: 0, autoAlpha: 1})
ScrollTrigger.create({
trigger: 'html',
start: 'top top',
scroller: ".wrapper",
// markers: true,
end: '+=150',
toggleActions: "play play reverse reverse",
animation: gsap.to('.header-inn.sticky', {autoAlpha: 0})
})
let windowHeight = window.innerHeight
ScrollTrigger.create({
trigger: 'html',
start: `${windowHeight} top`,
scroller: ".wrapper",
// markers: true,
endTrigger: 'html',
end: 'bottom bottom',
toggleActions: "play play reverse reverse",
onLeaveBack: (self) => {
gsap.to('.sticky', {y: 0, autoAlpha: 1})
gsap.to('.header-inn.sticky', {autoAlpha: 0})
isSTicky = false
},
onUpdate: (self) => {
if (self.direction < 0) {
isSTicky = true
gsap.to('.sticky', {y: 0, autoAlpha: 1})
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
} else if (self.direction > 0) {
isSTicky = false
gsap.to('.sticky', {y: -100, autoAlpha: 0})
}
},
onToggle: (self) => {
if (self.progress === 1) {
if (!homePage > 0 && !journalPage > 0 && !cookiesPage > 0 && !termsPage > 0 && !privacyPage > 0) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
menuToggleTl.play()
menuLink[0].addEventListener('click', function () {
console.log(menuToggleTl.reversed())
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
})
}
}
}
})
ScrollTrigger.refresh();
} else {
ScrollTrigger.create({
trigger: 'html',
start: 'top top',
scroller: ".wrapper",
// markers: true,
end: '+=150',
toggleActions: "play play reverse reverse",
animation: gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
})
let windowHeight = window.innerHeight
ScrollTrigger.create({
trigger: 'html',
start: `${windowHeight} top`,
scroller: ".wrapper",
// markers: true,
endTrigger: 'html',
end: 'bottom bottom',
toggleActions: "play play reverse reverse",
animation: gsap.to('.sticky', {y: 0, autoAlpha: 1}),
onLeaveBack: (self) => {
gsap.to('.sticky', {y: -100, autoAlpha: 1})
isSTicky = false
},
onUpdate: (self) => {
if (self.direction < 0) {
isSTicky = true
let tl = gsap.timeline();
tl
.to('.sticky', {y: 0, autoAlpha: 1})
.to('.header-inn:not(.sticky)', {autoAlpha: 0},'<')
} else if (self.direction > 0) {
isSTicky = false
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
// gsap.to('.sticky', {y: -100, autoAlpha: 0})
// }, 20);
}
},
onToggle: (self) => {
// console.log(self)
if (self.progress === 1) {
if (!homePage > 0 && !journalPage > 0 && !cookiesPage > 0 && !termsPage > 0 && !privacyPage > 0 && !registerPage > 0) {
console.log('trigger menu')
let tl = gsap.timeline();
tl
.to('.sticky', {y: -100, autoAlpha: 0})
.to('.header-inn:not(.sticky)', {autoAlpha: 1},'<')
menuToggleTl.play()
menuLink[0].addEventListener('click', function () {
console.log(menuToggleTl.reversed())
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
})
}
}
}
})
ScrollTrigger.refresh();
}
}
function menuTriggersHome() {
var isSTicky = false;
const menuLink = document.querySelectorAll('.menu-link-wrapper');
const exploreLink = document.querySelector('.explore-link');
const exploreLinkTrue = document.querySelectorAll('.explore-link').length;
const exploreLinkNew = document.querySelector('.explore');
const exploreLinkNewTrue = document.querySelectorAll('.explore').length;
const menuToggleTl = gsap.timeline({defaults: {ease: 'sine.out'}});
menuToggleTl.set('nav', {pointerEvents: 'all', display: 'block'})
menuToggleTl.set(['.nav-bottom-overlay', '.nav-imgs', '.nav-overlays'], {
pointerEvents: 'all',
display: 'none'
})
menuToggleTl.set('html', {overflow: 'hidden'})
menuToggleTl.add('icon-swap')
menuToggleTl.to('.banner-info > *', {autoAlpha: 0, stagger: 0.3})
menuToggleTl.to('nav', {autoAlpha: 1})
menuToggleTl.to('.sticky', {background: 'transparent', height: '7.6vw'}, '<')
menuToggleTl.to('.video-panel--overlay', {backgroundColor: 'rgba(0, 0, 0, 0.4)'}, '<')
menuToggleTl.to('.hamburger', {pointerEvents: 'all'}, '<')
if (journalPage > 0) {
menuToggleTl.to('#journal-page .header-inn', {background: 'transparent'}, '<')
}
menuToggleTl.from('.hamburger', {opacity: 0, rotation: '-=45'}, 'icon-swap')
menuToggleTl.to('.menu-link-wrapper > span', {opacity: 0}, 'icon-swap-=0.5')
menuToggleTl.from('.nav-items-menu > *', {autoAlpha: 0, y: '+=10', stagger: 0.2}, '-=0.5')
menuToggleTl.from('.nav-footer > *', {autoAlpha: 0, y: '+=10', stagger: 0.2}, '<')
menuToggleTl.to(['.menu-link-wrapper', '.logo svg path', '.register-link'], {
color: '#ffffff',
fill: '#ffffff'
}, 0)
menuToggleTl.reverse()
menuLink[0].addEventListener('click', () => {
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
document.querySelector('.header-inn').classList.toggle('menu-active')
if (!isSTicky) {
gsap.to('.sticky', {y: -100, autoAlpha: 0})
} else {
gsap.to('.sticky', {y: 0, autoAlpha: 1})
}
})
menuLink[1].addEventListener('click', () => {
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
document.querySelector('.sticky .register-link').classList.toggle('menu-active')
if (isSTicky) {
gsap.to('.sticky', {y: 0, autoAlpha: 1})
}
})
if (exploreLinkTrue > 0) {
exploreLink.addEventListener('click', () => {
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
} else if (!menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
})
}
if (exploreLinkNewTrue > 0) {
exploreLinkNew.addEventListener('click', () => {
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
} else if (!menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
menuToggleTl.reversed() ? menuToggleTl.play() : menuToggleTl.reverse();
})
}
// var timer = null;
// window.addEventListener('wheel', function (event) {
// if (event.deltaY < 0) {
//
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
// console.log('scrolling up');
// menuFixedTl.play()
//
// }, 150);
//
//
// } else if (event.deltaY > 0) {
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
// console.log('scrolling down');
// menuFixedTl.reverse()
// }, 150);
// }
// }, false);
ScrollTrigger.create({
trigger: 'html',
start: 'top top',
scroller: ".wrapper",
// markers: true,
end: '+=150',
toggleActions: "play play reverse reverse",
animation: gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
})
var timer = null;
let windowHeight = window.innerHeight
ScrollTrigger.create({
trigger: 'html',
start: `${windowHeight} top`,
scroller: ".wrapper",
// markers: true,
endTrigger: 'html',
end: 'bottom bottom',
toggleActions: "play play reverse reverse",
onLeaveBack: (self) => {
gsap.to('.sticky', {y: -100, autoAlpha: 1})
// gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
isSTicky = false
},
onUpdate: (self) => {
if (self.direction < 0) {
//
isSTicky = true
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
console.log('scrolling up');
gsap.to('.sticky', {y: 0, autoAlpha: 1})
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
// }, 20);
} else if (self.direction > 0) {
isSTicky = false
// if (timer !== null) {
// clearTimeout(timer);
// }
// timer = setTimeout(function () {
console.log('scrolling down');
gsap.to('.sticky', {y: -100, autoAlpha: 0})
// }, 20);
}
},
onToggle: (self) => {
// console.log(self)
if (self.progress === 1) {
if (!homePage > 0 && !journalPage > 0 && !cookiesPage > 0 && !termsPage > 0 && !privacyPage > 0) {
console.log('trigger menu')
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 1})
menuToggleTl.play()
menuLink[0].addEventListener('click', function () {
console.log(menuToggleTl.reversed())
if (menuToggleTl.reversed()) {
gsap.to('.header-inn:not(.sticky)', {autoAlpha: 0})
}
})
}
}
}
})
ScrollTrigger.refresh();
}
function video() {
jQuery(document).ready(function () {
fullwidthHeroVideo();
});
jQuery(window).bind("debouncedresize", function () {
fullwidthHeroVideo();
});
var fullwidthHeroVideo = function () {
jQuery('.video-pannel').each(function () {
var width = jQuery(this).width(),
pWidth, // player width, to be defined
height = jQuery(this).height(),
pHeight, // player height, tbd
$vimelarPlayer = jQuery(this).find('iframe'),
$vimelarOverlay = jQuery('.video-panel--overlay'),
videoRatio = 16 / 9;
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / videoRatio < height) {
pWidth = Math.ceil(height * videoRatio); // get new player width
$vimelarPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
$vimelarOverlay.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // overlay width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / videoRatio); // get new player height
$vimelarPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
$vimelarOverlay.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // overlay height is greater, offset top; reset left
}
});
}
}
const initialTl = gsap.timeline();
initialTl.to('body', {autoAlpha: 1})
initialTl.to('.loader-bg', {autoAlpha: 0, display: 'none'})
initialTl.from('.header-inn > * ', {
autoAlpha: 0, y: '+=50', ease: 'back(0.1)', stagger: {
amount: 0.1,
from: 'center'
}
})
if (millharbourPage > 0 || apartmentsPage > 0) {
initialTl.from('.banner-content', {
autoAlpha: 0, y: '+=50', ease: 'sine.out', stagger: {
amount: 0.3,
from: 'center'
}
})
}
if (journalPage > 0) {
initialTl.from('.jbi-text > *', {
autoAlpha: 0, y: '+=50', ease: 'sine.out', stagger: {
amount: 0.3,
from: 'center'
}
})
}
if (amenitiesPage > 0) {
initialTl.from('.amenities-img-wrapper > *', {
autoAlpha: 0, duration: 4, ease: 'sine.out', stagger: {
amount: -4,
from: 'center'
}
})
}
function animationsApartments() {
// SECTION 02 ANIMATION
const section02Tl = gsap.timeline();
section02Tl
.from('#section-02 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-02',
// markers: true,
start: 'top 35%',
end: '100%',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section02Tl
})
// SECTION 03 ANIMATION
const section03Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section03Tl
// .from('#section-03 > *', {clipPath: "inset(20% 20% 0% 20%)"})
// .from('#section-03 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-03',
// markers: true,
start: 'top top',
end: 'bottom top',
pin: true,
scroller: ".wrapper",
// scrub: 2,
toggleActions: "play play reverse reverse",
animation: section03Tl
})
// SECTION 04 ANIMATION
const section04Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section04Tl
.from('#section-04 .ttbi-fadeUp', {autoAlpha: 0})
// .addPause()
// .add('reveal-image')
// .to('#section-04 .image__overlay', {scaleY: 0, transformOrigin: '50% 0%'})
.from('#section-04 .ttbi-image', {
autoAlpha: 0,
duration: 1,
ease: 'power4.out',
transformOrigin: '50% 100%'
})
ScrollTrigger.create({
trigger: '#section-04',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
// scrub: true,
scroller: ".wrapper",
toggleActions: "play complete reverse reverse",
animation: section04Tl
})
// SECTION 05 ANIMATION
const section05Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section05Tl
.to('#section-05 .fixed-bg ', {
backgroundPositionY: 100
})
ScrollTrigger.create({
trigger: '#section-05',
scroller: ".wrapper",
start: 'top-=25% center',
end: 'bottom top',
scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: section05Tl
})
ScrollTrigger.create({
trigger: '#section-05',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
// animation: gsap.from('#section-05 .caption', {autoAlpha: 0, y: '+=50'}, 0)
})
// SECTION 06 ANIMATION
const section06Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section06Tl
.from('#section-06 .iwft-top picture', {
autoAlpha: 0,
yPercent: "-=10",
duration: 2
})
.from('#section-06 .iwft-bottom', {
autoAlpha: 0,
yPercent: "+=40",
duration: 2
}, '<')
.add('both', '+=0.1')
.to('#section-06 .iwft-top picture', {y: '+=400', autoAlpha: 0, ease: 'since.out', duration: 1}, 'both')
.to('#section-06 .iwft-bottom', {y: "-=400", autoAlpha: 0, ease: 'since.out', duration: 1}, 'both')
ScrollTrigger.create({
trigger: '#section-06',
// markers: true,
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
pin: true,
toggleActions: "play play reverse reverse",
animation: section06Tl
})
// SECTION 07 ANIMATION
const section07Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section07Tl
.to('#section-07 .fixed-bg ', {
backgroundPositionY: 100
})
ScrollTrigger.create({
trigger: '#section-07',
scroller: ".wrapper",
start: 'top-=25% center',
end: 'bottom top',
scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: section07Tl
})
ScrollTrigger.create({
trigger: '#section-07',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
// animation: gsap.from('#section-07 .caption', {autoAlpha: 0, y: '+=50'}, 0)
})
// SECTION 08 ANIMATION
const section08Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section08Tl
.from('#section-08 .caption', {autoAlpha: 0, y: '+=50'})
.from('#section-08 .iwc-image', {
autoAlpha: 0,
duration: 1,
ease: 'power4.out',
transformOrigin: '50% 100%'
}, '<')
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'top center',
// markers: true,
// pin: true,
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section08Tl
})
// SECTION 09 ANIMATION
const section09Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section09Tl
.to('#section-09 .fixed-bg ', {
backgroundPositionY: 100
})
ScrollTrigger.create({
trigger: '#section-09',
scroller: ".wrapper",
start: 'top-=25% center',
end: 'bottom top',
scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: section09Tl
})
ScrollTrigger.create({
trigger: '#section-09',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
// animation: gsap.from('#section-09 .caption', {autoAlpha: 0, y: '+=50'}, 0)
})
// SECTION 10 ANIMATION
const section10Tl = gsap.timeline();
section10Tl
.from('#section-10 h2', {autoAlpha: 0, duration: 1})
.from('#section-10 .tctwi-left > *', {autoAlpha: 0, duration: 1, y: '-=50', stagger: 0.3})
.from('#section-10 .tctwi-right > *', {autoAlpha: 0, duration: 1, y: '-=50', stagger: 0.3})
ScrollTrigger.create({
trigger: '#section-10',
start: 'top center',
scroller: ".wrapper",
end: '400px 80%',
toggleActions: "play play reverse reverse",
animation: section10Tl
})
// SECTION 11 ANIMATION
const section11Tl = gsap.timeline();
section11Tl
.from('#section-10 h2', {autoAlpha: 0, duration: 1})
.from('#section-10 .tctwi-left > *', {autoAlpha: 0, duration: 1, y: '-=50', stagger: 0.3})
.from('#section-10 .tctwi-right > *', {autoAlpha: 0, duration: 1, y: '-=50', stagger: 0.3})
ScrollTrigger.create({
trigger: '#section-11',
start: 'top center',
end: 'bottom top',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section11Tl
})
// SECTION 11secondPart ANIMATION
const section11secondPartTl = gsap.timeline();
section11secondPartTl
.to('.tctwi-pan-image picture.second', {autoAlpha: 0, duration: 1, stagger: 0.5})
ScrollTrigger.create({
trigger: '.tctwi-bottom-content',
start: 'top top',
end: 'bottom top',
// markers: true,
pin: true,
scrub: 1,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section11secondPartTl
})
// SECTION 11thirdPart ANIMATION
const section11thirdPartTl = gsap.timeline();
section11thirdPartTl
.from('#section-11 .fics-in', {filter: 'grayscale(1)', duration: 1})
ScrollTrigger.create({
trigger: '#section-11 .fics-in',
start: 'top top',
end: 'bottom top',
scroller: ".wrapper",
// markers: true,
toggleActions: "play play reverse reverse",
animation: section11thirdPartTl
})
// SECTION 15 ANIMATION
const section15Tl = gsap.timeline();
section15Tl
.from('.section-15-sage-kitchen-caption', {autoAlpha: 0, y: '+=20', duration: 1}, '<')
.to('.section-15-sage-kitchen-caption', {autoAlpha: 0, duration: 1})
.to('#section-15 .register-img picture:nth-child(2)', {autoAlpha: 0, duration: 1})
.from('.section-15-sky-kitchen-caption', {autoAlpha: 0, duration: 1}, '<')
ScrollTrigger.create({
trigger: '#section-15',
start: 'top top',
// markers: true,
end: '250%',
pin: true,
scroller: ".wrapper",
scrub: 1,
toggleActions: "play play reverse reverse",
animation: section15Tl
})
//
//
// SECTION 13 ANIMATION
const section13Tl = gsap.timeline();
section13Tl
.from('#section-13 .fwst-in', {autoAlpha: 0, y: '+=100', duration: 1})
ScrollTrigger.create({
trigger: '#section-13',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section13Tl
})
// SECTION 14 ANIMATION
const section14Tl = gsap.timeline();
section14Tl
.to('#bs-section4', {autoAlpha: 0, duration: 1})
.to('#bs-section3', {autoAlpha: 0, duration: 1})
.to('#bs-section2', {autoAlpha: 0, duration: 1})
ScrollTrigger.create({
trigger: '#section-14',
start: 'top top',
// markers: true,
end: '250%',
scroller: ".wrapper",
pin: true,
scrub: 1,
toggleActions: "play play reverse reverse",
animation: section14Tl
})
// SECTION 12 ANIMATION
ScrollTrigger.create({
trigger: '#section-12',
start: 'top top',
// markers: true,
scroller: ".wrapper",
pin: true,
// scrub: true,
toggleActions: "play play reverse reverse",
})
}
function animationsApartmentsMobile() {
// SECTION 02 ANIMATION
const section02Tl = gsap.timeline();
section02Tl
.from('#section-02 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-02',
// markers: true,
start: 'top 35%',
end: '100%',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section02Tl
})
// SECTION 03 ANIMATION
const section03Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section03Tl
.from('#section-03 > *', {clipPath: "inset(20% 20% 0% 20%)"})
.from('#section-03 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-03',
// markers: true,
start: 'top top',
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
// scrub: 2,
toggleActions: "play play reverse reverse",
animation: section03Tl
})
// SECTION 04 ANIMATION
const section04Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section04Tl
.from(['#section-04 .ttbi-fadeUp','#section-04 .ttbi-image'], {autoAlpha: 0,stagger:0.3})
// .to('#section-04 .image__overlay', {
// scaleY: 0,
// duration: 1,
// ease: 'power4.out',
// transformOrigin: '50% 0'
// }, '-=0.5')
ScrollTrigger.create({
trigger: '#section-04',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
// scrub: true,
scroller: ".wrapper",
toggleActions: "play complete reverse reverse",
animation: section04Tl
})
// SECTION 05 ANIMATION
const section05Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section05Tl
// .from('#section-05 > *', {clipPath: "inset(0% 20% 0% 20%)"})
// .from('#section-05 .fixed-bg', {backgroundPositionY: ' -300px'}, '<')
.from('#section-05 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-05',
// markers: true,
start: 'top top',
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section05Tl
})
// SECTION 06 ANIMATION
const section06Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section06Tl
.from('#section-06 .iwft-top picture', {
autoAlpha: 0,
yPercent: "-=10",
duration: 2
})
.from('#section-06 .iwft-bottom', {
autoAlpha: 0,
yPercent: "+=40",
duration: 2
}, '<')
.add('both', '+=0.1')
.to('#section-06 .iwft-top picture', {y: '+=400', autoAlpha: 0, ease: 'since.out', duration: 1}, 'both')
.to('#section-06 .iwft-bottom', {y: "-=400", autoAlpha: 0, ease: 'since.out', duration: 1}, 'both')
ScrollTrigger.create({
trigger: '#section-06',
// markers: true,
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// pin: true,
toggleActions: "play play reverse reverse",
animation: section06Tl
})
// SECTION 07 ANIMATION
const section07Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section07Tl
.to('#section-07 .fixed-bg', {scale: 1.1})
.from('#section-07 .caption', {autoAlpha: 0, y: '+=50'})
// .to('#section-07 .fixed-bg', {backgroundPosition: '-50px -100px'}, '<')
ScrollTrigger.create({
trigger: '#section-07',
// markers: true,
start: 'top top',
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section07Tl
})
// SECTION 08 ANIMATION
const section08Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section08Tl
.from('#section-08 .iwc-in > *', {
autoAlpha: 0,
duration: 1,
ease: 'power4.out',
transformOrigin: '50% 100%',
stagger:0.3
})
// .to('#section-08 .image__overlay', {
// scaleY: 0,
// duration: 1,
// ease: 'power4.out',
// transformOrigin: '50% 0'
// }, '-=0.5')
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'top center',
// markers: true,
// pin: true,
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section08Tl
})
// SECTION 09 ANIMATION
const section09Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section09Tl
// .from('#section-09 > *', {clipPath: "inset(0% 20% 0% 20%)"})
.from('#section-09 .fixed-bg', {scale: 1.1, transformOrigin: 'center center'}, '<')
.from('#section-09 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-09',
// markers: true,
start: 'top top',
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
scrub: 2,
toggleActions: "play play reverse reverse",
animation: section09Tl
})
// SECTION 10 ANIMATION
const section10Tl = gsap.timeline();
section10Tl
.from(['#section-10 h2','#section-10 .tctwi-left > *','#section-10 .tctwi-right > *'], {autoAlpha: 0, duration: 1,stagger:0.3,y:'-=50'})
ScrollTrigger.create({
trigger: '#section-10',
start: 'top center',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section10Tl
})
// SECTION 11 ANIMATION
const section11Tl = gsap.timeline();
section11Tl
.from('#section-10 h2', {autoAlpha: 0, duration: 1})
.from('#section-10 .tctwi-left > *', {autoAlpha: 0, duration: 1, y: '-=50', stagger: 0.3})
.from('#section-10 .tctwi-right > *', {autoAlpha: 0, duration: 1, y: '-=50', stagger: 0.3})
ScrollTrigger.create({
trigger: '#section-11',
start: 'top center',
end: 'bottom top',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section11Tl
})
// SECTION 11secondPart ANIMATION
const section11secondPartTl = gsap.timeline();
section11secondPartTl
.to('.tctwi-pan-image picture.second', {autoAlpha: 0, duration: 1, stagger: 0.5})
ScrollTrigger.create({
trigger: '.tctwi-bottom-content',
start: 'top top',
end: 'bottom top',
// markers: true,
// pin: true,
scrub: 1,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section11secondPartTl
})
// SECTION 11thirdPart ANIMATION
const section11thirdPartTl = gsap.timeline();
section11thirdPartTl
.from('#section-11 .fics-in', {filter: 'grayscale(1)', duration: 1})
ScrollTrigger.create({
trigger: '#section-11 .fics-in',
start: 'top center',
end: 'bottom top',
scroller: ".wrapper",
// markers: true,
toggleActions: "play play reverse reverse",
animation: section11thirdPartTl
})
// SECTION 12 ANIMATION
const section12Tl = gsap.timeline();
section12Tl
// .add('change-01')
// .to('.tab-nav ul li:nth-child(1)', {fontSize: '5vw', color: '#c75436'})
// .to('.tab-nav ul li:nth-child(1)', {fontSize: '61px', color: '#323232'}, '+=0.5')
//
// .add('change-02')
// .to('.tab-nav ul li:nth-child(2)', {fontSize: '5vw', color: '#c75436'}, 'change-02')
// .to('.tab-image:nth-child(4)', {autoAlpha: 0}, 'change-02')
// .set('.tab-content-info:nth-child(1)', {autoAlpha: 0, display: 'none'}, 'change-02')
// .set('.tab-content-info:nth-child(2)', {autoAlpha: 1, display: 'block'}, 'change-02')
// .to('.tab-nav ul li:nth-child(2)', {fontSize: '61px', color: '#323232'}, '+=0.5')
//
// .add('change-03')
// .to('.tab-nav ul li:nth-child(3)', {fontSize: '5vw', color: '#c75436'}, 'change-03')
// .to('.tab-image:nth-child(3)', {autoAlpha: 0}, 'change-03')
// .set('.tab-content-info:nth-child(2)', {autoAlpha: 0, display: 'none'}, 'change-03')
// .set('.tab-content-info:nth-child(3)', {autoAlpha: 1, display: 'block'}, 'change-03')
// .to('.tab-nav ul li:nth-child(3)', {fontSize: '61px', color: '#323232'}, '+=0.5')
//
// .add('change-04')
// .to('.tab-nav ul li:nth-child(4)', {fontSize: '5vw', color: '#c75436'}, 'change-04')
// .to('.tab-image:nth-child(2)', {autoAlpha: 0}, 'change-04')
// .set('.tab-content-info:nth-child(3)', {autoAlpha: 0, display: 'none'}, 'change-04')
// .set('.tab-content-info:nth-child(4)', {autoAlpha: 1, display: 'block'}, 'change-04')
//
// .to('.tab-nav ul li:nth-child(4)', {fontSize: '61px', color: '#323232'}, '+=0.5')
ScrollTrigger.create({
trigger: '#section-12',
start: 'top top',
// markers: true,
scroller: ".wrapper",
// pin: true,
// scrub: true,
toggleActions: "play play reverse reverse",
animation: section12Tl
})
// SECTION 13 ANIMATION
const section13Tl = gsap.timeline();
section13Tl
.from('#section-13 .fwst-in', {autoAlpha: 0, y: '+=100', duration: 1})
ScrollTrigger.create({
trigger: '#section-13',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section13Tl
})
// SECTION 15 ANIMATION
const section15Tl = gsap.timeline();
section15Tl
.from('.section-15-sage-kitchen-caption', {autoAlpha: 0, y: '+=20', duration: 1}, '<')
.to('.section-15-sage-kitchen-caption', {autoAlpha: 0, duration: 1})
.to('#section-15 .register-img picture:nth-child(2)', {autoAlpha: 0, duration: 1})
.from('.section-15-sky-kitchen-caption', {autoAlpha: 0, duration: 1}, '<')
ScrollTrigger.create({
trigger: '#section-15',
start: 'top top',
// markers: true,
end: '100%',
pin: true,
scroller: ".wrapper",
scrub: 1,
animation: section15Tl
})
// SECTION 14 ANIMATION
const section14Tl = gsap.timeline();
section14Tl
.to('#bs-section4', {autoAlpha: 0, duration: 1})
.to('#bs-section3', {autoAlpha: 0, duration: 1})
.to('#bs-section2', {autoAlpha: 0, duration: 1})
ScrollTrigger.create({
trigger: '#section-14',
start: 'top top',
// markers: true,
end: '250%',
scroller: ".wrapper",
pin: true,
scrub: 4,
animation: section14Tl
})
}
function animationsAmenities() {
// gsap.set(['.header-inn > *', '.logo svg path', '.register-link'], {color: '#333333', fill: '#333333'})
// SECTION 01 ANIMATION
const section01Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section01Tl
// .from('#section-01 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-01',
// markers: true,
start: 'top top',
// pin: true,
end: '100%',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section01Tl
})
// SECTION 02 ANIMATION
const section02Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section02Tl
// .from('#section-02 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-02',
// markers: true,
start: 'bottom top',
// pinReparent: true,
// pin: true,
end: 'bottom bottom',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section02Tl
})
// SECTION 03 ANIMATION
const section03Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section03Tl
.from('#section-03 > *', {autoAlpha: 0, y: '+=100', ease: 'sine.out', duration: 1})
ScrollTrigger.create({
trigger: '#section-03',
// markers: true,
start: 'top center',
end: 'bottom bottom',
// pin: true,
scroller: ".wrapper",
// scrub: 2,
toggleActions: "play play reverse reverse",
animation: section03Tl
})
// SECTION 04 ANIMATION
// const section04Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
// section04Tl
// // .from('#section-04 > *', {autoAlpha: 0, y: '+=100'})
//
//
// ScrollTrigger.create({
// trigger: '#section-0402',
// markers: true,
// start: 'top top',
// pin: '#section-05',
// pinReparent: true,
// pinSpacing: false,
// end: 'bottom bottom',
// scroller: ".wrapper",
// toggleActions: "play play reverse reverse",
// animation: section04Tl
//
// })
// SECTION 0401 ANIMATION
const section0401Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section0401Tl
.from(['#section-0401 .yah-top-left', '#section-0401 .yah-top-right'], {
x: '-=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-04',
// markers: true,
start: 'top center',
end: 'bottom bottom',
// pin: true,
// scrub: true,
scroller: ".wrapper",
toggleActions: "play complete reverse reverse",
animation: section0401Tl
})
// SECTION 0402 ANIMATION
const section0402Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section0402Tl
.from(['#section-0402 .yah-bottom-left', '#section-0402 .yah-bottom-right'], {
x: '+=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-0402',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
// scrub: true,
scroller: ".wrapper",
toggleActions: "play complete reverse reverse",
animation: section0402Tl
})
// SECTION 05 ANIMATION
const section05Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section05Tl
.from('#section-05 > div > div.fixed-bg.bgimgsrc', {
scale: 0.9,
ease: 'sine.out',
transformOrigin: 'center center'
})
ScrollTrigger.create({
trigger: '#section-05',
// markers: true,
start: 'top top',
end: 'bottom top',
pin: true,
pinReparent: true,
// pinSpacing: false,
scroller: ".wrapper",
scrub: true,
toggleActions: "play play reverse reverse",
animation: section05Tl
})
// SECTION 06 ANIMATION
const section06Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section06Tl
.from('#section-06 > *', {
autoAlpha: 0,
yPercent: "+=50",
duration: 2,
stagger: 0.3
})
ScrollTrigger.create({
trigger: '#section-06',
// markers: true,
scroller: ".wrapper",
start: 'top center',
end: 'bottom top',
// pin: true,
toggleActions: "play none none none",
animation: section06Tl
})
// SECTION 07 ANIMATION
const section07Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section07Tl
.from('#section-07 > div:nth-child(4)', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-07 > div:nth-child(4) > div.caption', {autoAlpha: 0, y: '+=50'},'<')
.to('#section-07 > div:nth-child(4)', {autoAlpha: 0})
.to('#section-07 > div:nth-child(4) > div.caption', {autoAlpha: 0, y: '-=50'},'<')
.from('#section-07 > div:nth-child(3)', {
ease: 'sine.out',
transformOrigin: 'center center'
},'<')
.from('#section-07 > div:nth-child(3) > div.caption', {autoAlpha: 0, y: '+=50'},'<')
.to('#section-07 > div:nth-child(3)', {autoAlpha: 0})
.to('#section-07 > div:nth-child(3) > div.caption', {autoAlpha: 0, y: '-=50'},'<')
.from('#section-07 > div:nth-child(2)', {
ease: 'sine.out',
transformOrigin: 'center center'
},'<')
.from('#section-07 > div:nth-child(2) > div.caption', {autoAlpha: 0, y: '+=50'},'<')
.to('#section-07 > div:nth-child(2)', {autoAlpha: 0})
.to('#section-07 > div:nth-child(2) > div.caption', {autoAlpha: 0, y: '-=50'},'<')
.from('#section-07 > div:nth-child(1)', {
ease: 'sine.out',
transformOrigin: 'center center'
},'<')
.from('#section-07 > div:nth-child(1) > div.caption', {autoAlpha: 0, y: '+=50'},'<')
.to('body',{autoAlpha:1,duration:0.5})
ScrollTrigger.create({
trigger: '#section-07',
// markers: true,
start: 'top top',
end: '800%',
pin: true,
scrub: true,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section07Tl
})
// SECTION 08 ANIMATION
const section08Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section08Tl
.from(['#section-08 .hw-top', '#section-08 .hw-bottom'], {
y: '+=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'center center',
// markers: true,
pin: true,
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section08Tl
})
// SECTION 09 ANIMATION
const section09Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section09Tl
// .from('#section-09 > *', {clipPath: "inset(0% 20% 0% 20%)"})
.from('#section-09 > div > div.fixed-bg.bgimgsrc', {
scale: 1.2,
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-09 .img-caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-09',
// markers: true,
start: 'top top',
end: 'bottom top',
pin: true,
scroller: ".wrapper",
scrub: 2,
toggleActions: "play play reverse reverse",
animation: section09Tl
})
// SECTION 10 ANIMATION
const section10Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section10Tl
.from(['#section-10 .flexible-family-spaces-top', '#section-10 .flexible-family-spaces-bottom'], {
y: '+=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-10',
start: 'top top',
scroller: ".wrapper",
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section10Tl
})
// SECTION 11 ANIMATION
const section11Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section11Tl
.to('#section-11 .big-img', {
backgroundPositionY: '+=90%',
backgroundSize: '140%',
duration: 4,
})
.from('.big-img .caption-bottom', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-11',
start: 'top top',
end: 'bottom top',
pin: true,
scrub: 2,
// pinReparent: true,
// pinSpacing: false,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section11Tl
})
// SECTION 12 ANIMATION
const section12Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section12Tl
.from('#section-12 > * ', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-12',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
// pin: true,
toggleActions: "play play reverse reverse",
animation: section12Tl
})
// SECTION 13 ANIMATION
const section13Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section13Tl
// .from('#section-13', {y: '-=100', duration: 1})
.from('#section-13 .img-caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-13',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section13Tl
})
// SECTION 14 ANIMATION
/* const section14Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section14Tl
.to('#bs-section4', {autoAlpha: 0, duration: 1})
.to('#bs-section3', {autoAlpha: 0, duration: 1})
.to('#bs-section2', {autoAlpha: 0, duration: 1})
.to('body', {autoAlpha: 1, duration: 4})
ScrollTrigger.create({
trigger: '#section-14',
start: 'top top',
// markers: true,
end: '600%',
scroller: ".wrapper",
pin: true,
scrub: 4,
toggleActions: "play play reverse reverse",
animation: section14Tl
})
*/
// SECTION 15 ANIMATION
const section15Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section15Tl
.from('#section-15 > *', {autoAlpha: 0, y: '+=100', duration: 1})
ScrollTrigger.create({
trigger: '#section-15',
start: 'top center',
// markers: true,
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
scrub: 1,
toggleActions: "play play reverse reverse",
animation: section15Tl
})
// SECTION 16 ANIMATION
const section16Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section16Tl
.from('#section-16 > div > div:nth-child(3) > picture > img', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-16 > div > div:nth-child(3) > div', {autoAlpha: 0, y: '+=50'}, '<')
.to('#section-16 > div > div:nth-child(3) > picture > img', {autoAlpha: 0})
.to('#section-16 > div > div:nth-child(3) > div', {autoAlpha: 0}, '<')
.from('#section-16 > div > div:nth-child(2) > picture > img', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-16 > div > div:nth-child(2) > div', {autoAlpha: 0, y: '+=50'}, '<')
.to('#section-16 > div > div:nth-child(2) > picture > img', {autoAlpha: 0})
.to('#section-16 > div > div:nth-child(2) > div', {autoAlpha: 0}, '<')
.from('#section-16 > div > div:nth-child(1) > picture > img', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-16 > div > div:nth-child(1) > div', {autoAlpha: 0, y: '+=50'}, '<')
.to('#section-16 > div > div:nth-child(1) > picture > img', {autoAlpha: 0})
.to('#section-16 > div > div:nth-child(1) > div', {autoAlpha: 0}, '<')
.fromTo('#section-16 > div > div:nth-child(4) > picture > img', {autoAlpha: 1}, {
autoAlpha: 1,
yPercent: -20
})
.from('#section-16 > div > div:nth-child(4) > div', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-16',
// markers: true,
start: 'top top',
end: '800%',
pin: true,
scrub: true,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section16Tl
})
// ScrollTrigger.create({
// trigger: '#section-16 > div > div:nth-child(2)',
// start: 'top top',
// // markers: true,
// end: 'bottom top',
// pin: true,
// pinReparent: true,
// pinSpacing: true,
// scroller: ".wrapper",
// toggleActions: "play play reverse reverse",
//
// })
// ScrollTrigger.create({
// trigger: '#section-16 > div > div:nth-child(3)',
// start: 'top top',
// // markers: true,
// end: 'bottom top',
// pin: true,
// pinReparent: true,
// pinSpacing: true,
// scroller: ".wrapper",
// toggleActions: "play play reverse reverse",
//
// })
// ScrollTrigger.create({
// trigger: '#section-16 > div > div:nth-child(4)',
// start: 'top top',
// // markers: true,
// end: 'bottom top',
// pin: true,
// scrub: 4,
// // pinReparent: true,
// pinSpacing: false,
// scroller: ".wrapper",
// toggleActions: "play play reverse reverse",
// animation: section16Tl
//
// })
}
function animationsAmenitiesMobile() {
// gsap.set(['.header-inn > *', '.logo svg path', '.register-link'], {color: '#333333', fill: '#333333'})
// SECTION 01 ANIMATION
const section01Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section01Tl
// .from('#section-01 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-01',
// markers: true,
start: 'top top',
// pin: true,
end: '100%',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section01Tl
})
// SECTION 02 ANIMATION
const section02Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section02Tl
// .from('#section-02 > *', {autoAlpha: 0, y: '+=100'})
.from('#section-02 .img-caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-02',
// markers: true,
start: 'top center',
// pinReparent: true,
// pin: true,
end: 'bottom bottom',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section02Tl
})
// SECTION 03 ANIMATION
const section03Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section03Tl
.from('#section-03 > *', {autoAlpha: 0, y: '+=100', ease: 'sine.out', duration: 1})
ScrollTrigger.create({
trigger: '#section-03',
// markers: true,
start: 'top center',
end: 'bottom bottom',
// pin: true,
scroller: ".wrapper",
// scrub: 2,
toggleActions: "play play reverse reverse",
animation: section03Tl
})
// SECTION 04 ANIMATION
// const section04Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
// section04Tl
// // .from('#section-04 > *', {autoAlpha: 0, y: '+=100'})
//
//
// ScrollTrigger.create({
// trigger: '#section-0402',
// markers: true,
// start: 'top top',
// pin: '#section-05',
// pinReparent: true,
// pinSpacing: false,
// end: 'bottom bottom',
// scroller: ".wrapper",
// toggleActions: "play play reverse reverse",
// animation: section04Tl
//
// })
// SECTION 0401 ANIMATION
const section0401Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section0401Tl
.from(['#section-0401 .yah-top-left', '#section-0401 .yah-top-right'], {
x: '-=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-04',
// markers: true,
start: 'top center',
end: 'bottom bottom',
// pin: true,
// scrub: true,
scroller: ".wrapper",
animation: section0401Tl
})
// SECTION 0402 ANIMATION
const section0402Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section0402Tl
.from(['#section-0402 .yah-bottom-left', '#section-0402 .yah-bottom-right'], {
x: '+=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-0402',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
// scrub: true,
scroller: ".wrapper",
animation: section0402Tl
})
// SECTION 05 ANIMATION
const section05Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section05Tl
.from('#section-05 .img-caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-05',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
// pinReparent: true,
// pinSpacing: false,
scroller: ".wrapper",
// scrub: true,
toggleActions: "play play reverse reverse",
animation: section05Tl
})
// SECTION 06 ANIMATION
const section06Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section06Tl
.from('#section-06 > *', {
autoAlpha: 0,
yPercent: "+=50",
duration: 2,
stagger: 0.3
})
ScrollTrigger.create({
trigger: '#section-06',
// markers: true,
scroller: ".wrapper",
start: 'top center',
end: 'bottom top',
// pin: true,
toggleActions: "play none none none",
animation: section06Tl
})
// SECTION 07 ANIMATION
const section07Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section07Tl
.from('#section-07 > div.fiwc-in.fullviewport-parallax-bg.mobile-60vh > div.caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-07',
// markers: true,
start: 'top center',
scroller: ".wrapper",
animation: section07Tl
})
// SECTION 08 ANIMATION
const section08Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section08Tl
.from(['#section-08 .hw-top', '#section-08 .hw-bottom'], {
y: '+=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'top center',
// markers: true,
// pin: true,
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section08Tl
})
// SECTION 09 ANIMATION
const section09Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section09Tl
// .from('#section-09 > *', {clipPath: "inset(0% 20% 0% 20%)"})
.from('#section-09 .img-caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-09',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
// scrub: 2,
toggleActions: "play play reverse reverse",
animation: section09Tl
})
// SECTION 10 ANIMATION
const section10Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section10Tl
.from(['#section-10 .flexible-family-spaces-top', '#section-10 .flexible-family-spaces-bottom'], {
y: '+=50',
autoAlpha: 0,
duration: 1,
stagger: 0.2,
ease: 'sine.out'
})
ScrollTrigger.create({
trigger: '#section-10',
start: 'top top',
scroller: ".wrapper",
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section10Tl
})
// SECTION 11 ANIMATION
const section11Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section11Tl
.fromTo('#section-11 .big-img', {
backgroundSize: '200%',
duration: 4,
},{
backgroundPositionX: '+=20%',
backgroundSize: '400%',
backgroundPositionY: '+=100%',
duration: 4,
})
.from('.big-img .caption-bottom', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-11',
start: 'center bottom',
end: 'bottom top',
// pin: true,
// scrub: 2,
// pinReparent: true,
// pinSpacing: false,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section11Tl
})
// SECTION 12 ANIMATION
const section12Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section12Tl
.from('#section-12 > * ', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-12',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
// pin: true,
toggleActions: "play play reverse reverse",
animation: section12Tl
})
// SECTION 13 ANIMATION
const section13Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section13Tl
// .from('#section-13', {y: '-=100', duration: 1})
.from('#section-13 .img-caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-13',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section13Tl
})
// SECTION 14 ANIMATION
/* const section14Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section14Tl
.to('#bs-section4', {autoAlpha: 0, duration: 1})
.to('#bs-section3', {autoAlpha: 0, duration: 1})
.to('#bs-section2', {autoAlpha: 0, duration: 1})
.to('body', {autoAlpha: 1, duration: 4})
ScrollTrigger.create({
trigger: '#section-14',
start: 'top top',
// markers: true,
end: '600%',
scroller: ".wrapper",
pin: true,
scrub: 4,
toggleActions: "play play reverse reverse",
animation: section14Tl
})
*/
// SECTION 15 ANIMATION
const section15Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section15Tl
.from('#section-15 > *', {autoAlpha: 0, y: '+=100', duration: 1})
ScrollTrigger.create({
trigger: '#section-15',
start: 'top center',
// markers: true,
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section15Tl
})
// SECTION 16 ANIMATION
const section16Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section16Tl
.from('#section-16 > div > div:nth-child(3) > picture > img', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-16 > div > div:nth-child(3) > div', {autoAlpha: 0, y: '+=50'}, '<')
.to('#section-16 > div > div:nth-child(3) > picture > img', {autoAlpha: 0})
.to('#section-16 > div > div:nth-child(3) > div', {autoAlpha: 0}, '<')
.from('#section-16 > div > div:nth-child(2) > picture > img', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-16 > div > div:nth-child(2) > div', {autoAlpha: 0, y: '+=50'}, '<')
.to('#section-16 > div > div:nth-child(2) > picture > img', {autoAlpha: 0})
.to('#section-16 > div > div:nth-child(2) > div', {autoAlpha: 0}, '<')
.from('#section-16 > div > div:nth-child(1) > picture > img', {
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-16 > div > div:nth-child(1) > div', {autoAlpha: 0, y: '+=50'}, '<')
.to('#section-16 > div > div:nth-child(1) > picture > img', {autoAlpha: 0})
.to('#section-16 > div > div:nth-child(1) > div', {autoAlpha: 0}, '<')
.fromTo('#section-16 > div > div:nth-child(4) > picture > img', {autoAlpha: 1}, {
autoAlpha: 1
// yPercent: -10
})
ScrollTrigger.create({
trigger: '#section-16',
// markers: true,
start: 'top top',
end: '800%',
pin: true,
scrub: true,
scroller: ".wrapper",
animation: section16Tl
})
}
function animationsMillharbour() {
/* // SECTION 01 ANIMATION
const section01Tl = gsap.timeline();
section01Tl
// .from('#section-01 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-01',
// markers: true,
start: 'top top',
pin: true,
pinReparent: true,
pinSpacing: false,
end: '100%',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section01Tl
})*/
// SECTION 02 ANIMATION
const section02Tl = gsap.timeline();
section02Tl
.from('#section-02 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-02',
// markers: true,
start: 'center center+=25%',
// pinReparent: true,
// pin: true,
end: 'bottom bottom',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section02Tl
})
// SECTION 03 ANIMATION
const section03Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section03Tl
.to('#section-03 .fixed-bg ', {
backgroundPositionY: 100
})
ScrollTrigger.create({
trigger: '#section-03',
scroller: ".wrapper",
start: 'top-=25% center',
end: 'bottom top',
scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: section03Tl
})
ScrollTrigger.create({
trigger: '#section-03',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: gsap.from('#section-03 .caption', {autoAlpha: 0, y: '+=50'}, 0)
})
// SECTION 04 ANIMATION
const section04Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section04Tl
// .from('#section-04 > div > div > div.tciwt-left > picture', {x: '-=100'})
ScrollTrigger.create({
trigger: '#section-04',
start: 'top center',
scrub: 2,
end: 'bottom bottom',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section04Tl
})
// SECTION 05 ANIMATION
const section05Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section05Tl
.from('#section-05 .tctwir-left > *', {
autoAlpha: 0,
stagger: 0.3,
x: '-=50',
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-05 .tctwir-right', {
autoAlpha: 0,
x: '+=50',
ease: 'sine.out',
transformOrigin: 'center center'
}, '<')
ScrollTrigger.create({
trigger: '#section-05',
start: 'center-=25% center+=25%',
end: 'bottom top',
// pinSpacing: false,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section05Tl
})
// SECTION 06 ANIMATION
const section06Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section06Tl
.to('#section-06 > div > picture', {
transformOrigin: '50% 50%',
// width: '110%',
scale: 0.8,
ease: 'sine.out',
duration: 1
})
ScrollTrigger.create({
trigger: '#section-06',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
scrub: 2,
pin: true,
toggleActions: "play play reverse reverse",
animation: section06Tl
})
// SECTION 07 ANIMATION
const section07Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section07Tl
// .from('#section-07 > *', {y: '+=50', stagger: 0.3})
ScrollTrigger.create({
trigger: '.site-plan-map',
// markers: true,
start: 'center center',
end: 'bottom top',
pin: true,
scroller: ".wrapper",
scrub: 1,
toggleActions: "play play reverse reverse",
onEnter: flyThereStart,
animation: section07Tl
})
// SECTION 08 ANIMATION
const section08Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section08Tl
.to('#section-08 .fixed-bg ', {
backgroundPositionY: 100
})
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'top-=25% center',
end: 'bottom top',
scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: section08Tl
})
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: gsap.from('#section-08 .caption', {autoAlpha: 0, y: '+=50'}, 0)
})
// SECTION 09 ANIMATION
const section09Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section09Tl
// .from('#section-09 > *', {clipPath: "inset(0% 20% 0% 20%)"})
.from('#section-09 .ons-left-img-wrap > picture', {
x: '-=10',
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-09 .ons-right-img-wrap > picture', {
y: '-=10',
ease: 'sine.out',
transformOrigin: 'center center'
}, '<')
ScrollTrigger.create({
trigger: '#section-09',
start: 'top top',
end: 'center top',
scroller: ".wrapper",
scrub: 2,
toggleActions: "play play reverse reverse",
animation: section09Tl
})
// SECTION 1001 ANIMATION
const section1001Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1001Tl
.to('#section-10 div.fixed-bg.bgimgsrc', {
width: '100vw',
ease: 'sine.out',
transformOrigin: 'center center'
})
.to('#section-10 .lcv-top-in', {
width: '100vw',
ease: 'sine.out',
transformOrigin: 'center center'
}, '<')
.from('#section-1001 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-10 div.fixed-bg.bgimgsrc',
start: 'top top',
scroller: ".wrapper",
scrub: 2,
pin: '#section-1001',
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section1001Tl
})
// SECTION 1002 ANIMATION
const section1002Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1002Tl
.from('#section-1002 .lcv-bottom-right ', {
x: '+=100',
ease: 'sine.out',
duration: 2,
transformOrigin: 'center center'
})
ScrollTrigger.create({
trigger: '#section-1002',
start: 'top center',
scroller: ".wrapper",
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section1002Tl
})
// SECTION 1101 ANIMATION
const section1101Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1101Tl
.from('#section-11 .nts-cont > *', {y: '+=100', autoAlpha: 0, stagger: 0.2, duration: 1})
ScrollTrigger.create({
trigger: '#section-11',
start: 'top-=5% center',
end: 'bottom top',
scroller: ".wrapper",
// pin: true,
toggleActions: "play play reverse reverse",
animation: section1101Tl
})
// SECTION 1102 ANIMATION
const section1102Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1102Tl
.to('#section-11 .fixed-bg ', {
backgroundPositionY: 10
})
ScrollTrigger.create({
trigger: '#section-11 .fixed-bg',
scroller: ".wrapper",
start: 'top-=25% center',
end: 'bottom top',
scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: section1102Tl
})
ScrollTrigger.create({
trigger: '#section-11 .fixed-bg',
scroller: ".wrapper",
start: 'top top',
end: 'bottom top',
// scrub: 2,
// pin: true,
// markers: true,
toggleActions: "play play reverse reverse",
animation: gsap.from('#section-11 .caption', {autoAlpha: 0, y: '+=50'}, 0)
})
// SECTION 12 ANIMATION
const section12Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section12Tl
.from(['#section-12 .thw-top-in > *', '.thw-bottom'], {autoAlpha: 0, stagger: 0.5, duration: 1})
ScrollTrigger.create({
trigger: '#section-12',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
// pin: true,
toggleActions: "play play reverse reverse",
animation: section12Tl
})
// SECTION 13 ANIMATION
const section13Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section13Tl
.from('#section-13', {yPercent: '+=15', ease: 'linear'})
.from('#section-13 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-13',
start: 'top top',
end: '400px',
scroller: ".wrapper",
pin: true,
toggleActions: "play play reverse reverse",
animation: section13Tl
})
}
function animationsMillharbourMobile() {
// SECTION 02 ANIMATION
const section02Tl = gsap.timeline();
section02Tl
.from('#section-02 > *', {autoAlpha: 0, y: '+=100'})
ScrollTrigger.create({
trigger: '#section-02',
// markers: true,
start: 'top center',
// pinReparent: true,
// pin: true,
end: 'bottom bottom',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section02Tl
})
// SECTION 03 ANIMATION
const section03Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section03Tl
.from('#section-03 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-03',
scroller: ".wrapper",
start: 'top center',
end: 'bottom top',
// scrub: 2,
// pin: true,
toggleActions: "play play reverse reverse",
animation: section03Tl
})
// SECTION 04 ANIMATION
const section04Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section04Tl
.from('#section-04 .tciwt-right-cont', {autoAlpha: 0})
ScrollTrigger.create({
trigger: '#section-04',
start: 'top center',
// markers: true,
// scrub: 2,
end: 'bottom bottom',
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section04Tl
})
// SECTION 05 ANIMATION
const section05Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section05Tl
.from('#section-05 .tctwir-left > *', {
autoAlpha: 0,
stagger: 0.3,
x: '-=50',
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-05 .tctwir-right', {
autoAlpha: 0,
x: '+=50',
ease: 'sine.out',
transformOrigin: 'center center'
}, '<')
ScrollTrigger.create({
trigger: '#section-05',
start: 'top center',
end: 'bottom top',
// pinSpacing: false,
scroller: ".wrapper",
toggleActions: "play play reverse reverse",
animation: section05Tl
})
// SECTION 06 ANIMATION
const section06Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section06Tl
.to('#section-06 > div > picture', {
transformOrigin: '50% 50%',
// width: '110%',
scale: 0.8,
ease: 'sine.out',
duration: 1
})
ScrollTrigger.create({
trigger: '#section-06',
scroller: ".wrapper",
start: 'top center',
end: 'bottom top',
scrub: 2,
// pin: true,
toggleActions: "play play reverse reverse",
animation: section06Tl
})
// SECTION 07 ANIMATION
const section07Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section07Tl
// .from('#section-07 > *', {y: '+=50', stagger: 0.3})
ScrollTrigger.create({
trigger: '.site-plan-map',
// markers: true,
start: 'top center',
end: 'bottom top',
// pin: true,
scroller: ".wrapper",
scrub: 2,
toggleActions: "play play reverse reverse",
onEnter: flyThereStart,
animation: section07Tl
})
// SECTION 08 ANIMATION
const section08Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section08Tl
// .from('#section-08 ', {scale: 1.2})
.from('#section-08 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-08',
scroller: ".wrapper",
start: 'top center',
// markers: true,
// pin: true,
// scrub: 2,
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section08Tl
})
// SECTION 09 ANIMATION
const section09Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section09Tl
// .from('#section-09 > *', {clipPath: "inset(0% 20% 0% 20%)"})
.from('#section-09 .ons-left-img-wrap > picture', {
x: '-=10',
ease: 'sine.out',
transformOrigin: 'center center'
})
.from('#section-09 .ons-right-img-wrap > picture', {
y: '-=10',
ease: 'sine.out',
transformOrigin: 'center center'
}, '<')
ScrollTrigger.create({
trigger: '#section-09',
start: 'top center',
end: 'center top',
scroller: ".wrapper",
scrub: 2,
toggleActions: "play play reverse reverse",
animation: section09Tl
})
// SECTION 1001 ANIMATION
const section1001Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1001Tl
// .to('#section-10 div.fixed-bg.bgimgsrc', {
// width: '100vw',
// ease: 'sine.out',
// transformOrigin: 'center center'
// })
// .to('#section-10 .lcv-top-in', {
// width: '100vw',
// ease: 'sine.out',
// transformOrigin: 'center center'
// }, '<')
.from('#section-1001 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-10 div.fixed-bg.bgimgsrc',
start: 'top center',
scroller: ".wrapper",
// scrub: 2,
// pin: '#section-1001',
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section1001Tl
})
// SECTION 1002 ANIMATION
const section1002Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1002Tl
.from('#section-1002 .lcv-bottom-right ', {
x: '+=100',
ease: 'sine.out',
duration: 2,
transformOrigin: 'center center'
})
ScrollTrigger.create({
trigger: '#section-1002',
start: 'top center',
scroller: ".wrapper",
end: 'bottom top',
toggleActions: "play play reverse reverse",
animation: section1002Tl
})
// SECTION 1101 ANIMATION
const section1101Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section1101Tl
.from('#section-11 .nts-cont > *', {y: '+=100', autoAlpha: 0, stagger: 0.2, duration: 1})
ScrollTrigger.create({
trigger: '#section-11',
start: 'top center',
end: 'bottom top',
scroller: ".wrapper",
// pin: true,
toggleActions: "play play reverse reverse",
animation: section1101Tl
})
// SECTION 1102 ANIMATION
const section1102Tl = gsap.timeline();
section1102Tl
// .to('#section-11 .nts-in', {
// width: '100vw',
// ease: 'sine.out',
// transformOrigin: 'center center'
// })
// .to('#section-11 .nts-in .fixed-bg', {
// width: '100vw',
// ease: 'sine.out',
// transformOrigin: 'center center'
// }, '<')
// .to('#section-11', {
// background: 'transparent'
// }, '<')
.from('#section-11 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-11 .nts-in .fixed-bg',
start: 'top center',
end: 'bottom top',
scroller: ".wrapper",
// pin: '#section-11',
toggleActions: "play play reverse reverse",
animation: section1102Tl
})
// SECTION 12 ANIMATION
const section12Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section12Tl
.from(['#section-12 .thw-top-in > *', '.thw-bottom'], {autoAlpha: 0, stagger: 0.5, duration: 1})
ScrollTrigger.create({
trigger: '#section-12',
start: 'top center',
// markers: true,
end: 'bottom top',
scroller: ".wrapper",
// pin: true,
animation: section12Tl
})
// SECTION 13 ANIMATION
const section13Tl = gsap.timeline({defaults: {duration: 1, ease: 'sine.out'}});
section13Tl
.from('#section-13', {yPercent: '+=5', ease: 'linear'})
.from('#section-13 .caption', {autoAlpha: 0, y: '+=50'})
ScrollTrigger.create({
trigger: '#section-13',
start: 'top center',
end: '400px',
scroller: ".wrapper",
// pin: true,
toggleActions: "play play reverse reverse",
animation: section13Tl
})
}
//GLOBAL
// menuMover();
animatedCursor();
video();
// FANCYBOX SCRIPT
if (amenitiesPage > 0) {
gsap.set(['.menu-link-wrapper', '.logo svg path', '.register-link'], {color: '#333333', fill: '#333333'})
if (window.innerWidth > mobileBreakPoint) {
animationsAmenities();
animatedHeroImages();
} else {
animationsAmenitiesMobile();
animatedHeroImagesMobile();
}
function animatedHeroImages() {
var heroImage = document.querySelector("#section-01 .amenities-img-wrapper");
var heroImages = document.querySelectorAll(".amenities-grid-01");
var heroImages2 = document.querySelectorAll(".amenities-grid-02");
var heroImages3 = document.querySelectorAll(".amenities-grid-03");
var heroImages4 = document.querySelectorAll(".amenities-grid-04");
var sectionHero = document.querySelector("#section-01");
var pos = {x: sectionHero.clientWidth / 2, y: sectionHero.clientHeight / 2};
var mouse = {x: pos.x, y: pos.y};
var speed = 0.010;
gsap.set(heroImage, {xPercent: 50, yPercent: 50});
var fpms = 60 / 1000;
sectionHero.addEventListener("mousemove", e => {
mouse.x = e.x;
mouse.y = e.y;
});
function animateHero(time, deltaTime) {
let imagesYSet = gsap.quickSetter(heroImages, "y", "vh")
let imagesXSet = gsap.quickSetter(heroImages, "x", "vw")
let imagesYSet2 = gsap.quickSetter(heroImages2, "y", "vh")
let imagesXSet2 = gsap.quickSetter(heroImages2, "x", "vw")
let imagesYSet3 = gsap.quickSetter(heroImages3, "y", "vh")
let imagesXSet3 = gsap.quickSetter(heroImages3, "x", "vw")
let imagesYSet4 = gsap.quickSetter(heroImages4, "y", "vh")
let imagesXSet4 = gsap.quickSetter(heroImages4, "x", "vw")
// var xSet = gsap.quickSetter(heroImage, "x", "px");
let xSet = gsap.utils.pipe(
// gsap.utils.clamp(0, window.innerWidth),
// gsap.utils.snap(5),
gsap.quickSetter(heroImage, "x", "px")
);
let ySet = gsap.utils.pipe(
// gsap.utils.clamp(0, window.innerHeight),
// gsap.utils.snap(5),
gsap.quickSetter(heroImage, "y", "px") //apply it to the #id element's x property and append a "px" unit
);
// var ySet = gsap.quickSetter(heroImage, "y", "px");
var delta = deltaTime * fpms;
var dt = 1.0 - Math.pow(1.0 - speed, delta);
pos.x += (mouse.x - pos.x) * dt;
pos.y += (mouse.y - pos.y) * dt;
let negativeX = pos.x * -1;
let negativeY = pos.y * -1;
xSet(negativeX);
ySet(negativeY);
heroImages.forEach(item => {
gsap.set(item, {x: negativeX / 20})
gsap.set(item, {y: negativeY / 20})
})
heroImages2.forEach(item => {
gsap.set(item, {x: negativeY / 40})
gsap.set(item, {y: negativeX / 40})
})
heroImages3.forEach(item => {
gsap.set(item, {x: negativeY / 60})
gsap.set(item, {y: negativeX / 60})
})
heroImages4.forEach(item => {
gsap.set(item, {x: negativeX / 80})
gsap.set(item, {y: negativeY / 80})
})
}
gsap.ticker.add(animateHero);
}
function animatedHeroImagesMobile() {
let amenitiesHeroImg = Array.from(document.querySelectorAll('.amenities-img-wrapper div'));
let scrollDown = select('.d-arrow')
scrollDown.addEventListener('click', (e) => {
e.preventDefault()
let exploreSection = document.querySelector('#section-03')
locoScroll.scrollTo(exploreSection)
})
Draggable.create(".amenities-img-wrapper", {
type: "x,y",
inertia: true,
bounds: {
minX: -window.innerWidth,
maxX: window.innerWidth,
minY: -window.innerHeight / 1.5,
maxY: window.innerHeight / 1.5
},
onClick: (e) => {
e.stopPropagation()
amenitiesHeroImg.forEach(img => {
if (img.classList.contains('show-amenities-overlay')) {
img.classList.toggle('show-amenities-overlay');
}
})
e.target.closest('.amenities-grid').classList.toggle('show-amenities-overlay');
}
});
// var heroImage = document.querySelector("#section-01 .amenities-img-wrapper");
// var heroImages = document.querySelectorAll(".amenities-grid-01");
// var heroImages2 = document.querySelectorAll(".amenities-grid-02");
// var heroImages3 = document.querySelectorAll(".amenities-grid-03");
// var heroImages4 = document.querySelectorAll(".amenities-grid-04");
// var sectionHero = document.querySelector("#section-01");
// var pos = {x: sectionHero.clientWidth / 2, y: sectionHero.clientHeight / 2};
// var mouse = {x: pos.x, y: pos.y};
// var speed = 0.010;
// gsap.set(heroImage, {xPercent: 50, yPercent: 50});
//
//
// var fpms = 60 / 1000;
//
//
// sectionHero.addEventListener("click", e => {
// mouse.x = e.x;
// mouse.y = e.y;
//
// });
//
//
// function animateHero(time, deltaTime) {
// let imagesYSet = gsap.quickSetter(heroImages, "y", "vh")
// let imagesXSet = gsap.quickSetter(heroImages, "x", "vw")
//
// let imagesYSet2 = gsap.quickSetter(heroImages2, "y", "vh")
// let imagesXSet2 = gsap.quickSetter(heroImages2, "x", "vw")
// let imagesYSet3 = gsap.quickSetter(heroImages3, "y", "vh")
// let imagesXSet3 = gsap.quickSetter(heroImages3, "x", "vw")
// let imagesYSet4 = gsap.quickSetter(heroImages4, "y", "vh")
// let imagesXSet4 = gsap.quickSetter(heroImages4, "x", "vw")
//
// // var xSet = gsap.quickSetter(heroImage, "x", "px");
// let xSet = gsap.utils.pipe(
// // gsap.utils.clamp(0, window.innerWidth),
// // gsap.utils.snap(5),
// gsap.quickSetter(heroImage, "x", "px")
// );
// let ySet = gsap.utils.pipe(
// // gsap.utils.clamp(0, window.innerHeight),
// // gsap.utils.snap(5),
// gsap.quickSetter(heroImage, "y", "px") //apply it to the #id element's x property and append a "px" unit
// );
//
// // var ySet = gsap.quickSetter(heroImage, "y", "px");
// var delta = deltaTime * fpms;
// var dt = 1.0 - Math.pow(1.0 - speed, delta);
//
// pos.x += (mouse.x - pos.x) * dt;
// pos.y += (mouse.y - pos.y) * dt;
//
//
// let negativeX = pos.x * -1;
// let negativeY = pos.y * -1;
//
// xSet(negativeX);
// ySet(negativeY);
// heroImages.forEach(item => {
// gsap.set(item, {x: negativeX / 20})
// gsap.set(item, {y: negativeY / 20})
// })
// heroImages2.forEach(item => {
// gsap.set(item, {x: negativeY / 40})
// gsap.set(item, {y: negativeX / 40})
// })
// heroImages3.forEach(item => {
// gsap.set(item, {x: negativeY / 60})
// gsap.set(item, {y: negativeX / 60})
// })
//
// heroImages4.forEach(item => {
// gsap.set(item, {x: negativeX / 80})
// gsap.set(item, {y: negativeY / 80})
// })
//
//
// }
//
// gsap.ticker.add(animateHero);
}
function slider() {
jQuery('.flexble-hosting-space-slider-in').slick({
lazyLoad: 'ondemand',
centerMode: true,
centerPadding: '200px',
//infinite: false,
arrows: false,
autoplay: false,
slidesToShow: 2,
responsive: [
{
breakpoint: 1921,
settings: {
centerMode: true,
centerPadding: '380px',
arrows: false,
autoplay: false,
slidesToShow: 1,
}
},
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
swipe: true,
draggable: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
ScrollTrigger.refresh()
}
function popup() {
var popupClass = document.getElementsByClassName("floor-info");
var i;
for (i = 0; i < popupClass.length; i++) {
popupClass[i].addEventListener("click", function (event) {
event.preventDefault();
pin_id = this.id.substr(7) - 1;
if (amenities_pins[pin_id].enabled == "y") {
document.querySelector("body").classList.add('no-scroll-y');
// console.log("pin:"+pin_id);
//var rect = this.getBoundingClientRect();
//show small popup
document.querySelector('.floor-info-popup').classList.add('show');
document.getElementById('popup_id').innerHTML = (pin_id < 9 ? '0' : '') + amenities_pins[pin_id].post_id;
document.getElementById('popup_title').innerHTML = amenities_pins[pin_id].title;
document.getElementById('popup_text').innerHTML = amenities_pins[pin_id].overview;
//document.getElementById('popup_caption').innerHTML = amenities_pins[pin_id].caption;
document.getElementById('popup_img').src = amenities_pins[pin_id].image['image_small'];
// console.log("title:"+amenities_pins[pin_id].title);
}
});
}
document.querySelector(".fip-close").addEventListener("click", function (event) {
event.preventDefault();
document.querySelector(".floor-info-popup").classList.remove('show');
document.querySelector("body").classList.remove('no-scroll-y');
});
}// end funciton popup
// animationsAmenities();
// slider();
menuTriggers()
popup();
}
if (apartmentsPage > 0) {
function floorPlansTabs() {
const tabs = document.querySelectorAll('.tab-nav ul li');
const tabPanels = Array.from(document.querySelectorAll('.tab-image[role="tabpanel"]'));
const tabPanelsInfo = Array.from(document.querySelectorAll('.tab-content-info-new[role="tabpanel"]'));
function handleTabClick(event) {
tabPanels.forEach(panel => {
panel.hidden = true;
panel.classList.remove('selected');
})
tabPanelsInfo.forEach(panel => {
panel.hidden = true
})
tabs.forEach(tab => {
tab.setAttribute('aria-selected', false)
})
event.currentTarget.setAttribute('aria-selected', true)
const {id} = event.currentTarget;
const tabPanel = tabPanels.find(panel => panel.getAttribute('aria-labelledby') === id);
const tabPanelInfo = tabPanelsInfo.find(panel => panel.getAttribute('aria-labelledby') === id);
tabPanel.hidden = false;
tabPanel.classList.add('selected');
tabPanelInfo.hidden = false;
}
tabs.forEach(button => {
button.addEventListener('click', handleTabClick)
})
}
if (window.innerWidth > mobileBreakPoint) {
animationsApartments();
} else {
animationsApartmentsMobile();
}
menuTriggers();
floorPlansTabs();
var keyBreakpoint = 812;
jQuery('[data-fancybox="images"]').on("click", function () {
if (window.innerWidth > keyBreakpoint) {
return false;
}
});
// handle fancybox
jQuery('[data-fancybox="images"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"close"
],
});
jQuery('[data-fancybox="suite"]').on("click", function () {
if (window.innerWidth > keyBreakpoint) {
return false;
}
});
// handle fancybox
jQuery('[data-fancybox="suite"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"close"
],
beforeShow: function (instance, current) {
jQuery('html').addClass('floorplan-fancybox-open');
},
afterClose: function (instance, current) {
jQuery('html').removeClass('floorplan-fancybox-open');
}
});
jQuery('[data-fancybox="tabpanel-image-1"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"zoom",
"close"
],
beforeShow: function (instance, current) {
jQuery('html').addClass('floorplan-fancybox-open');
},
afterClose: function (instance, current) {
jQuery('html').removeClass('floorplan-fancybox-open');
}
});
jQuery('[data-fancybox="tabpanel-image-2"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"zoom",
"close"
],
beforeShow: function (instance, current) {
jQuery('html').addClass('floorplan-fancybox-open');
},
afterClose: function (instance, current) {
jQuery('html').removeClass('floorplan-fancybox-open');
}
});
jQuery('[data-fancybox="tabpanel-image-3"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"zoom",
"close"
],
beforeShow: function (instance, current) {
jQuery('html').addClass('floorplan-fancybox-open');
},
afterClose: function (instance, current) {
jQuery('html').removeClass('floorplan-fancybox-open');
}
});
jQuery('[data-fancybox="tabpanel-image-4"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"zoom",
"close"
],
beforeShow: function (instance, current) {
jQuery('html').addClass('floorplan-fancybox-open');
},
afterClose: function (instance, current) {
jQuery('html').removeClass('floorplan-fancybox-open');
}
});
let scrollDown = select('.down-arrow')
scrollDown.addEventListener('click', (e) => {
e.preventDefault()
let scrollSection = document.querySelector('.simple-content')
locoScroll.scrollTo(scrollSection);
});
}
if (millharbourPage > 0) {
if (window.innerWidth > mobileBreakPoint) {
animationsMillharbour();
} else {
animationsMillharbourMobile()
}
jQuery('[data-fancybox="images"]').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"close"
],
});
// menuTriggers();
menuTriggers();
jQuery('.mobile-fullscreen').fancybox({
nextEffect: "fade",
prevEffect: "fade",
arrows: false,
infobar: false,
preventCaptionOverlap: false,
buttons: [
"zoom",
"close"
]
});
let scrollDown = select('.down-arrow')
scrollDown.addEventListener('click', (e) => {
e.preventDefault()
let scrollSection = document.querySelector('.simple-content-second')
locoScroll.scrollTo(scrollSection);
});
}
if (homePage > 0) {
//gsap.set('.logo', {display: 'none'})
function homeImagesSlides() {
let imageHeight = select('.mhe-images__wrap > img').clientHeight;
// let spacerHeight = select('.spacer').clientHeight;
let spacerAndViewport = window.innerHeight;
var windowWrap = gsap.utils.wrap(-spacerAndViewport - imageHeight, spacerAndViewport);
var windowWrap2 = gsap.utils.wrap(-spacerAndViewport - imageHeight, spacerAndViewport);
let tl01 = gsap.timeline({paused: true})
let tl02 = gsap.timeline({paused: true})
function getBaseUrlForLocalHost() {
let re = new RegExp(/^.*\//);
return re.exec(window.location.href);
}
let baseUrlLocalhost = getBaseUrlForLocalHost()
let baseUrlForServer = location.protocol + '//' + location.host;
let url
if (baseUrlForServer === 'http://localhost') {
url = `${baseUrlLocalhost[0]}wp-content/themes/millharbour/img/`
} else {
url = `${baseUrlForServer}/wp-content/themes/millharbour/img/`
}
let images = [
`${url}homepage/HP-01-Mill-Harbour-Reception.jpg`,
`${url}homepage/HP-02-Mill-Harbour-Apartment.jpg`,
`${url}homepage/HP-03-Mill-Harbour-Home-Gym.jpg`,
`${url}homepage/HP-04-Mill-Harbour-Home-Club-Pool.jpg`,
];
let images2 = [
`${url}homepage/HP-05-Mill-Harbour-Windmill-Square.jpg`,
`${url}homepage/HP-06-Mill-Harbour-Apartment-Kitchen.jpg`,
`${url}homepage/HP-07-Mill-Harbour-Lobby-Lounge.jpg`,
`${url}homepage/HP-08-Mill-Harbour-Mill-Fields.jpg`,
`${url}homepage/HP-09-Mill-Harbour-Apartment-Balcony.jpg`,
];
let currentImage = 0;
let currentImage2 = 0;
let sliderDurationCycle = 20
let tl1 = gsap.timeline({
onStart: () => {
tl01.tweenFromTo("start", "end")
}, defaults: {duration: sliderDurationCycle, ease: "none"}
})
let tl2 = gsap.timeline({
onStart: () => {
tl02.tweenFromTo("start", "end")
}, defaults: {duration: sliderDurationCycle, ease: "none"},
delay: sliderDurationCycle / 2
})
tl01
.add('start')
.fromTo('.mhe-images__wrap:nth-child(1)', {duration: 1, scaleY: 0, transformOrigin: '50% 0'}, {
scaleY: 1,
duration: 2,
ease: 'sine.in',
transformOrigin: '50% 100%'
})
.to('.mhe-images__wrap:nth-child(1) .mhe-images__fill', {
scaleY: 0,
duration: 1,
ease: 'power4.out',
transformOrigin: '50% 0'
})
.add('end')
tl02
.add('start')
.fromTo('.mhe-images__wrap:nth-child(2)', {duration: 1, scaleY: 0, transformOrigin: '50% 0'}, {
scaleY: 1,
duration: 2,
ease: 'sine.in',
transformOrigin: '50% 100%'
})
.to('.mhe-images__wrap:nth-child(2) .mhe-images__fill', {
scaleY: 0,
duration: 1,
ease: 'power4.out',
transformOrigin: '50% 0'
})
.add('end')
tl1
.from(".mhe-images__wrap:nth-child(1)", {
y: spacerAndViewport + imageHeight,
repeat: -1,
modifiers: {
y: y => windowWrap(parseFloat(y)) + "px"
}
})
.from(".mhe-images__wrap:nth-child(1)", {
y: spacerAndViewport,
repeat: -1,
modifiers: {
y: y => windowWrap(parseFloat(y)) + "px"
},
onRepeat: () => {
tl01.tweenFromTo("start", "end")
let image = document.querySelector('.mhe-images__wrap:nth-child(1) img')
image.src = images[currentImage]
currentImage++
if (currentImage >= images.length) {
currentImage = 0
}
}
}, '<')
tl2
.from(".mhe-images__wrap:nth-child(2)", {
y: spacerAndViewport + imageHeight,
repeat: -1,
modifiers: {
y: y => windowWrap2(parseFloat(y)) + "px"
}
})
.from(".mhe-images__wrap:nth-child(2)", {
y: spacerAndViewport,
repeat: -1,
modifiers: {
y: y => windowWrap2(parseFloat(y)) + "px"
},
onRepeat: () => {
tl02.tweenFromTo("start", "end")
let image2 = document.querySelector('.mhe-images__wrap:nth-child(2) img')
image2.src = images2[currentImage2]
currentImage2++
if (currentImage2 >= images2.length) {
currentImage2 = 0
}
}
}, '<')
}
video();
// homeImagesSlides();
menuTriggersHome();
let scrollDown = select('.d-arrow')
scrollDown.addEventListener('click', (e) => {
e.preventDefault()
let exploreSection = document.querySelector('#explore-section')
locoScroll.scrollTo(exploreSection)
})
}
if (registerPage > 0) {
menuTriggers();
}
if (privacyPage > 0 || cookiesPage > 0 || termsPage > 0) {
gsap.set(['.menu-link-wrapper', '.logo svg path', '.register-link'], {color: '#333333', fill: '#333333'})
menuTriggers();
let scrollTop = select('.tpcp-popup-btp')
scrollTop.addEventListener('click', (e) => {
e.preventDefault();
let tpcpAnchor = document.querySelector('.term-privacy-cookie-popup');
locoScroll.scrollTo(tpcpAnchor)
});
}
if (contactPage > 0) {
menuTriggers();
}
if (journalPage > 0) {
gsap.set(['.menu-link-wrapper', '.logo svg path', '.register-link'], {color: '#333333', fill: '#333333'})
let journalList = document.querySelectorAll('.journal-list-area').length > 0;
const hasMenu = selectAll('.header-has-menu').length;
if(hasMenu){
if (journalList) {
let journalMenuItem = document.querySelector('.journal-back')
journalMenuItem.style.display = 'none';
}
}
function journaljs() {
var players = [];
jQuery(document).ready(function () {
if (navigator.userAgent.indexOf('Mac OS X') != -1) {
$("body").addClass("mac");
} else {
$("body").addClass("pc");
}
// var observer = lozad('.lozad', {
// rootMargin: '100% 0px', // syntax similar to that of CSS Margin
// threshold: 0.1
// });
// var pictureObserver = lozad('.lozad-picture', {
// rootMargin: '100% 0px', // syntax similar to that of CSS Margin
// threshold: 0.1
// });
// observer.observe();
// pictureObserver.observe();
let scrollTop = select('.back-to-top')
scrollTop.addEventListener('click', (e) => {
e.preventDefault();
let journalBody = document.querySelector('.journal-banner');
locoScroll.scrollTo(journalBody)
});
jQuery('.jbi-down-arrow').click(function () {
var arrow = jQuery(this);
event.preventDefault();
jQuery('html, body').animate({
'scrollTop': jQuery(arrow).closest('div').next().position().top
}, 1000);
});
jQuery('.jlaii-inn-block').each(function () {
jQuery(this).find('.jlaiiib-item').each(function (index) {
jQuery(this).attr('data-wow-delay', 0.5 + (index * 20) / 100 + 's');
});
});
jQuery('.jsrc-inn-block').each(function () {
jQuery(this).find('.jsrcib-item').each(function (index) {
jQuery(this).attr('data-wow-delay', 0.5 + (index * 20) / 100 + 's');
});
});
jQuery('.jlaita-tab').each(function () {
jQuery(this).find("h6").on("click", function () {
jQuery('.jlaita-tab').removeClass('drop-open');
if (jQuery(this).closest(".jlaita-tab").find('ul').css('visibility') == 'hidden') {
jQuery(this).closest(".jlaita-tab").addClass('drop-open');
} else {
jQuery(this).closest(".jlaita-tab").removeClass('drop-open');
}
});
var tabfilterOptions = jQuery(this).children('ul');
var tabfilterClick = jQuery(tabfilterOptions).find('li a');
jQuery(tabfilterClick).on('click', function (event) {
event.preventDefault();
tabfilterOptions.find('li').removeClass('active');
jQuery(this).closest('li').addClass('active');
var tabfilterText = jQuery(this).data('text');
jQuery(this).closest(".jlaita-tab").children('h6').text(tabfilterText);
if (tabfilterOptions.css('opacity') == 0) {
jQuery(".jlaita-tab").addClass('drop-open');
} else {
jQuery(".jlaita-tab").removeClass('drop-open');
}
});
});
jQuery('.jsig-inn-slider').slick({
infinite: true,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
speed: 500,
fade: true,
cssEase: 'linear'
});
jbannerHeight();
jbannerSingleHeight();
fullwidthHeroVideo();
autoMobileNumber();
})
var vimobserver = lozad('.lozad-vim', {
rootMargin: '100% 0px', // syntax similar to that of CSS Margin
threshold: 0.1,
load: function (el) {
el.src = el.getAttribute("data-src");
el.onload = function () {
console.log('video loading stuff')
var vimeoid = jQuery('.jvid').data("vid");
jQuery('.jlaiiifiiv-iframe').attr('data-vimeo-id', vimeoid);
jQuery('.jlaiiifiiv-iframe').each(function (index, el) {
// Basic player events below:
var playerOptions = {
width: 1920,
height: 1080,
loop: true,
autoplay: true,
background: true
};
players[index] = new Vimeo.Player(el, playerOptions);
players[index].ready().then(function () {
fullwidthHeroVideo();
});
});
var vimeoid = jQuery('.jnvid').data("vid");
jQuery('.jsvs-inn-iframe').attr('data-vimeo-id', vimeoid);
jQuery('.jsvs-inn-iframe').each(function (index, el) {
// Basic player events below:
var playerOptions = {
width: 1920,
height: 1080,
loop: false,
autoplay: false,
background: false,
control: true
};
players[index] = new Vimeo.Player(el, playerOptions);
});
}
}
})
vimobserver.observe()
jQuery(window).bind("debouncedresize", function () {
jbannerHeight();
jbannerSingleHeight();
fullwidthHeroVideo();
});
function autoMobileNumber() {
jQuery('.rTapNumber414199').each(function () {
var number = jQuery(this).text();
number = number.replace('(0)', '');
number = number.replace(' ', '');
jQuery(this).closest('a').attr('href', 'tel:' + number);
});
}
function jbannerHeight() {
/*var winH = jQuery(window).height();
var headerH = jQuery('.journal-header').height();
var bannerH = winH - headerH;
jQuery('.journal-banner').css('height', bannerH + 'px');*/
}
function jbannerSingleHeight() {
var winH = jQuery(window).height();
jQuery('.journal-single .journal-banner').css('height', winH + 'px');
}
var fullwidthHeroVideo = function () {
jQuery('.jlaiiifiiv-iframe, .jb-banner-img-inn').each(function () {
var width = jQuery(this).width(),
pWidth, // player width, to be defined
height = jQuery(this).height(),
pHeight, // player height, tbd
$vimelarPlayer = jQuery(this).find('iframe'),
videoRatio = 16 / 9;
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / videoRatio < height) {
pWidth = Math.ceil(height * videoRatio); // get new player width
$vimelarPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: 0}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / videoRatio); // get new player height
$vimelarPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight) / 2}); // player height is greater, offset top; reset left
}
});
}
document.addEventListener("DOMContentLoaded", function () {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".bgimgsrc"));
if ("IntersectionObserver" in window) {
let lazyBackgroundObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
lazyBackgroundObserver.unobserve(entry.target);
customBglazyLoad();
}
});
});
lazyBackgrounds.forEach(function (lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
})
function customBglazyLoad() {
jQuery('.bgimgsrc').each(function () {
if (jQuery(this).hasClass('visible')) {
var curRes = parseInt(jQuery(window).width());
var deskBg = jQuery(this).data('bg-desk');
var mobBg = jQuery(this).data('bg-mob');
if (curRes > 1024) {
jQuery(this).css('background-image', 'url(' + deskBg + ')');
} else {
jQuery(this).css('background-image', 'url(' + mobBg + ')');
}
}
});
}
var adiInit = "49707", adiRVO = true;
var adiFunc = null;
(function () {
var adiSrc = document.createElement("script");
adiSrc.type = "text/javascript";
adiSrc.async = true;
adiSrc.src = ("https:" == document.location.protocol ? "https://static-ssl" : "http://static-cdn")
+ ".responsetap.com/static/scripts/rTapTrack.min.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(adiSrc, s);
})();
}
// menuTriggerJournal();
journaljs();
menuTriggers();
}
// if (!journalPage > 0) {
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();
// }
})();
});
/////cookies
(function (e) {
e.cookie = function (o, i, n) {
if (arguments.length > 1 && (!/Object/.test(Object.prototype.toString.call(i)) || null === i || void 0 === i)) {
if (n = e.extend({}, n), null !== i && void 0 !== i || (n.expires = -1), "number" == typeof n.expires) {
var t = n.expires, r = n.expires = new Date;
r.setDate(r.getDate() + t)
}
return i = String(i), document.cookie = [encodeURIComponent(o), "=", n.raw ? i : encodeURIComponent(i), n.expires ? "; expires=" + n.expires.toUTCString() : "", n.path ? "; path=" + n.path : "", n.domain ? "; domain=" + n.domain : "", n.secure ? "; secure" : ""].join("")
}
n = i || {};
for (var c, s = n.raw ? function (e) {
return e
} : decodeURIComponent, a = document.cookie.split("; "), u = 0; c = a[u] && a[u].split("="); u++) if (s(c[0]) === o) return s(c[1] || "");
return null
}, e.fn.cookieBar = function (o) {
var i = e.extend({closeButton: "none", hideOnClose: !0, secure: !1, path: "/", domain: ""}, o);
return this.each(function () {
var o = e(this);
o.hide(), "none" == i.closeButton && (o.append('<a class="cookiebar-close">Continue</a>'), e.extend(i, {closeButton: ".cookiebar-close"})), "hide" != e.cookie("cookiebar") && o.show(), o.find(i.closeButton).click(function () {
return i.hideOnClose && o.hide(), e.cookie("cookiebar", "hide", {
path: i.path,
secure: i.secure,
domain: i.domain,
expires: 30
}), o.trigger("cookieBar-close"), !1
})
})
}, e.cookieBar = function (o) {
e("body").prepend('<div class="ui-widget"><div style="display: none;" class="cookie-message ui-widget-header blue"><p>By using this website you allow us to place cookies on your computer. They are harmless and never personally identify you.</p></div></div>'), e(".cookie-message").cookieBar(o)
}
})(jQuery);
jQuery(document).ready(function () {
if (navigator.userAgent.indexOf('Mac') > 0) {
jQuery('body').addClass('mac-os');
}
function customBglazyLoad() {
jQuery('.bgimgsrc').each(function () {
var curRes = parseInt(jQuery(window).width());
var deskBg = jQuery(this).data('bg-desk');
var mobBg = jQuery(this).data('bg-mob');
if (curRes > 1024) {
jQuery(this).css('background-image', 'url(' + deskBg + ')');
} else {
jQuery(this).css('background-image', 'url(' + mobBg + ')');
}
});
}
customBglazyLoad();
jQuery(window).resize(function () {
customBglazyLoad();
});
});
jQuery(window).on('load', function () {
jQuery('body').addClass('cookie-visible');
jQuery('body').addClass('cookie-hide');
jQuery('.cookie-message').cookieBar({closeButton: '.continue', hideOnClose: false});
jQuery('.cookie-message').on('cookieBar-close', function () {
//jQuery(this).slideUp();
jQuery('body').removeClass('cookie-visible');
jQuery('body').addClass('cookie-hide');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment