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

[cmm]

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

[GreenSock]

Looks like maybe you just forgot to import Power0

 

import { TweenLite, Power0 } from "gsap";

But actually, I think you may have meant Linear, since you're referencing easeNone:

 

import { TweenLite, Linear } from "gsap";

TweenLite.to(this.slides, 2, { x: -2500, ease: Linear.easeNone }

Don't forget that if you intend to animate CSS-related values, you'll need CSSPlugin. ?

 

[cmm]

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.

[GreenSock]

Yeah, fair point. In the upcoming GSAP 3 release, this won't be an issue at all

 

[cmm]

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

[GreenSock]

Hm, it's very difficult to troubleshoot remotely like this without actually being able to work with your code/project, but that ease looked like it might be linear (tough to tell from the very short clip). 

[OSUblake]

You check if linear is working by rotating a box. Notice how linear rotates at the same speed.

 

See the Pen ebd9504f755c55fabb4a26a30b31df20 by osublake (@osublake) on CodePen.

 

[cmm]

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

[ZachSaucier]

54 minutes ago, cmm said:

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

This thread can help get you started with a horizontal scrolling effect: