cmm

Wow, great, thanks for the quick response.

Would like to do something similar to this which is found on Greensocks home page. Are there any examples of the code to get an idea of how this was architected? Many Thanks

I found the problem.... removing the transition/transform (transition: transform 4s; &:hover { transform: translateX(-700px); } css on the elements gave me the expected behavior from GS. Thanks for your help. Has anyone seen an example of how to achieve the horizontal infinite pic scrolling as on this page - https://brand.uber.com/ (scroll down a little)?

Why wouldn't I be getting a linear ease... see attachment. TweenLite.to(this.slides, 2, { x: -2500, ease: Linear.easeNone }) I did import the CSSPlugin... import { TweenLite, Linear, CSSPlugin } from 'gsap' also added this.... just in case: // Fix for treeshaking // eslint-disable-next-line const plugins = [ TweenLite, Linear, CSSPlugin ] No errors on running. Thanks Screen Recording 2019-10-09 at 3.39.22 PM.mov

Thanks so much for your quick response, that fixed the error. It would be helpful if we could get dependancies noted in docs.... for example when looking at the docs for easing I didn't see anywhere that loading easing methods was separate for each ease. Thanks again.

This is a vue js project.... not sure why I'm getting this error? This seems very straight forward: Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): error: 'Power0' is not defined (no-undef) at src/components/global/_base-carousel.vue:47:52: 45 | this.observer = new IntersectionObserver(this.moveObject, options) 46 | this.slides = document.getElementsByClassName('slide') > 47 | TweenLite.to(this.slides, 2, { x: -2500, ease: Power0.easeNone }) | ^ import { TweenLite } from 'gsap' export default { name: 'BaseCarousel', // components: { Carousel, Slide }, props: ['content'], data () { return { classes: this.content.entry.classes, images: this.content.entry.images, animation: this.content.entry.animation, observer: {}, slides: {} } }, mounted () { // Create a observer let options = { root: null, // relative to document viewport rootMargin: '0px', // margin around root. Values are similar to css property. Unitless values not allowed threshold: 1.0 // visible amount of item shown in relation to root } this.observer = new IntersectionObserver(this.moveObject, options) this.slides = document.getElementsByClassName('slide') TweenLite.to(this.slides, 2, { x: -2500, ease: Power0.easeNone })

I'm looking for a recommended scrolling trigger detection npm package from the greensock team. I've just spent a day weeding thru a bunch of them and not really pleased with what I've found (and there are a bunch). I'm specifically going to use it with vue.js to fire animations off at certain trigger points (ie. this <div> hits the top of the page). Thanks for your help.

I found the issue: when enabling draggable on the content it generates inline css and an additional div. It was the addition of those that (for some unknown reason to me) makes scrollTo work. So I just added the *div to my code that was generated and scrollTo works now without dragggable enabled. * added div <div style="display: inline-block; width: 100%; padding-right: 350px; position: relative; overflow: visible; -webkit-transform: translate3d(0px, 0px, 0px);"> When I have more time I'll have to figure out whats jacked up in the css that is causing this. Thanks for your help

Really trying to get a solution for android/iphone. Look at this site (diahapppyhour.com) on one of those devices and you'll see that resizing and behavior is an issue. I plan on removing the draggable libs for mobile devices but didn't expect this behavior. Is this normal?

Thanks Jonathan, my bad for hacking that out.... it's been modified but the calculation of the position needs work...... anyhow. this is a small piece of an issue with using draggable on a mobile device. Once you force draggable to a y only scroll you can no longer grow or shrink the display with "pinching". This site www.diahappyhour.com is working great in chrome, ok in IE 9, and not so great on android phone or iphone. So my plan was to just forget the draggable part for mobile devices since it's really not needed anyway. but when i remove Draggable and throwprops libs... the ScrollTo quits working. Any light you can shed on this would be helpful.. or if it is a know issue with android and iphones when using draggable? Thanks

I'm sure I'm missing something simple, but could not get this working: http://codepen.io/cmmize1/pen/lDAkp also was not sure what is required (additional js) to support ScrollToPlugin.min.js? Thanks,

Thanks for all the help on this. I did implement Rodrigo's suggestion. Be sure to resize the browser to the div size(will fix that later - limitation of the viewport plugin used). On codepen: http://codepen.io/cmmize1/pen/gltzw Sample site: http://www.pradev.com/one-page/sample.html On an ipad (both chrome and safari) the screen flickers at the end of the drag, I'm thinking it is when I destroy the draggable instances and recreate the new one. Any ideas on how to stop that? In your opinion, is this the best way to go about this for a one page multi-directional web site?

Hi Jack, Thanks for the reply. I'm trying to grab the div that is active in the viewport... it would be a child of the content(draggable instance content). My hopes is to restrict the the drag boundaries to keep the viewport on defined divs. I have attached an image to help explain this. Here is an example of some close to this design using Kirkas ascensor lib. (http://www.pradev.com/Ascensor-Sample/examples/example_swipe.html) As you can tell from the example it lacks the elegance of your software and requires manually defining "floor/rooms". Thanks again for all your support, I've really enjoyed this product.

Thanks Rodrigo and Carl for the quick response. I did get the behavior correctly for both the x and y dragging (http://codepen.io/ja...erson/pen/FnKba). Now on to stopping the throwing and dragging to right (only testing that direction for now) when there is not a page. Is there a way to grab the current div that a user might be throwing or dragging on? If I can do that then I can reset the bounties when attempting to go right. I have tried looking at 'this' in a onDrag, but it's the draggable object. Thanks again for your help, Chuck

Trying to create a draggable snap to pages on a site: sample codepen found here: http://codepen.io/cmmize1/pen/gltzw - no ScrollToPlugin and here: http://www.pradev.com/one-page/sample.html - with ScrollToPlugin On the Draggable.create - using a type: 'scroll' or a type:'x,y' - I am having problems getting the proper snap behavior on the x axis (dragging left - see page two of the sample). Any help figuring out the dynamics of the snap values to behave proper for this type of site would be greatly appreciated. The Y scrolling snap work great. Another thing I noticed changing the Draggable.create to a type: 'x,y' - The return values for jquerys .position varies on the pages. Shows up in the function scrollTo console.log. I'm pretty sure it has to do with the wrapper div that gets created with Draggable.create - type:'x,y'? I have commented out the code for the Draggable.create - type:'x,y' so as to test both types. Thanks for any help, Chuck