[Examples of animation like the one found on Greensock home page (slide 4)]

Wow, great, thanks for the quick response.

[Examples of animation like the one found on Greensock home page (slide 4)]

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

 

 

 

 

[Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): error: 'Power0' is not defined (no-undef)]

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

[Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): error: 'Power0' is not defined (no-undef)]

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

[Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): error: 'Power0' is not defined (no-undef)]

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.

[Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js): error: 'Power0' is not defined (no-undef)]

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

[Recommended scrolling trigger/detection]

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.

[Simple Scroll To]

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

[Simple Scroll To]

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?

[Simple Scroll To]

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

[Simple Scroll To]

I'm sure I'm missing something simple, but could not get this working:  

See the Pen lDAkp by cmmize1 (@cmmize1) on CodePen

 

also was not sure what is required (additional js) to support ScrollToPlugin.min.js?

 

Thanks,

[Draggable snap to type 'x,y']

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: 

See the Pen gltzw by cmmize1 (@cmmize1) on CodePen

 

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?

[Draggable snap to type 'x,y']

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.

[Draggable snap to type 'x,y']

Thanks Rodrigo and Carl for the quick response.  I did get the behavior correctly for both the x and y dragging (

See the Pen FnKba by jamiejefferson (@jamiejefferson) on CodePen

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

[Draggable snap to type 'x,y']

Trying to create a draggable snap to pages on a site:  sample codepen found

See the Pen gltzw by cmmize1 (@cmmize1) on CodePen

: 

See the Pen gltzw by cmmize1 (@cmmize1) on CodePen

 - 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

 

 

[Proper way to stop, jump and start a timeline]

Empty reply... could not delete.

[Proper way to stop, jump and start a timeline]

Thanks Rodrigo for all the time you spend on this. I put my code here:

See the Pen sKIue by cmmize (@cmmize) on CodePen

 

The issue/bug still shows up in code view. I have tried several ways of starting and stopping the timeline as you suggested, but it's always the same result. You can easily duplicate the error by clicking the first indicator and then the last and then the first and then the Start. As you will see it jumps to the second TL tween. I wish I could use rotate like you did... but I have to support ie7.

 

This project was originally a setTimeout with nothing but JQ. But the need to jump around made me go to GS. I also have a lot more to add which really leaves out using setTimeout.

[Parallax Photo Effect Examples]

Found this...  http://nightlycoding.com/index.php/2012/06/parallax-effect-with-jquery-and-tweenmax-greenshock/

 

 

Lesson learned look to google first.

[Parallax Photo Effect Examples]

Anyone have a Parallax Photo Effect example in GSAP for js?

 

If your wondering what it is here is one in flash: http://psd.tutsplus.com/tutorials/video-effects/parallax-shift-photoshop-cs6/

 

 

[Proper way to stop, jump and start a timeline]

Thanks Rodrigo, I was looking for an answer as to why the timeline jumps to the wrong place on the tl.resume('label'); Here is the sequence of methods called:

tl.pause() called.
tl.seek(end) called.
tl.pause() called.
tl.seek(beginning) called.
tl.pause() called.
tl.resume() called.


Note: the extra tl.pause() called on the selection of the first slide after the selection of the last. Is this the problem? Does the t1.resume() not know where the timeline is when called?

Basically just need the proper way to stop, jump around, and then resume from the last jump point. Console log is showing the calls at: www.pradev.com

[Proper way to stop, jump and start a timeline]

I have a stop/start button as well as slide indicators which you can click on(stop slide show and jumps to appropriate label).  When jumping around using the indicators and then starting the slide show it sometime jumps to the middle label.  You can see here (www.pradev.com - this is a sandbox site so excuse the mess.)  Is this the correct way to stop/start/jump? It happens most of the time when jumping from end to beginning and then hitting the start button.  

 

So this is a real skinny version of my timeline/control.:

// Stop selected
tl.pause();


// indicator selected
// Where "label" is the appropriate slide marker from timeline.
tl.seek("label");  
tl.pause();

// Start selected
tl.resume('label');


// Time line code sniplet
tl.addLabel('beginning');
tl.to([currentSlideLeft, currentSlideMiddle, currentSlideRight], .9, {width: '0px', height: height, marginLeft: halfMargin, opacity: '0.1'}, "+=10");

tl.addLabel('middle');
tl.to([currentSlideLeft1, currentSlideMiddle1, currentSlideRight1], .9, {width: '0px', height: height, marginLeft: halfMargin, opacity: '0.1'}, "+=10");

tl.addLabel('end');
tl.to([currentSlideLeft2, currentSlideMiddle2, currentSlideRight2], .9, {width: '0px', height: height, marginLeft: halfMargin, opacity: '0.1'}, "+=10");

tl.repeat(-1);
tl.repeatDelay(1);
 

Thanks for a great product and your help