ScrollMagic example

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="//cdn.shopify.com/s/files/1/0571/2219/3560/t/16/assets/ScrollToPlugin.min.js?v=105859443776239518721643093670"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>



  const HowToUseAnimation = new TimelineMax().add([
   TweenMax.fromTo(['.howtouseBottleTop'], 2, {
      y: 60,
      x:30,
      rotation: 30,
      scale:1,
      opacity: 1,
      ease: SlowMo.easeOut,
   }, {
      rotation: -10,
      opacity: 1,
      scale:2,
      x:0,
      y: -200,
      ease: SlowMo.easeOut,
   }),
   TweenMax.fromTo(['.howtouseBottleBottom'], 1, {
      y: 0,
      ease: SlowMo.easeOut,
   }, {
      y: 0,
      ease: SlowMo.easeOut,
   }),

]);

new ScrollMagic.Scene({
   triggerElement: '#howtouseSectionForBootle',
   triggerHook: 'onEnter',
   offset: 550,
   duration: 800,
}).setTween(HowToUseAnimation).addTo(controller);