oligsap

Awesome thanks for the quick answer !

Hi guys ! I'm looping on an array of elements to toggle a class on these elements each time they enter the viewport but I don't think my code is optimized. Is there anything I could do to simplify this : const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, onEnter() { btn.classList.remove('disable'); }, onLeave() { btn.classList.add('disable'); }, onEnterBack() { btn.classList.remove('disable'); }, onLeaveBack() { btn.classList.add('disable'); } } }); }); Thanks for your help

your markers are not showing up because you are using "marker" instead of "markers".

Hello there, I'm having trouble pausing my Timeline. When I add paused:true it still plays the animation. Here is my code : const _this = this; this.animationIsPlaying = false; this.menuActive = false; // OPEN const tlOpen = new TimelineMax({ paused: true, onComplete() { _this.animationIsPlaying = false; } }); tlOpen.fromTo('.menu__bg', 1.2, { height: '0' }, { height: '100%', ease: Expo.easeInOut, force3D: true }).fromTo('.menu__container', 0.6, { y: 80, opacity: 0 }, { y: 0, opacity: 1, ease: Power1.easeOut, }, '-=0.6'); // CLOSE const tlClose = new TimelineMax({ paused: true, onComplete() { _this.animationIsPlaying = false; TweenLite.set('.menu', { autoAlpha: 0 }); document.body.classList.remove('menu-active'); } }); tlClose.fromTo('.menu__container', 0.6, { y: 0, opacity: 1 }, { y: 80, opacity: 0, ease: Power1.easeOut, }).fromTo('.menu__bg', 1.2, { height: '100%' }, { height: '0', force3D: true, ease: Expo.easeInOut }, '-=0.8'); $('.btn-menu').on('click', (e) => { e.preventDefault(); if (_this.animationIsPlaying) { return; } if (_this.menuActive) { _this.animationIsPlaying = true; _this.menuActive = false; tlClose.play(0); e.target.classList.remove('active'); } else { _this.animationIsPlaying = true; _this.menuActive = true; TweenLite.set('.menu', { autoAlpha: 1 }); tlOpen.play(0); document.body.classList.add('menu-active'); e.target.classList.add('active'); } }); My solution for the moment is to separate it like this : openMenu() { const _this = this; const tlOpen = new TimelineMax({ onComplete() { _this.animationIsPlaying = false; } }); tlOpen.fromTo('.menu__bg', 1.2, { height: '0' }, { height: '100%', ease: Expo.easeInOut, force3D: true }).fromTo('.menu__container', 0.6, { y: 80, opacity: 0 }, { y: 0, opacity: 1, ease: Power1.easeOut, }, '-=0.6'); } closeMenu() { const _this = this; const tlClose = new TimelineMax({ onComplete() { _this.animationIsPlaying = false; TweenLite.set('.menu', { autoAlpha: 0 }); document.body.classList.remove('menu-active'); } }); tlClose.fromTo('.menu__container', 0.6, { y: 0, opacity: 1 }, { y: 80, opacity: 0, ease: Power1.easeOut, }).fromTo('.menu__bg', 1.2, { height: '100%' }, { height: '0', force3D: true, ease: Expo.easeInOut }, '-=0.8'); } menuInit() { const _this = this; this.animationIsPlaying = false; this.menuActive = false; $('.btn-menu').on('click', (e) => { e.preventDefault(); if (_this.animationIsPlaying) { return; } if (_this.menuActive) { _this.animationIsPlaying = true; _this.menuActive = false; _this.closeMenu(); e.target.classList.remove('active'); } else { _this.animationIsPlaying = true; _this.menuActive = true; TweenLite.set('.menu', { autoAlpha: 1 }); _this.openMenu(); document.body.classList.add('menu-active'); e.target.classList.add('active'); } }); } Thanks for your help

@vektor I had concerns and this is the satisfying answer I got :

Thanks @Jonathan for your input. You're right I completely forgot that, thanks !

Hi, I'm rather concerned about splitting a title (Hn) into separate letters. Can Google bots read the HTML generated ? Thanks for your feedback

So your code suggestions didn't work : still getting the errors. Regarding tree shaking, I'm sorry I read the documentation but I don't understand what it is. Plus, I'm using webpack 2 & gulp 4 in my workflow so it's a little difficult to follow the examples. BUT Your thoughts regarding old UMD files and ES6 helped me. I solved my problem doing this : import { TweenMax } from 'gsap'; import ScrollToPlugin from 'gsap/umd/ScrollToPlugin'; Thank you very much !

Hello community ! I'm having trouble importing plugins. I use the gsap npm doc with gsap v2.0.2. When I use this : import { TweenMax } from 'gsap'; TweenMax works perfectly fine. But when I want to use the scrollToPlugin with this for example : TweenMax.to('.my-div', 2, { scrollTo: { y: 'max' } }); I do this : import { TweenMax, ScrollToPlugin } from "gsap/TweenMax"; or import { TweenMax, ScrollToPlugin } from "gsap/all"; I get errors saying : TweenMax.js:13 Uncaught SyntaxError: Unexpected identifier or all.js:13 Uncaught SyntaxError: Unexpected identifier Thank you very much for your help !