Jump to content
GreenSock

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

Draggable rotation doesn't work until animation is completed

Recommended Posts

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

Link to post
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 post
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 post
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.

×