Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Draggable rotation doesn't work until animation is completed

Recommended Posts


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%"





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


        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

Link to comment
Share on other sites

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


  • Like 1
Link to comment
Share on other sites

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


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.