Плавное появление и плавное скрытие блока при скроллинге, как сделать?

Question

[Александр Наумов]

Добрый вечер.
Пытаюсь реализовать появление и исчезновение блока как на сайте https://www.apple.com/ru/macbook-pro/
Реализовываю через библиотеку ScrollMagic

$(document).ready(function(){
  var tween = new TimelineMax()
  .from(".gsap-anim", 1.5, { opacity: 0})
  .to(".gsap-anim", 5, { opacity: 0, delay: 20});
    var scene = new ScrollMagic.Scene({
     triggerElement: ".gsap-trigger",
              triggerHook: "onEnter", 
              duration: "100%", 
              offset: 50 
            })
    .setTween(tween)
    
            .addTo(controller);
          });

Появление правильно происходит блока, через 10% после тригера, а вот исчезновение не получается сделать за 10% до скрытие блока.
Может кто знает как это реализовать?

Answer 1

[Adik Izat]

Попробуйте использовать эту библиотечку) Она прикольная и очень простая, ксли я вас правильно понял, вашу задумку лего можно реализовать через нее.

Comments

[Александр Наумов]

Я скинул сайт для примера, и так покано что анимация должна быть при самом скролле, чем больше прокручена страница, тем больше opacity