Double animation does not work in ScrollTrigger

[Umberto]

Hi,
I created an animation that I added in two different elements and it works great.

Using ScrollTrigger, the first element loads it perfectly, while the second does not wait for scrolling, it has already started.

How can I do?

Thanks

See the Pen YzGZjYg by umberto (@umberto) on CodePen

[ZachSaucier]

Hey Umberto. You're making one of the most common ScrollTrigger mistakes - using general selectors as your targets when you instead should loop through each target, setting up an animation and ScrollTrigger for each. See the linked article for more info.

[Umberto]

Thanks for the reply.

I tried this but it doesn't work, the animation doesn't start:

 

const boxes = gsap.utils.toArray('.maskDown span');
boxes.forEach(maskDown => {
  gsap.from(maskDown, { 
    scrollTrigger: {
      trigger: maskDown,
	  duration: 1.5, 
      y: 250, autoAlpha: 0, 
      skewY: 6, 
      ease:"power4.out",
	  stagger: { amount: 1.3}
    }
  })
});

Where am I wrong?

 

 

[ZachSaucier]

You're putting the tween vars inside of the ScrollTrigger object. That's not good. Include them in the tween vars instead and it works:

See the Pen eYdvPyN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Sides notes:

• Good code formatting will help you and others code faster and catch your errors more easily.
• You should try to use semantic HTML such as actual heading instead of a div with a heading class.
• The .out is not necessary on your ease(s) because .out is the default.

[Umberto]

 

 

Perfect.
Thank you for the advice.

I have more questions on how to write the code correctly:

 

1. Is it possible to insert a double class in the code?

const containers = gsap.utils.toArray('.heading-title-1, .heading-title-2');......

2. The same thing can also be done with ScrollTrigger.defaults ({.....}) ;?

ScrollTrigger.defaults ({ scroller: "#js-scroll", trigger: ".animation1, .animation2, animation3, ...." });

 

Thanks

[ZachSaucier]

4 minutes ago, Umberto said:

Is it possible to insert a double class in the code?

Did you try it out?  

 

4 minutes ago, Umberto said:

trigger: ".animation1, .animation2, animation3, ...."

A trigger like this doesn't make much sense. A trigger needs to be a singular element. You can't have a ScrollTrigger with multiple triggers.

 

I encourage you to go through the ScrollTrigger documentation and video again.

[Umberto]

3 minutes ago, ZachSaucier said:

Did you try it out?

Of course, it works well, I just don't know if it's okay to use it

 

5 minutes ago, ZachSaucier said:

A trigger like this doesn't make much sense. A trigger needs to be a singular element. You can't have a ScrollTrigger with multiple triggers.

This I had doubts that it was a good solution, it was just a curiosity.

[Umberto]

 

Hi, the help you gave me was important. 

I wanted to ask you if it was possible to animate multiple lines with the <span> without repeating the .heading-title-1 class. 

 

<div class="heading-tile-1">
    <div class="maskDown">
      <span>We create Digital</span>
    </div>
  </div>

  <div class="heading-tile-1">
    <div class="maskDown">
      <span> Branding </span>
    </div>
  </div>
......

 

Per capire meglio, volevo fare questo lavoro:

 

<div class="heading-tile-1">
    <div class="maskDown">
      <span>We create Digital</span>
     <span>Branding</span>
   <span>Experience</span>
    </div>
  </div>

 

is it possible?

 

Thanks

[ZachSaucier]

32 minutes ago, Umberto said:

is it possible?

Sure it it. The setup is different. Give it a try.

[Umberto]

I've been trying for hours but I can't, in fact, before writing on the forum I always try to find a solution without disturbing.

I tried to insert a simple <br> between one span and the other and this:
stagger: {amount: 1.3},

but nothing

[ZachSaucier]

Please provide a minimal demo of the issue if you'd like our help debugging.

[Umberto]

OK

 

 

I can't understand where the mistake is

[akapowl]

Hey @Umberto

 

You just need to use querySelectorAll('span') instead of just querySelector('span') because there are multiple elements you want to address.

 

See the Pen 73d4542cda036bb6c4d53c34bd330ce7 by akapowl (@akapowl) on CodePen

[Umberto]

This time I was good, I just made a careless mistake.

Thanks for your help and happy new year