oligsap

Hi @akapowl ! I'm trying to do the same thing now but with toggleClass. I've just modified the demo for buttons to toggle from red (not in viewport) to green (in viewport) but it doesn't work. What am I missing out here ? https://codepen.io/olig/pen/VwjYZLw Thanks a lot

OMG ! You're right thank you very much !

Hi, I have a horizontal scroll using the Smooth-scrollbar library. I'm trying to do a simple rotation on a square by using GSAP ScrollTrigger's proxy but I can't get it to work. What am I missing out here ? As always thanks a lot for your help !

Awesome thanks

Hi Paul, Thanks for the help, it solved my problem. Sorry for that I'll check into these mistakes, I didn't even know I was making one. Cheers

Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help

@ZachSaucier Could we do the same with the kill function ? like trigger.kill(false); ?

Hi @mikel, @ZachSaucier, Thank you very much for your feedbacks. It helped me a lot to get where I wanted to go !

Hi everyone, I've managed to animate text on an SVG path but I can't manage to make the animated text arrive in the center of the screen when the snap stops. It either stops before or after the center. I'd tried to mess with the snapTo without success. Thanks for your help

Makes perfect sense. I just forked the Horizontal snapping demo that has the same logic : https://codepen.io/GreenSock/pen/YzygYvM In the demo, elements offscreen are still animated.

Hi there ! I have a horizontal scroll in place with Scrolltrigger. I was wondering if it was possible to disable animating elements when they're out of the viewport for performance matter ? Juste like Locomotive scroll : https://locomotivemtl.github.io/locomotive-scroll/ Thanks for your feedback

Ok so I think I managed to solve it - like this : https://codepen.io/olig/pen/GRZORvX Code: const sections = gsap.utils.toArray("section"); let maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", scrollTrigger: { trigger: ".wrapper", pin: true, scrub: 1, end: () => `+=${maxWidth}` } }); I'm not really sure if my code is optimized so critics welcomed !

I would be interested in knowing how you fixed this. Thanks !

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('di

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 tlCl

@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: Un