setTween() says gsap.Tween is not a valid TweenObject

[wormer]

Here is how I add vue-scrollmagic

import VueScrollmagic from "vue-scrollmagic"

Vue.use(VueScrollmagic, {
  vertical: false,
  refreshInterval: 0,
})

Here is how I use it:

import { gsap } from "gsap"

const tween = gsap.from('.element', {backgroundPosition: '79% 46%'})
console.log('tween', tween)
this.$scrollmagic.addScene(
  new this.$scrollmagic.scene({
    triggerElement: '.element',
    triggerHook: 1,
    duration: '130%'
  })
  .setTween(tween)
)

I get not a valid TweenObject error in the console:

tween Tween {…}
(ScrollMagic.Scene) -> (animation.gsap) -> ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

What am I doing wrong?

[saschamander]

Have the same issue.

[serbeh]

The same issue. Please, add some example with gasp tweens.

[aaronLejeune]

Hi all

I am using gsap tweens this way:

vue-scrollmagic.js

import VueScrollmagic from 'vue-scrollmagic';
import Vue from 'vue';

Vue.use(VueScrollmagic, {
    verical: true,
    globalSceneOptions: {},
    loglevel: 2,
    refreshInterval: 0
});

index.vue

// hero fade to black
            const scene1 = this.$scrollmagic.scene({
                    triggerElement: '#trigger-1',
                    triggerHook: 0, //wanneer het start in te scrollen
                    duration: 220
                })
                .setTween('.section-1', {
                    opacity: "0",
                    y: "-3%"

                })
                .addIndicators({
                    name: '1'
                });

and this.$scrollmagic.addScene(scene1)

hope it can help!

[wormer]

@aaronLejeune thanks, but...

// hero fade to black
            const scene1 = this.$scrollmagic.scene({
                    triggerElement: '#trigger-1',
                    triggerHook: 0, //wanneer het start in te scrollen
                    duration: 220
                })
                .setTween('.section-1', {
                    opacity: "0",
                    y: "-3%"

                })
                .addIndicators({
                    name: '1'
                });

This is not what I need. It animates from the current state to the new state defined in setTween(). I need to animate from the new defined state to the current state. That's why I use gsap.from().

It can be done in scrollmagic but not in vue-scrollmagic.

[saschamander]

Did some debugging and found where the error happens. It does not apply to any of these if. The type of value is object. Not sure how to fix this, maybe another if for Object types

if (value instanceof Array || (value && value.push && _isArray(value))) {
    align = align || 'normal'
    stagger = stagger || 0
    curTime = position
    l = value.length
    for (i = 0; i < l; i++) {
        if (_isArray((child = value[i]))) {
            child = new TimelineLite({ tweens: child })
        }
        self.add(child, curTime)
        if (typeof child !== 'string' && typeof child !== 'function') {
            if (align === 'sequence') {
                curTime = child._startTime + child.totalDuration() / child._timeScale
            } else if (align === 'start') {
                child._startTime -= child.delay()
            }
        }
        curTime += stagger
    }
    return self._uncache(true)
} else if (typeof value === 'string') {
    return self.addLabel(value, position)
} else if (typeof value === 'function') {
    value = TweenLite.delayedCall(0, value)
} else {
    throw (
        'Cannot add ' +
        value +
        ' into the timeline; it is not a tween, timeline, function, or string.'
    )
}

[saschamander]

Found a workaround that uses the on('enter',...)-Event to start the animation. The timeline has to be paused for this to work, otherwise the animation start on page loaded.

const tl = this.$gsap.timeline({ paused: true })
tl.from('#yourElement', {
    left: 100,
})

const scene = this.$scrollmagic
    .scene({
        triggerElement: '#yourTriggerElement',
    })
    .on('enter', function (event) {
        tl.play()
    })

// Add Scene to controller
this.$scrollmagic.addScene(scene)

// Attaching scrollmagic controller to element
this.$scrollmagic.attachTo(document.querySelector('#yourElement'))

[sa8ab]

same issue, any fix?

[xamuel98]

You no longer need to import TweenLite, TweenMax, TimelineLite, or TimelineMax. Just import gsap like this: import { gsap } from gsap this worked for me

[mipaifu328]

when my gsap is latest version, this are the same error .I find 'vue-scrollmagic' package.json ---"gsap": "^2.1.3", so I install this version and this error disappeared

[sa8ab]

You guys can use the CDN of scrollmagic/gsap, it works well for me without any npm library.