Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cmm

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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: 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×