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.

7 hours ago, Sahil said:

I know why it is happening but not sure if it can be fixed, only Blake can answer that. Otherwise it will need to be done in some other way where tween isn't tied to draggable.

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

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?

Just now, 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

 

Woho awesome! thanks a lot!

Just now, Sahil said:

Got it, let me give it a try otherwise Blake will resolve it.

I'm very thankful for your help!

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

Just now, Sahil said:

What is Hamster?

 

Here  is the stackoverflow thread that talks about mousewheel events.

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

1 hour ago, OSUblake said:

 

 

Just add event.preventDefault() so it doesn't scroll the page.

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: 

Just now, Sahil said:

 

 

See the Pen aVvMde?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

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

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

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

 

Draggable.get(domElement).x;

 

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

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.

On 2017-10-30 at 1:48 PM, OSUblake said:

I would try adding those plugins to GSAP's npm folder and importing like this.

import ThrowPropsPlugin from 'gsap/ThrowPropsPlugin';

 

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

9 hours ago, GreenSock said:

Did you try this?:

 

import ThrowPropsPlugin from './assets/js/ThrowPropsPlugin';

 

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.

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.

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

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

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

tl.reverse()

tl.add ... ? 

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

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.