Jump to content
Search Community

ScrollTrigger AutoAlpha sometimes triggers instantly or doesn't play backwards

isaidicanshout test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
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...