Best practices with Gsap and ScrollTrigger

[ponzo]

Hello,

 

I have doubts on my approach to animate different elements in my Vue project on scroll.

When i mount my page layout of my vueproject I trigger different types of animations
 

this.setAnimatTextlines();
this.setAnimateCards();
this.setAnimateDates();

Which results in lot's of similar functions to catch up all of the elements

 

setAnimateDates() {
      gsap.registerPlugin(ScrollTrigger);

      gsap.set(".dates", {
        opacity: 0,
        y: -100,
        scale: 0.9,
      });

      ScrollTrigger.batch(".dates", {
        onEnter: (batch) => {
          batch.forEach((card, index) =>
            gsap.to(card, {
              opacity: 1,
              y: 0,
              scale: 1,
              stagger: 0.5,
              delay: index * 0.3,
            })
          );
        },
      });
    },

However, i'm not sure if this is a best practice to use multiple ScrollTrigger.batch etc

 

I'm very used to use for example 'scroll-out' js which just adds a data-attribute to the element which enters or leaves the viewport.

The rest I solve with plain css
 

.datas[scroll-data="in"]{
  transition:1s ease all;
}

I ended up which using both scroll-out and ScrollTrigger.

 

Is it possible with ScrollTrigger to just add data attributes so I can solve the more easy animations with plain css?

 

 

 

 

 

[OSUblake]

Welcome to the forums! 😀

 

So what's the issue here? You just want to use CSS transitions? If that's the case, you can just use toggleClass. 

 

5 hours ago, ponzo said:

Is it possible with ScrollTrigger to just add data attributes

 

GSAP won't do that, but you can use one of ScrollTrigger's callbacks to add the attribute.

 

[GreenSock]

Yep, Blake is exactly right. The toggleClass is probably easiest:

gsap.utils.toArray(".dates").forEach(el => {
  ScrollTrigger.create({
    trigger: el,
    toggleClass: "in-viewport"
  });
});

 

Or if you want to do the same technique as you're used to:

gsap.utils.toArray("[scroll-data]").forEach(el => {
  ScrollTrigger.create({
    trigger: el,
    onToggle: self => el.setAttribute("scroll-data", self.isActive ? "in" : "out")
  });
});

 

Lots of options. 

[ponzo]

Hello,

 

This example is a very practical method for me to unleash some simple css animations on elements when items entering the viewport:

 

gsap.utils.toArray("[scroll-data]").forEach(el => {
  ScrollTrigger.create({
    trigger: el,
    onToggle: self => el.setAttribute("scroll-data", self.isActive ? "in" : "out")
  });

thank your for that.

I'm very new to Gsap and the documentation is a bit overwhelming, while finding CodePen examples within the forums consumes time.
It would be super helpful if the greensap docs would have a section like 'quick start guides' which combines some practical examples from the learning center, the forums or documentation as structured step by step info- for example to build a portfolio website with greensap.

The guides could contain:
1. Installing Gsap (is already available within the docs)

2. Animating navigations and sticky headers (scrolltrigger)

3. A homepage with storytelling (scrolltrigger + timeline)

4. Animate grids with multiple elements (scrolltrigger with batch or utils.ToArray?)

5. Animate typography (splittext plugin)

6. Create 3d animations with threejs and gsap

7. Combine Gsap with CSS transitions

8. Final notes and best practices

 

 

Just like the quick start guide of strapi CMS, which connects the most practical dots to startup and lift off
https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html

 

Thank you

 

 

 

 

[Cassie]

We have a getting started guide here - Have you taken a look through that?
 

We're going to be looking at different possible flows people might want when getting started - but I think the difficulty with a list like you've proposed is that people use GSAP for so many different things! 

It would be great to chat some about why you found the documentation overwhelming if you have time? Specifics will really help us make it easier for other folks. ☺️