[Scrolltrigger: fade-in elements on scroll by toggleClass, only once]

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): 

 

[Scrolltrigger: fade-in elements on scroll by toggleClass, only once]

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: 

See the Pen gOPZaZW by Meuss (@Meuss) on CodePen

 

I hope this helps you,  cheers

[Scrolltrigger: fade-in elements on scroll by toggleClass, only once]

Just in case somebody in the future needs a quick example of how to do this (without toggleClass), I got it working here: 

See the Pen eYJZbJN by Meuss (@Meuss) on CodePen

[Scrolltrigger: fade-in elements on scroll by toggleClass, only once]

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!

[Scrolltrigger: fade-in elements on scroll by toggleClass, only once]

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 🙏

See the Pen zYrqaRL by Meuss (@Meuss) on CodePen

[Remove a TimelineMax when component destroyed]

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!

[Remove a TimelineMax when component destroyed]

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');
  }
}

 

[How to use GSAP with Vue/Webpack (vue-cli + webpack template)]

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!

[How to use GSAP with Vue/Webpack (vue-cli + webpack template)]

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?