Jump to content
Search Community

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

Thomas Miller test
Moderator Tag

Recommended Posts

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

  • Thanks 1
Link to comment
Share on other sites

Hey Macmac. That's a good point. We'll likely change it so that toggleClass only fires onEnter if once is true.

 

I'm curious though: if you're already loading GSAP, why use CSS transitions for that animation? Why not do it with GSAP instead? It'll give you more fine control over the animation.

  • Like 1
Link to comment
Share on other sites

Thanks for pointing that out, @Macmac. I agree - it's most intuitive for "once" to toggle the class only onEnter. That should be resolved in the next push which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you might need to clear your cache). 

 

Better? 

 

Also, the way you did it is totally fine, but I definitely wouldn't have a CSS transition and GSAP trying to animate the same property. Just use one or the other. You could simplify your GSAP code a bit by putting the ScrollTrigger right in the tween itself:

gsap.utils.toArray('.box').forEach(box => {
  gsap.fromTo(box, {
      autoAlpha: 0, 
      y: 50
    }, {
    scrollTrigger: {
      trigger: box,
      once: true
    },
    duration: 1, 
    autoAlpha: 1, 
    y: 0
  });
});

 

If you're gonna use CSS for the animation part, you could simplify things even more by using the new .batch() method: 

ScrollTrigger.batch(".box", {
  toggleClass: "active",
  once: true
});

Enjoy!

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

Hi there,

thanks for the examples above. I'm trying to setup something similar. The difference to the above code would be to animate the elements only if there not already in or above the viewport. I need this for the case, if someone refreshes the page. In the above examples the boxes won't appear if they are above the viewport.

 

To recreate that case use the codepen from @Macmac: https://codepen.io/Meuss/pen/eYJZbJN

1. fork it

2. run in debug mode

3. scroll down (so that a few "boxes" are above the viewport)

4. refresh the page

5. scroll up to see that the boxes stay in the initial state of the animation

 

 

I could check the elements before applying the animation if they are above or in the viewport and then remove them from the list of animating elements etc.
But is there somehting build in for that? Am i missing something here?

Thank you in advance
Tomekk

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi Thomas, thank you for your quick reply and the solution for playing the animation only when its not above the viewport in the beginning.
Is there also a solution for elements that are inside the viewportat the beginning (not only complety above the viewport)?

 

Or am i using the wrong technique or totally missunderstand the Scrolltrigger thing?

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

okay i tried end: "bottom bottom". but still the elements get triggered to fadein and translate.

I am trying to get only  those elements animated, that are beneath the viewport or partial inside the viewport (only from bottom).

If an element would be totally in viewport or above the viewport (from bottom) that element should be ignored from the animation and the trigger.

 

Maybe its my job to filter first the elements and then apply the animation. I was just wondering if there is something biuld in for not determining it manually.
So with the solution you provided, the only thing that is not fitting to my situation is that elements, that are initially inside the viewport get the animation applied. i want them to be already at the end of the state of the animation if there are completly in the viewport/or above in he beginning when the page has loaded.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...