ScrollTrigger AutoAlpha sometimes triggers instantly or doesn't play backwards

[isaidicanshout]

First, thanks for building this plugin. It's incredibly fast and easy to set up (even for an amateur hobbyist dev).

 

I'm having a little trouble with a few instances on this page that I'm working on for a friend. The entire page uses very simple visibility changes with ScrollTrigger and AutoAlpha. There are a couple of points where I'm having some difficulty though...

 

In the second section, the American Flag background is supposed to gradually fade out at the end. Sometimes that happens, but sometimes it happens instantly, at the wrong time. On mobile, it often doesn't come back when you scroll back up.

 

In the third section, the main headline appears and fades away, but doesn't come back when scrolling back up. The names in the background are actually triggered by the same GSAP element, but they come back just fine when you scroll up.

 

Any insight is appreciated!

 

The relevant code is live here:

http://blackjusticeflag.org/

 

http://blackjusticeflag.org/assets/scripts.js

 

 

See the Pen WNwPKMg by isaidicanshout (@isaidicanshout) on CodePen

[ZachSaucier]

Hey isaidicanshout and welcome to the GreenSock forums.

 

If you'd like our help debugging, please make a minimal demo for each issue that you're asking about. It's really hard for us to debug a live site like that. Here's more info about how to create one:

 

[isaidicanshout]

I was able to isolate the portion that isn't working correctly into codepen, i hope this is easier to work with! thanks

[ZachSaucier]

You're making one of the most common ScrollTrigger mistakes related to using a .to(). I won't re-explain myself here as you can read the article. To fix it, just use a .fromTo instead:

gsap.fromTo('#s2d0', {autoAlpha: 1}, {
  autoAlpha:0,
  scrollTrigger: {
    trigger: "#box3",
    scrub: true,
    start: "top bottom",
    end: "+=500",
    onUpdate: function() { console.log(this.progress) }
  }
})

Some side notes:

• Next time you make a minimal demo try to strip everything other than what you're specifically asking about.
• Why write your own shuffle function when you can use GSAP's?
• Why use Array.from() on a nodeList when you can just use GSAP's .toArray() method?
• Why set each element's opacity using a loop when you can just use GSAP's .set() method?

  for (var i = 0; i < s3namesArray.length; i++){
    s3namesArray[i].style.opacity = 0;
  }
  
  // GSAP equivalent
  gsap.set(s3namesArray, { opacity: 0 });

• Why use jQuery if all you're doing is toggling some class?

  $("#menuLogo").addClass("logoSmall")
  
  // Vanilla JS way
  document.querySelector('#menuLogo').classList.add('logoSmall')

• Instead of doing a bunch of individual tweens that are the same except for the target, use GSAP's staggers.
• Instead of using an array of query strings as a target, just use a query string:

  ['#s3d1','#s3names']
  
  // better
  '#s3d1, #s3names'

For more learning, check out my article about animating efficiently. I think you'll learn a lot.

 

FYI I say all of this out of a desire to help you improve your code and better understand how GSAP can save you time, not just be critical for the sake of it  Happy tweening!

[isaidicanshout]

thank you for the tips.

 

i'll look into that and the other tips as well! this is my first time using gsap, so i didn't know it had some of those functions.

 

I also only code maybe once a year so i definitely have some work to do when it comes to neatness and efficiency.