Draggable rotation doesn't work until animation is completed

[Darklaki]

Hello,

I have following setup:

 

let tl = new TimelineMax();


tl.from('#draggableElParent', 1.5, {

   opacity: '0'

}, "-=1.5")


let scene = new ScrollMagic.Scene({

         triggerElement: '.container',

         triggerHook: 0,

         duration: "400%"

      })

      .setPin('.container')

      .setTween(tl)

      .addTo(controller)


const drag = Draggable.create("#draggableEl", {

        type:"rotation",

        bounds:{ minRotation:0, maxRotation:180 },

        onDrag: function(){

            // this won't work until animation is finished
        }
    })

The problem is I can't rotate this #draggableEluntil scene animation is finished. Is this bug or a problem in my configuration? It seems like only rotation doesn't work until animation is finished

Here I reproduced my problem:

 

See the Pen OJypqOQ by darklaki (@darklaki) on CodePen.

[ZachSaucier]

Hey Darklaki and welcome to the GreenSock forums.

 

This is because of the position: fixed on container2. If you apply position: fixed after the animation is complete you'll see that it stops working again. 

 

ScrollMagic isn't a GreenSock tool and we don't really recommend using it. In fact, GreenSock is in the process of creating its own scroll plugin!

 

I hope you can figure out a work around for this situation. Let me know if you have any GSAP specific questions and I'd be happy to help!

 

Side note: I highly recommend using GSAP 3's formatting. That way you can use new features like defaults  For example:

let tl2 = gsap.timeline({defaults: {duration: 1}});

tl2.from('.container2 span', {
  y: 200,
  opacity: 0
})

 

[Darklaki]

Hi Zach, thank you very much for pointing out what is causing the bug!
I was able to make this work and still look half-decent. I wrapped container2 in div with position: relative, then pulled out draggable element with position: absolute just above conatiner2 so it looks like
div relative
  .draggable absolute

  .container2 fixed

 

it's a bit hacky but it works.

Thank you once again and I'm looking forward to use GreenSock scroll plugin. Wishing you guys best of luck while developing it! Have a nice day