Thomas Miller

I've only used the ScrollTrigger plugin once, so I'm no expert yet. But I think you are understanding it correctly, these types of uses is what it's for (and it is awesome). I'm not sure exactly for your situation, but my guess would be the "start" and "end" properties? You should take a look at this (5min10 in):

Hey, I had the same problem as you. What you can do is remove the "once: true" and change the "toggleActions" property to "play none resume none" (if you want the animations to play when scrolling back up) or "play none complete none" if you want them to skip the animation completely. See it here: https://codepen.io/Meuss/pen/gOPZaZW I hope this helps you, cheers

Just in case somebody in the future needs a quick example of how to do this (without toggleClass), I got it working here: https://codepen.io/Meuss/pen/eYJZbJN

Thanks for the reply. I thought the toggleClass + a couple lines of css would be a really simple solution. Ok, then I guess I'll try to use a timeline instead, I just need to figure it out. I'll check the examples, thanks!

I'm trying to setup a simple fade-in animation on scroll using the new (? awesome ?) Scrolltrigger plugin. I want the scrolltrigger to add an "active" class on the element, only once, the first time the element enters the viewport. That way I just use css to fade-in the element. I've tried using the "once" parameter, but that removes the class completely when the Scrolltrigger is no longer active. Any help would be appreciated ?

Oh! That makes absolute sense... The source code I use is very different, but the problem is exactly what you explained. Thank you very much for your help, very detailed and spot-on answer!

Hey! I'm trying to delete a TimelineMax, once the user changes pages. I'm actually using Vue, so basically when a component gets destroyed, I want to totally remove the animations in that component. However, I'm having a hard time completely removing it. It never actually gets destroyed, I'm doing something wrong. Here is the pseudo-code I'm using (without the Vue stuff..): // when omponent created, execute animation animate(true); // when component destroyed animate(false); function animate(x) { let tl = new TimelineMax({ repeat: -1 }); // elements that I will animate const item1 = document.querySelector('.item1'); const item2 = document.querySelector('.item2'); const item3 = document.querySelector('.item3'); // sub-timeline function anim(element) { const item = element; const subtimeline = new TimelineMax(); // do the animations for one element subtimeline.add(() => { console.log('animating'); }, '+=0'); subtimeline.to(item, 3, { x: '20', ease: Power4.easeInOut }, '+=0'); // lots of animations.. return subtimeline; } if (!x) { // I've tried lots of variants, // none of these work // I see the 'destroy' in the console when component is removed, but I still see the 'animating' as well, indefinitely.. console.log('destroy'); tl.invalidate(); tl.invalidate().pause(); tl.kill(); tl = null; } else { tl.add(anim(item1), 0); tl.add(anim(item2), '+=1'); tl.add(anim(item3), '+=1'); } }

Oh well, never mind.. I was losing my mind with these errors, so I created a brand new project using vue-cli, and then added the plugins in the node_module/gsap and import them.. And it works. So I guess there is something wrong in my original project, sorry!

Been on this for hours ? I've recently purchased the club greensock license, and I'm trying to use some premium plugins in my project, unsuccessfully. I'm using the plugins with the vue cli webpack template... Has anyone been able to get this working? If so, could you please share some of your setup? I've been going through multiple forum posts involving module bundler bugs. I've tried out so many suggestions, nothing ever works. I am not super familiar with customizing webpack, normally I simply import different modules and everything works. Not the case with the greensock plugins unfortunately. I've tried loading them in different ways (/src/assets or copying them directly in node_modules/gsap), but nothing seems to work for me ? I always get errors, depending on what hack I'm doing (based on previous forum posts), most of the time one of these: Cannot read property '_gsDefine' of undefined Module not found: Error: Can't resolve '../TweenLite.min.js' in .... document not defined... Since vue is getting pretty popular, and I'm guessing lots of people are using the vue-cli webpack template, I was hoping that someone could post here how they got the club greensock plugins to work?