search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.89k stars 2.17k forks source link

reverse: false troubles #441

Open custa1200 opened 8 years ago

custa1200 commented 8 years ago

If I add reverse: false to my ScrollMagic.Scene, I aend up with a large gap at the top of my page when I scroll back up. I am also using a pinned element which is essentially a wrapper around everything within body. The height is on the "#data-scrollmagic-pin-spacer" which takes up space when I go right to the top.

Can anybody think what it might be that is causing the issues?

custa1200 commented 8 years ago

The space is the same as the duration.400px in this case. I have included my timeline and Scollmagic setup for this issue. If I don't set reverse to false the space stays perfect, but I don't want it to reverse when I scroll back up there page.

      var stickyTimeLine = new TimelineLite()
      .add(headerTween, 0)
      .add(stickyTween1, 0.5)
      .add(stickyTween2, stickyAnimationOverlap)
      .add(stickyTween3, stickyAnimationOverlap)
      .add(stickyTween4, stickyAnimationOverlap)
      .add(stickyTween5, stickyAnimationOverlap)
      .add(stickyTween6, stickyAnimationOverlap)
      .add(stickyTween7, stickyAnimationOverlap)
      .add(stickyTween8, stickyAnimationOverlap)
      .add(stickyTween9, stickyAnimationOverlap)
      .add(stickyTween10, stickyAnimationOverlap)
      .add(stickyTween11, stickyAnimationOverlap)
      .add(stickyTween12, stickyAnimationOverlap)
      .add(stickyTween13, stickyAnimationOverlap)
      .add(stickyTween14, stickyAnimationOverlap)
      .add(stickyTween15, stickyAnimationOverlap)
      .add(stickyHeaderTween, 0.5);

    var bodyHeaderTimeline = new TimelineLite()
      .add(aboutTween, -0.7)
      .add(bodyHeadshotTween, 0)
      .add(bodyHeaderTween, 1);

    var mainTimeline = new TimelineLite()
      .add(stickyTimeLine, 0)
      .add(bodyHeaderTimeline, 1.7);

    var heroPinned = $(".page-main");
    var stickyTimeLineScene = new ScrollMagic.Scene({
        duration: "400px",
        reverse: false,
        triggerHook: "onEnter"//,//,scrollSetting.sticky.desktop.duration,
      })
      .setPin(heroPinned)
      .setTween(mainTimeline)
      //.addIndicators({name: "Sticky TimeLine Scene"})
      .addTo(controller);
custa1200 commented 8 years ago

I have created a basic stripped back demo to show the issue. This html file is self contained (except going off to cloud flare.It clearly shows the issue I have if reverse is set to false.

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
      html,
      body {
        padding: 0;
        margin: 0;
      }
      .test-hero {
        width: 100%;
        height: 300px;
        background: #995555;
        text-align: center;
      }
      h1 {
        padding: 20px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>

  <div class="pin-container">
    <div class="test-hero">
      <h1>Hero</h1>
    </div>
    <div class="text-body">
      <p>Meditation health goth stumptown blue bottle bushwick organic, authentic pinterest salvia photo booth umami fixie thundercats banjo. Leggings keffiyeh ugh cornhole 3 wolf moon tacos literally farm-to-table retro mlkshk authentic, scenester organic. Pug kinfolk cray narwhal everyday carry keytar. Photo booth kogi banh mi, crucifix hoodie yuccie asymmetrical ramps four loko. Celiac hella keffiyeh kombucha swag. Art party banjo mlkshk, locavore dreamcatcher raw denim hammock quinoa hella migas beard marfa brunch chia. Schlitz letterpress roof party, marfa single-origin coffee ramps salvia cold-pressed austin.</p>
      <p>Actually pug semiotics chambray cray 8-bit hella. Austin PBR&amp;B keffiyeh, pop-up church-key post-ironic put a bird on it blog single-origin coffee hashtag mixtape authentic plaid godard direct trade. Tofu pickled letterpress, photo booth lo-fi meh salvia direct trade. Kombucha pour-over pop-up, pork belly chambray migas master cleanse locavore whatever jean shorts cardigan. Ramps seitan hammock freegan, distillery craft beer meditation biodiesel meggings godard small batch waistcoat meh. Everyday carry actually whatever PBR&amp;B humblebrag, raw denim pug green juice. Deep v mlkshk kickstarter cornhole asymmetrical tofu yuccie, forage godard photo booth letterpress typewriter you probably haven't heard of them chambray dreamcatcher.</p>
      <p>Health goth try-hard next level everyday carry sustainable literally farm-to-table, waistcoat selvage brunch meh 90's bitters single-origin coffee. Yuccie pitchfork kickstarter polaroid, pabst fap ugh cornhole. 90's thundercats mustache, aesthetic mumblecore fingerstache street art yr fanny pack distillery leggings meggings blog knausgaard. Mixtape kogi pickled, pug letterpress microdosing keffiyeh post-ironic marfa helvetica pabst neutra kale chips farm-to-table normcore. VHS neutra XOXO banjo, letterpress ramps selfies mixtape. Waistcoat cred tilde, squid tumblr disrupt readymade PBR&amp;B. Cliche wolf VHS, fashion axe vice venmo franzen ugh 8-bit meh whatever williamsburg.</p>
      <p>Before they sold out cronut paleo biodiesel farm-to-table fingerstache. Literally humblebrag everyday carry, gastropub quinoa deep v neutra four dollar toast yuccie. Ethical bicycle rights taxidermy, seitan semiotics franzen tilde pabst. Marfa pabst austin migas gluten-free hoodie you probably haven't heard of them farm-to-table. Pour-over you probably haven't heard of them kogi PBR&amp;B, raw denim hoodie typewriter leggings meggings mixtape etsy. Portland neutra shoreditch fashion axe VHS. Aesthetic 3 wolf moon tattooed four dollar toast celiac schlitz, pop-up church-key mlkshk kinfolk shoreditch humblebrag microdosing.</p>
      <p>Tacos sustainable chartreuse 90's +1, schlitz meh biodiesel slow-carb. Gentrify celiac +1, narwhal cliche jean shorts ugh cold-pressed ethical put a bird on it. Keffiyeh williamsburg kombucha umami everyday carry health goth, asymmetrical craft beer wayfarers pug single-origin coffee readymade butcher cornhole. Tumblr paleo street art tacos, sartorial pork belly heirloom disrupt yr neutra. Authentic lumbersexual try-hard food truck. Kinfolk neutra heirloom chartreuse, dreamcatcher poutine leggings try-hard messenger bag cold-pressed. Twee tote bag plaid jean shorts, ramps cornhole cold-pressed skateboard schlitz YOLO cray semiotics.</p>
      <p>Heirloom echo park PBR&amp;B celiac, taxidermy gastropub bushwick pitchfork master cleanse meggings hashtag. Squid 90's intelligentsia cray taxidermy, roof party post-ironic fingerstache four dollar toast pitchfork keytar neutra narwhal. Retro squid direct trade brooklyn, williamsburg trust fund heirloom green juice YOLO lo-fi wayfarers put a bird on it. Chambray poutine try-hard, church-key chicharrones hammock pabst venmo typewriter offal marfa kickstarter bitters tumblr pitchfork. Cray chillwave stumptown marfa. Fixie gastropub post-ironic wolf offal. Aesthetic salvia ennui mumblecore godard before they sold out.</p>
      <p>Mlkshk pitchfork keffiyeh, aesthetic pinterest lumbersexual cold-pressed four dollar toast cred skateboard. Semiotics literally cardigan pickled selvage. Slow-carb forage chillwave, viral food truck farm-to-table 90's. Ramps blog craft beer, pinterest food truck yuccie four dollar toast hammock trust fund wayfarers pitchfork. DIY pickled occupy, drinking vinegar cliche bitters raw denim vice 90's street art plaid humblebrag PBR&B deep v. Crucifix hoodie flannel trust fund organic, pickled bicycle rights street art +1 typewriter cliche farm-to-table tumblr PBR&amp;B hashtag. Tousled drinking vinegar everyday carry microdosing schlitz, hammock blog actually.</p>
      <p>Typewriter chartreuse XOXO godard, gluten-free gentrify hammock sustainable messenger bag asymmetrical selvage meh seitan cronut. Seitan beard fap try-hard, tacos normcore schlitz shoreditch microdosing echo park vegan. YOLO portland single-origin coffee, pickled freegan normcore selfies fanny pack etsy hoodie. Fixie everyday carry butcher occupy cray, blue bottle sartorial bicycle rights VHS. Lumbersexual normcore XOXO DIY, offal before they sold out cornhole pickled. Franzen ethical food truck craft beer before they sold out. Kombucha austin banjo mixtape dreamcatcher, four loko chia tousled ethical semiotics plaid disrupt microdosing.</p>
      <p>Church-key selfies knausgaard VHS, tilde messenger bag tousled listicle vinyl kombucha art party ugh beard. Shoreditch brunch stumptown paleo twee, meh pug tattooed seitan mustache tote bag +1 fingerstache you probably haven't heard of them art party. Artisan banh mi readymade, YOLO schlitz brunch deep v bushwick chambray meggings you probably haven't heard of them austin. Cray disrupt retro, hoodie humblebrag chicharrones ramps blog williamsburg keffiyeh bitters ethical mixtape viral. Hella migas forage beard raw denim. Semiotics bitters sartorial cronut schlitz williamsburg, distillery kogi ugh kickstarter everyday carry trust fund dreamcatcher poutine raw denim. Everyday carry swag PBR&B butcher, farm-to-table helvetica leggings post-ironic.
      Oh. You need a little dummy text for your mockup? How quaint.</p>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/utils/Draggable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
  <script>
    var controller = new ScrollMagic.Controller();

    var mainTimeline = new TimelineLite();

    var heroPinned = $(".pin-container");
    var stickyTimeLineScene = new ScrollMagic.Scene({
        duration: 400,
        reverse: false // If this is set to false a gap appears at the top once scrolled back. Setting to true everyhing sits in the right place
      })
      .setPin(heroPinned)
      .setTween(mainTimeline)
      .addIndicators({name: "Sticky TimeLine Scene"})
      .addTo(controller);
  </script>
  </body>
  </html>
codemonkeynorth commented 7 years ago

I think the problem is if reverse is false, then the pin needs to not add the duration spacer on the way back up. (my duration is 200% so on the way back up i've got an extra 100% worth of blank space)

i guess this would needs fixing in the library itself?

jqweryjson commented 5 years ago

// remove the pin from the scene and reset the pin element to its initial position (spacer is removed) scene.removePin(true); ENJOY

kelvinwongg commented 4 years ago

@jqweryjson My scene duration is 3000, and this would cause the page jump to lower sections of the page, when I tried to add this line of code to the 'on' or 'leave' event of the scene.

MizuBishi commented 3 years ago

Hi,

I have a solution which works quite ok, it's a little hacky but it fixed the issue for me ATM.

const timeline = new TimelineMax();
timeline.add(...);
const duration = 3000;

const scene = new ScrollMagic.Scene({
  triggerElement: '#trigger',
  duration,
  triggerHook: 'onLeave',
})
  .setPin('#pin')
  .setTween(timeline)
  .addTo(controller);

timeline.eventCallback('onComplete', () => {
  scene.removePin(true); // jumps
  window.scrollBy(0, -duration); // jumps back
});

sccrollmagic version 2.0.8