Darklaki Posted April 25, 2020 Share Posted April 25, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted April 25, 2020 Share Posted April 25, 2020 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 }) 1 Link to comment Share on other sites More sharing options...
Darklaki Posted April 26, 2020 Author Share Posted April 26, 2020 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now