Search code examples
javascriptgsapscrollmagic

ScrollMagic and TweenMax Automatically executes

Hey all Im trying to wrap my head around all this, been playing with it all day. What I'm trying to accomplish is have a background image zoom in (and eventually become transparent through opacity) when the user scrolls down. I've got one half of the desired effect working but It doesn't seem to want to work on user scroll, it just automatically executes.

It must be something simple but Im pretty new to this.

here is the code I've written

    var tween = TweenMax.to('#regular', 0.5, {
    scale: 2
    });

    // Init Controller
    var controller = new ScrollMagic.Controller();


    // Create the Scene and trigger when visible with ScrollMagic
    var scene = new ScrollMagic.Scene({
    triggerElement: '#featured-image',
    reverse: true,
    offset: 700
    })
    .setTween(tween)
    .addTo(controller)

http://codepen.io/anon/pen/EjWLyO

Solution

  • Your basic problem is that the setTween method of your scene is not available & this is because you are missing an include of animation.gsap.min.js important plugin in your codepen when it comes to using TweenMax alongside ScrollMagic.

    So add this external javascript after your ScrollMagic include in your pen and you are gold.