ecsancho

Thanks for the response. I'm using the latest version of gsap. I manage to fix it by calling on scrollTrigger.refresh() on window.resize. I'll test it further if anything comes up I'll put up a proper codepen. Thanks again

Greetings! I ran into a weird issue when I enable Scroll Smoother it places my scroll triggers at the bottom of my content container when I test in mobile dimensions using dev tools and ios safari browser, however when is remove Scroll Smoother the triggers are at the correct locations. If anyone can please give me any pointers? Thanks in advance! let smoother = ScrollSmoother.create({ wrapper : "#smooth-wrapper", content : "#main-container", smooth:1, smoothTouch: 0.1, onUpdate: this.scrollProgress, normalizeScroll: true }); gsap.set("#box", { width: 200, height: 200, backgroundColor: "#ff0000" }); gsap.to("#box", { scrollTrigger:{ trigger: "#box", scrub: true, markers: true, start: "top center", end: "bottom+=20 top", onEnter: ()=>{ console.log("enter") } // pin: true }, x:400, rotation: 360, duration: 6 })

I need to track velocity because I want to do a certain animation when velocity hits certain ranges, I just didn't include the code in my sample. I believe this might work as long the initial velocity is not a large number. I'll give it try. Thanks for the responses!

Hi I'm wondering if there's a way to set a max velocity? I'm using a proxy div and having my elements respond the proxy.x positions the problem is with a slight flick sends my elements flying off screen because of the start velocity is a large number so I think restraining the max velocity will solve this. Here's my setup let proxy = $("<div>"); Draggable.create(proxy, { trigger: box, throwProps:true, onThrowUpdate:function(){ //code for elements.x = this.x }, snap:function(endValue) { return Math.round(endValue / 80) * 80; } });

Beautiful! Thank you so much!

Greetings all. Is it possible with gsap draggable to "drag" an element without moving the object? Basically I want to use it to capture the velocity on drag and dragRelease. Thanks in advanced!

I've ran into the same problem and the issue is with Scroll Magic not completing it's calculations as you scroll fast. A work around for your navigation is to put a timer delay on nav clicks to prevent the user from spamming clicks but this doesn't solve the issue if the users drags the scroll bar. What you'll have to do is determine if scroll bar is clicked and pre-calculate your scenes or setup a timer on mouserelease check which scenes are not visible and calculate there off states. This is a very hacky and not elegant solution by any means and is a lot of work to implement. This is the very reason I'm going to avoid using scroll magic and rather use a custom scroller where I can control all scroll interactions. Good luck!

Nice! thank you so much!

Thanks for the reply. I'm trying to switch all my jquery mobile touch events (tap, swipe left/right) to Gsap Draggable because jquery feels unresponsive, like there's a short delay to respond and Gsap feels so much more smoother and responsive. So how would I go about detecting tap and then respond with a function? Something like Draggable.tap('#button', {}) ?

I've just started testing with Draggable and I am impress on how well it performs on mobile. I was wondering if Gsap is able to detect mobile touch events? Thanks!

Okay I still can't get this to work in adobe edge. Here's the codeden source that I'm basically using in edge http://codepen.io/anon/pen/yvjCl/ This works in code pen. In edge I'm importing the svg to the stage and name it "arrow" This works in edge. And the width tweens fine. But I'm looking for is to modify the fill color of the shape inside the arrow var arrow = sym.$("arrow") TweenMax.to(arrow, 2, { width:100}); This does not work var testme = sym.$("#testme"); TweenMax.to(testme, 2, { fill:"red"}); nor var testme = sym.$("arrow").find("polygon") TweenMax.to(testme, 2, { fill:"red"}) nor var testme = sym.$("arrow").find("#testme") TweenMax.to(testme, 2, { fill:"red"}) What gives? Any idea folks? Thanks in advance

I'm not near my computer at the moment I'll investigate tomorrow morning. I'm using Adobe edge and imported the svg to the stage and was targetting it with getSymbol(), so I'm not sure if I was targeting the shape inside. But thanks for the quick replies fellas. Much appreciation.

Greetings I'm trying to change the color of an SVG but it appears this functionality is not supported or I'm doing something wrong. here's what I've tried arrow is the name of my svg, and tweening width/height works but not color changing TweenMax.to(arrow, 2, {fill:"#ff0000"}); TweenMax.to(arrow, 2, {color:"#ff0000"}); TweenMax.to(arrow, 2, {css:{fill:"#ff0000"}}); Can anyone please point me in the right direction? Thanks

Is there a way to that BinaryDataLoader load wav files and encode them to a viable format that MP3Loader can use? I don't know if that is the correct process or if there is a better method of playing wav files. Thanks

Is there a property that I can tap into so I can grab the total amount buffered? It can be in seconds or bytes it doesn't matter or some formula. Thanks