52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
const showMenu = (toggleId, navId) =>{
|
||
|
|
const toggle = document.getElementById(toggleId),
|
||
|
|
nav = document.getElementById(navId)
|
||
|
|
|
||
|
|
if(toggle && nav){
|
||
|
|
toggle.addEventListener('click', ()=>{
|
||
|
|
nav.classList.toggle('show')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
showMenu('nav-toggle','nav-menu')
|
||
|
|
|
||
|
|
/*-- ANIMATE GSAP --*/
|
||
|
|
|
||
|
|
/*TEXT*/
|
||
|
|
gsap.from('.home__title', {opacity: 0, duration: 1.5, delay: .5, y: 50})
|
||
|
|
gsap.from('.home__description', {opacity: 0, duration: 1.5, delay: .8, y: 50})
|
||
|
|
|
||
|
|
/*IMG AIRPOD*/
|
||
|
|
gsap.from('.airpod1', {opacity: 0, duration: 2, delay: 1.2, y: -40})
|
||
|
|
gsap.from('.airpod2', {opacity: 0, duration: 2, delay: 1.4, y: 40})
|
||
|
|
|
||
|
|
/*NAV*/
|
||
|
|
gsap.from('.nav__logo', {opacity:0, duration: 2.5, delay: 1.5, y: 25});
|
||
|
|
gsap.from('.nav__toggle', {opacity:0, duration: 2.5, delay: 1.7, y: 25});
|
||
|
|
gsap.from('.nav__item', {opacity: 0, duration: 2.5, delay: 1.9, y: 25, ease:'expo.out', stagger: .3})
|
||
|
|
gsap.from('.nav__btn', {opacity:0, duration: 2.5, delay: 2, y: 25});
|
||
|
|
|
||
|
|
|
||
|
|
/*SCROLL*/
|
||
|
|
gsap.from('.home__scroll', {opacity: 0, duration: 1.5, delay: 2.3, y: 30})
|
||
|
|
|
||
|
|
|
||
|
|
/*-- ANIMATE SCROLLMAGIC --*/
|
||
|
|
var animate = new TimelineMax({onUpdate:updatePercentage})
|
||
|
|
var controller = new ScrollMagic.Controller()
|
||
|
|
|
||
|
|
/*DETAILS*/
|
||
|
|
animate
|
||
|
|
.from('.details__img', {opacity: 0, y: 25})
|
||
|
|
.from('.details__box', {opacity: 0, y: 25, duration: 1, ease:'expo.out', stagger: .4})
|
||
|
|
|
||
|
|
var scene = new ScrollMagic.Scene({
|
||
|
|
triggerElement: ".details__box",
|
||
|
|
})
|
||
|
|
|
||
|
|
.setTween(animate)
|
||
|
|
.addTo(controller)
|
||
|
|
|
||
|
|
function updatePercentage(){
|
||
|
|
animate.progress()
|
||
|
|
}
|