|
| 1 | +const showMenu = (toggleId, navId) =>{ |
| 2 | + const toggle = document.getElementById(toggleId), |
| 3 | + nav = document.getElementById(navId) |
| 4 | + |
| 5 | + if(toggle && nav){ |
| 6 | + toggle.addEventListener('click', ()=>{ |
| 7 | + nav.classList.toggle('show') |
| 8 | + }) |
| 9 | + } |
| 10 | +} |
| 11 | + |
| 12 | +showMenu('nav-toggle','nav-menu') |
| 13 | + |
| 14 | +/*-- ANIMATE GSAP --*/ |
| 15 | + |
| 16 | +/*TEXT*/ |
| 17 | +gsap.from('.home__title', {opacity: 0, duration: 1.5, delay: .5, y: 50}) |
| 18 | +gsap.from('.home__description', {opacity: 0, duration: 1.5, delay: .8, y: 50}) |
| 19 | + |
| 20 | +/*IMG AIRPOD*/ |
| 21 | +gsap.from('.airpod1', {opacity: 0, duration: 2, delay: 1.2, y: -40}) |
| 22 | +gsap.from('.airpod2', {opacity: 0, duration: 2, delay: 1.4, y: 40}) |
| 23 | + |
| 24 | +/*NAV*/ |
| 25 | +gsap.from('.nav__logo', {opacity:0, duration: 2.5, delay: 1.5, y: 25}); |
| 26 | +gsap.from('.nav__toggle', {opacity:0, duration: 2.5, delay: 1.7, y: 25}); |
| 27 | +gsap.from('.nav__item', {opacity: 0, duration: 2.5, delay: 1.9, y: 25, ease:'expo.out', stagger: .3}) |
| 28 | +gsap.from('.nav__btn', {opacity:0, duration: 2.5, delay: 2, y: 25}); |
| 29 | + |
| 30 | + |
| 31 | +/*SCROLL*/ |
| 32 | +gsap.from('.home__scroll', {opacity: 0, duration: 1.5, delay: 2.3, y: 30}) |
| 33 | + |
| 34 | + |
| 35 | + |
| 36 | +/*-- ANIMATE SCROLLMAGIC --*/ |
| 37 | +var animate = new TimelineMax({onUpdate:updatePercentage}) |
| 38 | +var controller = new ScrollMagic.Controller() |
| 39 | + |
| 40 | +/*DETAILS*/ |
| 41 | +animate |
| 42 | +.from('.details__img', {opacity: 0, y: 25}) |
| 43 | +.from('.details__box', {opacity: 0, y: 25, duration: 1, ease:'expo.out', stagger: .4}) |
| 44 | + |
| 45 | +var scene = new ScrollMagic.Scene({ |
| 46 | + triggerElement: ".details__box", |
| 47 | +}) |
| 48 | + |
| 49 | +.setTween(animate) |
| 50 | +.addTo(controller) |
| 51 | + |
| 52 | +function updatePercentage(){ |
| 53 | + animate.progress() |
| 54 | +} |
| 55 | + |
0 commit comments