Leaderboard

Hello dear friends, No doubt Christmas is coming ... Hi @Jonathan - sorry, when I saw your new portrait, I just felt the need to redecorate my tree to dedicate it to the GreenSock community. I coded my first Christmas tree inspired by the work of Petr Tichy (here) Dec 2015. It was one of my first exercises. Kind regards Mikel

Hi @shaunhurley The callback system for Draggable works just like the one TweenLite/Max and TimelineLite/Max. If figuring out how to set the scope isn't obvious, then it's probably due to how your code is written. My guess is that you're doing something like this, which is what all the examples in the docs do. There is a way to set the callback scope to the target when you create draggables like that, but I'm not going to get into that because it requires more work. Draggable.create(".elements", { ... }); To set the callback scope to the target, you should be working at the element level, creating one draggable at a time. This may require you to use some sort of loop if you want to create more than one. var draggable = new Draggable(theElement, { throwProps: true, onThrowComplete: update onThrowCompleteScope: theElement }); And knowing how to bind a function can simplify how you define callbacks in GSAP, or any library for the matter. Consider the following. You want to use a scoped callback for different actions, and want to pass in a couple of parameters to that callback. Pretty messy, right? var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], onUpdateScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onDragScope: theElement, onThrowUpdate: update, onThrowUpdateParams: [100, 500], onThrowUpdateScope: theElement }); function update(min, max) { console.log("this", this); // => theElement console.log("min", min); // => 100 console.log("max", max); // => 500 } Instead of specifying each scope separately, you can use "callbackScope", but it's still kind of messy. We were only able to get rid of 1 line of code. var animation = TweenLite.to(theElement, 1, { onUpdate: update, onUpdateParams: [100, 500], callbackScope: theElement, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: update, onDragParams: [100, 500], onThrowUpdate: update, onThrowUpdateParams: [100, 500], callbackScope: theElement }); This is where creating a bound function might be useful. You can combine everything into a single, reusable function. The first parameter is the scope. Any additional parameters will be passed into the callback. var boundUpdate = update.bind(theElement, 100, 500); var animation = TweenLite.to(theElement, 1, { onUpdate: boundUpdate, ... }); var draggable = new Draggable(theElement, { throwProps: true, onDrag: boundUpdate, onThrowUpdate: boundUpdate }); Much, MUCH cleaner!

Hm, allowNativeTouchScrolling:true seems to work perfectly. [scratches head]. It drags things side-to-side, but also allows scrolling vertically (natively). If your goal is to somehow sense the initial direction of the drag and if it's horizontal, lock native scrolling completely (until release), I don't see a great option for that right now. It's super tricky to do that kind of thing on all platforms due to the timing of when preventDefault() must be called on the event and how long it can take to accurately discern which direction the user is dragging. I think your best bet is probably to stick with allowNativeTouchScrolling:true (unless I'm misunderstanding your objectives).

What you are doing with subtracting the duration of the second tween is correct. There really isn't a method for aligning the endTIme's of animations.

Awesome job, Mikel. Thanks so much for sharing. Love the little Jonathans

Thanks for the demo. I was actually surprised what you had worked at all .addPause("+=0.01") .call(helloMessage, ["Mick"], master, "message2+=0.01") .addPause("+=0.01") .call(playAudio, ["song.mp3"], master, "audio2+=0.01") It's been my understanding that you should always add a label prior to trying to add something relative to a label. If you follow this approach it should work fine .call(helloMessage, ["John"], master, "message1") .addPause("+=0.01") .add("audio", "+=0.1") .call(playAudio, ["song.mp3"], master, "audio") .addPause("+=0.01") .add("message2", "+=0.1") .call(helloMessage, ["Mick"], master, "message2")

Try this instead, adding the keyword this to replayBtn (this is if this code is in a FRAME script wherein the replayBtn is accessible within that frame number) > this.replayBtn.on("click", function() { til.invalidate().restart(); }); or if you're using the default HTML it exports, you should end up with a reference called exportRoot, which you can use if you can't figure out scope (just replace this with exportRoot and it should work). How scope works in Animate CC --> var til = "blah"; // Frame-level Scope this.til = "blah"; // Movieclip-level Scope til = "blah"; // Global Scope

Hi DD77 I've seen literally a dozen or more posts about this pen you forked from GrayGhost Visuals which is a just a basic tutorial on using ScrollMagic. Sahil has gone above and beyond the call of duty in trying to explain how to get certain things accomplished with GSAP. It is not the purpose of these forums to spend hours helping with each new requirement a user has on a project, especially those requiring complex logic and re-wiring of animations that have already been fed into ScrollMagic. I've read this thread a few times and I personally do not know enough about ScrollMagic to solve your issue. The reality is there are a lot of users who need our help (which we offer for free) and we have to do our best to help people with issues related directly to the GSAP API, anything beyond that is a bonus. I hope you continue to enjoy using GSAP and wish you good luck with your project.

It was jumping because you weren't using e.preventDefault() and you can just scroll using scrollTo plugin. Reverting tween won't scroll your animation. As Jonathan said, I don't want to break any forum rules. Generally we don't provide such solutions and other forum members prefer to get questions with limited demo and specific problem. I don't want to go against the usual rules though I think I have helped you enough. All the best.