Jump to content

jesper.landberg last won the day on January 6 2019

jesper.landberg had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by jesper.landberg

  1. 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.

  2. 8 minutes ago, Sahil said:

    Here is how you can do it.


    TweenMax.to(animation, 1, {progress: animation.progress() + delta/5});


    you can change the duration or the value you are dividing with based on width, but 5 seems like good distance.


    See the Pen vWNqrZ?editors=0011 by Sahil89 (@Sahil89) on CodePen

    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?

  3. Just now, Sahil said:

    Ohk, can't you use demo I posted? It has functionality to call next or previous slides, the one you are editing will need some work to do.

    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

  4. Just now, Sahil said:

    Can you reference his codepen demo/thread?


    If possible also post demo of what you are working on.

    Here is his

    See the Pen ee107aeb54bdf4dca1084715d86b5e9c?editors=0010 by osublake (@osublake) on CodePen

    . 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?

  5. Just now, Sahil said:

    The Draggable constructor is different than usual draggable that we define.


    var draggableInstance = new Draggable(singleTarget,{});


    When you use draggable constructor you can pass only one target, and developers recommend using usual method instead of using constructor.


    You can define draggable normally and access it's properties and methods of draggable as follows




    I doubt you can use events in same fashion. What are you trying to do exactly? Can't figure out from your code.


    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) {



    The code creates a draggable infinite/loop. Courtesy of @OSUblake.

  6. 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) => {

    But I get the error 'Slider.onDrag is not a function. Is it possible to access Draggable props and methods "outside"?



  7. 2 hours ago, OSUblake said:


    Are you using some framework or cli tool? I'm trying to figure out what the issue is when importing from a regular folder. Somebody else was having the same problem using the vue-cli.

    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.

  8. 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 => {


    Why is this?


    EDIT: I't works if i do fromTo instead of from. But why?


    Attached image of issue.



  9. 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.

  10. 10 hours ago, Carl said:

    Thanks for the demo.

    I set your maxX to 100 and it seemed to work fine.

    Have you confirmed that 


    this.slides[0].offsetWidth * this.slides.length - 1

    actually returns the proper number? And if so, I would suggest just hard-coding for now to test that it works.


    I do not know of a "goto" way to control a Draggable via scroll. You can always tween the target of a Draggable like


    TweenLite.to(".js-slider", 1, {x:200}) 


    to make it move.




    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.

  11. 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/

    See the Pen pWPorK by ReGGae (@ReGGae) on CodePen

  12. It is possible but the behaviour might not be something desirable.


    Maybe if you explain a bit more what exactly is you are planning or trying to achieve. Reduced case demos are always a sure way to help us help you ;)


    See the Pen VKxmNz?editors=0010 by dipscom (@dipscom) on CodePen


    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.

  13. Like this?

    See the Pen 65cdc21ce5c49da45709ff9d09d0a754?editors=0010 by osublake (@osublake) on CodePen


    Using the modifiers plugin

    See the Pen vKdGAy by osublake (@osublake) on CodePen

    See the Pen ZOvvOX?editors=0010 by osublake (@osublake) on CodePen

    See the Pen mEpado?editors=0010 by osublake (@osublake) on CodePen


    Hi, thanks for the answer. Looking interesting.


    Basically this is what I'm doing

    See the Pen WGrBqZ?editors=0010 by ReGGae (@ReGGae) on CodePen


    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).

  14. Simple example:

      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.