Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxcreative

Collapsing / Uncollapsing Multiple ScrollTriggers

Recommended Posts

Hello GSAP community,

 

I am so incredibly impressed with ScrollTrigger - love it!

 

Imagine multiple ScrollTrigger-based stories (eg, three characters), that offer different versions of a story. Upon scrolling to the bottom of the first story, the user is able to view the other two stories.

 

Currently, the HTML looks something like this:
 

<section class="person" id="person1">
 <!-- stuff -->
</section>
<section class="person height-0" id="person2">
 <!-- stuff -->
</section>
<section class="person height-0" id="person3">
 <!-- stuff -->
</section>

 

With .height-0 having tried many approaches, but currently reading:

 

.height-0, .height-0 div {
  height: 0px;
  overflow: hidden;
}

(display: none seemed to really break things, FYI)

 

I have created a JS file that is attempting to break apart the different steps I think need to happen in order to switch characters:

 

$(document).ready(function() {


  // WHEN USER CLICKS ON PERSON 2 STORY ...
  $("#chip-a").click(function() {

    // SCROLL BACK TO THE TOP
    $('html, body').animate({
      scrollTop: '0px'
    }, 0);

    // TURN OFF PERSON 1
    $("#person1").toggleClass("height-0");


    // TURN ON PERSON 2
    $("#person2").toggleClass("height-0");


    // ACTIVATE FIRST ANIMATION IN STORY 2
    $("#p2-sec1").addClass("activate");

    // FETCH JS FILE CONTAINING PERSON 2 SCROLLTRIGGERS
    window.setTimeout(function() {
      jQuery.getScript("js/person2.js", function(data, textStatus, jqxhr) {
        console.log(data); // Data returned
        console.log(textStatus); // Success
        console.log(jqxhr.status); // 200
        console.log("Load was performed.");
      });
    }, 5);

  });

});

 

With person2.js containing the same types of ScrollTrigger elements (pins, CSS classes, GSAP animations) as person1.js. However, ScrollTrigger does then not behave as expected: the pin method, for example, does fire, but doesn't actually append position:fixed to the targeted element. The other animations don't work either, doing strange things like moving 3.4px instead of 500px.

 

I am hoping someone can offer some clever help here. There is obviously something I've overlooked, as ScrollTrigger is still working/firing in my second Story, but not actually affecting items on the page.

 

Unfortunately, I can't upload to CodePen at this time. Thank you in advance! I really look forward to sharing the final product here when finished.

Link to post
Share on other sites

Hey Max and welcome to the GreenSock forums. It's pretty hard for us to help debug things without being able to see the full code and edit things ourselves. 

 

I think it would be easier if you didn't load JS dynamically and just killed and created some ScrollTriggers based on which character you want to make active.

 

If you are going to load things dynamically, I might recommend actually switching out the content  as well so you don't have to render things when they're not being used. Barba.js is a handy tool to help out with this. @Ihatetomatoes made an article on the subject and we'll release our own Barba.js + GSAP demo in the couple of weeks. 

  • Like 1
Link to post
Share on other sites

Thank you so much for your reply Zach,

 

This turned out to be right on - we took your advice and stopped trying to do things dynamically, and it became much simpler to manage.

Thank you! Looking forward to sharing more!

 

Max

Link to post
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.

×