Scrollmagic Show and Remove Pin на записи div

Question

Я играл с Scrollmagic и сумел получить несколько вещей, работающих. То, что я пытаюсь сделать прямо сейчас, - создать липкую панель совместного доступа для моего блога в нижней части окна просмотра. У меня было никаких проблем не удается получить его, чтобы показать с моим кодом

// Sticky Share Bar 
    var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5, 
     { bottom:-50}, 
     { bottom:0 } 

); 

var share = new ScrollMagic.Scene({ 
     triggerElement: '.entry', 
     offset:60, 
    }) 
    .setTween(stickyShareAnimation) 
    .setPin('.share-bar') 
    .addIndicators() 
    .addTo(controller) 

Это HTML

<section class="share-bar"> 
     <div id="share-container" class="container"> 
      <div class="row"> 
       <div class="col-md-12">This is the content</div> 
      </div> 
     </div> 
    </section> 
    <section class="blog-content"> 
     <div class="container"> 
      <div class="row"> 
       <article class="single-post"> 
        <div class="entry"> 
         <?php the_content();?> 
        </div> 
       </article> 
      </div> 
     </div> 
    </section> 
    <section class="Test"> 
    Where I want sharebar to tweenout. 
    </section> 

Я знаю, что я мог бы исчезать из Sharebar с другой TweenMax анимации ориентируется в раздел» Test ", но подумал, что, вероятно, лучший способ сделать это с моим первоначальным javascript. Есть ли другой способ или мне нужно создать отдельный твист для того, чтобы панель скрыть после завершения содержимого (div.entry).

Codepen http://codepen.io/anon/pen/aOWBQZ

Answer 1

Если вы хотите scrollbound анимации (продолжительность сцены> 0), то да, вы должны создать одну сцену для анимации заголовка в и один, чтобы оживить его снова.

Если вы хотите вызвать анимацию и оживить одно и то же свойство (т. Е. Непрозрачность при затухании и выходе) с использованием метода setTween ScrollMagic, будут возникать проблемы, связанные с перезаписи свойств.

Подробную информацию смотрите здесь: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

ПРИМЕЧАНИЕ: Вики была написана для ScrollMagic 1.3, но применяется тот же принцип.

Рекомендуемое решение это (обновление для ScrollMagic 2.x): http://jsfiddle.net/xk22Lx50/

Простейшее решение, однако, можно было бы определить класс CSS и использовать setClassToggle, чтобы добавить или удалить его в течение определенного времени. Анимация может быть достигнута с помощью анимации CSS. См: http://scrollmagic.io/examples/basic/class_toggles.html

И еще одна вещь: Если возлагали элемент всегда возлагали (как в вашем примере) и просто оживляет или, но никогда не является частью потока DOM, нет никаких причин, чтобы сделать это липкий (т. е. использовать функциональные возможности ScrollMagic).
Просто установите его в position: fixed в css, и все готово.

Вы все еще можете использовать ScrollMagic для анимирования и выключения, но с меньшим (ненужным) JS-кодом.