[SplitText - random line break]

I have the same problem using

font-display: auto;

is the default from typotheque.com

which results into different linebreaks everytime.

 

I followed OSUblake's direction to load the fonts first, if browsers not support this API then the text is not split and animated, but still visible which is enough

 

  document.fonts.ready.then((fontFaceSet) => {
    const childSplit = new SplitText(".p-line", { type: "lines" });
    gsap.set(childSplit.lines, { opacity: 0 });
    ScrollTrigger.batch(childSplit.lines, {
      onEnter: (batch) => {
        gsap.set(batch, { opacity: 0, yPercent: 100 });
        gsap.to(batch, {
          yPercent: 5,
          duration: 1,
          opacity: 1,
          ease: "power4",
          stagger: 0.2,
        });
      },
      onLeaveBack: (batch) => gsap.to(batch, { opacity: 0, yPercent: 100 }),
      start: "bottom 95%",
    });
  });

 

 

 

 

 

 

[Best practices with Gsap and ScrollTrigger]

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

 

 

 

 

[Best practices with Gsap and ScrollTrigger]

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?