jesper.landberg

So I'm yet to solve this issue. This is not throwing me any errors, but it's not working: import TweenMax from 'gsap' import Draggable from 'gsap/Draggable' import ThrowPropsPlugin from '../assets/js/ThrowPropsPlugin But moving my ThrowPropsPlugin.js from my assets/js folder to the gsap npm folder and importing it like this works: import TweenMax from 'gsap' import Draggable from 'gsap/Draggable' import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin However this is not a viable solution for me since it's not in the npm folder when the build is done on the server. I am using Vue/Nuxt, which is using webpack.

@OSUblake got any idea on how this might be fixed?

Just one thing I'm noticing, when u scroll and then drag before the scroll animaton is done, it often "jumps". Any idea how to prevent this?

Woho awesome! thanks a lot!

I'm very thankful for your help!

The demo is nice, however I'm not using snapping, what I want is to move the slider when I scroll in the same way it does when I drag it. Continuous movement. "drag the slider with mousewheel" or how to say:P

Well it's basically a vanilla js jquery mousewheel equivalent. http://monospaced.github.io/hamster.js/

I stripped down @OSUblake 's example to my use case.. still having problem figuring out how to make it work on scroll. Dunno what to place inside my mousewheel handler=/ Any tips? Pen:

Amazing, thanks a lot both of u @OSUblake and @Sahil !!

Here is his Pen. And that is basically what I have done, except I don't use snap points and I don't use jQuery. What I would want to do is move the slider on mouseWheel to complement the dragging. Any idea how this could be achieved?

Hi. I see. I am trying to trigger onDrag on mousewheel scroll, to get the same effect I get when dragging . Here is some more of my code: let animation = TweenMax.to('.slide', 1, { x: "+=" + wrapWidth1, ease: Linear.easeNone, paused: true, repeat: -1, modifiers: { x: function(x, target) { x = x % wrapWidth1; return x; } } }) let Slider = Draggable.create(document.createElement('div'), { type: "x", throwProps: true, trigger: wrapper, onDrag: updateProgress, onThrowUpdate: updateProgress }) function updateProgress() { animation.progress(this.x / wrapWidth1 * speed) } Hamster(wrapper).wheel(function(event, delta, deltaX, deltaY) { Slider.onDrag() }) The code creates a draggable infinite/loop. Courtesy of @OSUblake.

I'm trying to call a Draggable.onDrag() inside a mousewheel handler like so: let Slider = Draggable.create(document.createElement('div'), { type: "x", throwProps: true, trigger: wrapper, onDrag: updateProgressReverse, onThrowUpdate: updateProgressReverse }) Hamster(wrapper).wheel((event, delta, deltaX, deltaY) => { Slider.onDrag() }) But I get the error 'Slider.onDrag is not a function. Is it possible to access Draggable props and methods "outside"?

I'm using nuxt which is a small vue framework. While ur solution worked for me locally... I didn't work after I deployed the files, since ThrowPropsPlugin is only in my local node_modules folder. (hosted on netlify, and using a webhook to build the site on deploy). Would be insanely grateful is someone could figure out what the problem is when importing the module from a regular folder.

It worked=) thanks so much for the tip, wouldnt have thought of it myself!

Nope, no differenece. No errors or anything.

Hi, I'm trying to animate elemens when they are in viewport. However, they often stop animating. My "in-view" code: const elems = [...document.querySelectorAll('[data-scroll]')] this.observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { TweenMax.from(entry.target, 2, { y: 200, alpha: 0, ease: Expo.easeOut }) } else { TweenMax.set(entry.target, { clearProps: 'all' }) } }) }) elems.forEach(elem => { this.observer.observe(elem) }) Why is this? EDIT: I't works if i do fromTo instead of from. But why? Attached image of issue.

Hi, I'm trying to use throwpropsplugin but it doesnt work or give any console errors.... import TweenMax from 'gsap' import Draggable from 'gsap/Draggable' import './assets/js/ThrowPropsPlugin' Draggable.create(document.querySelector('.slider'), { type: "x", edgeResistance: 0.9, dragResistance: 0.5, throwResistance: 0.75, throwProps: true, bounds: { maxX: 0, minX: 5000 } }) I am using the "...for npm" users flat version of ThrowPropsPlugin.js.

Thanks, but whatever I add to maxX does no difference, except on the other end:S.... would u show me a fork of my pen? Not sure I understand how this bounds minX, maxX works.

Hi, Im trying out draggable and it seems awesome. However I got some issues... bounds { minX.... maxX } gives me some weird results. I want to make so that the i cant drag the slider further then the combined width of the children elements. Isn't this where I'm supposed to use maxX? If u check my codepen it's almost like minX and maxX are reversed. Also, is there any "goto" way of making the draggable moving by using scroll/mousewheel, like on this site that is using draggable? http://www.jonyguedj.com/

this.state = { enter: { yPercent: 25, xPercent: 25, alpha: 0, skewX: -10 }, neutral: { yPercent: 0, xPercent: 0, alpha: 1, skewX: 0 }, leave: { yPercent: -25, xPercent: -25, alpha: 0, skewX: 10 } } TweenMax.fromTo(el, 0.5, { this.state.enter }, { this.state.neutral, ease: Expo.easeOut }) Is it possible to do something like my example above? The exact example does not work.

When using scrollTo to an anchor like this: //or to scroll to the element with the ID "#someID": TweenLite.to(window, 2, {scrollTo:"#someID"}); Is it possible to set an offset so that it stops say.. 200px before?

It's two buttons, and when clicking one of them I want the reverse() animation to be slightly different, either by adding a tween to it or removing the last step.

Hi, is it possible to add a tween to reverse() as the last step? tl.reverse() tl.add ... ?

Hi, thanks for the answer. Looking interesting. Basically this is what I'm doing http://codepen.io/ReGGae/pen/WGrBqZ?editors=0010 Moving around an image. Is there a better way of doing this? Maybe using the modifiers plugin? Sorry if the code is ugly/bad, did this quick and are new to es6 (and not much of a JS veteran either, yet).

Simple example: $(window).mousemove(function(e){ var mousePos = e.pageY TweenMax.to(elem, 0.35, { y: -mousePos, ease: Power2.easeOut }); }); is there any better way of doing this rather then having an easing every single time the mousePos is updated? Would be nice to have an easeInOut (easeIn when I start moving and easeOut when I stop.