scrollmagic tweens animation

Question

I previously used superscrollorama and i started to use scrollmagic but i cant manage to get some divs properly animated. The first 2 divs are fine but the last two, once i scroll down, doesn't animate. also i would like to add a little offset to the 2nd div but don't know how, the syntax is a bit different from Superscrollorama.

var controller;
    $(document).ready(function($) {
        // init controller
        controller = new ScrollMagic();
    });

$(document).ready(function($) {
        // build tween
        var tween =  new TimelineMax ()
            .add([
                TweenMax.from(".biopic", 0.5, {top: '150',opacity:0}),
                TweenMax.from(".title", 0.5, {left: '150',opacity:0}),
                TweenMax.from(".gallery-wrap", 0.5, {top: '150',opacity:0}),
                TweenMax.from(".title2", 0.5, {right: '150',opacity:0}),
            ]);

        // build scene
        var scene = new ScrollScene({triggerHook: "onEnter", offset: 150 })
                        .setTween(tween)
                        .addTo(controller);
    });

Can you toss up your full (semi-)working demo please? – tomByrer Jul 11 '14 at 07:45 — tomByrer, Jul 11 '14 at 07:45

score 0 · Answer 1 · answered Aug 11 '14 at 11:09

Make sure the selectors of your TweenMax Object are correct.
You can make sure by testing them without adding them to ScrollMagic.

To add an offset you can either use the delay option of TweenMax or add a new scene.

For more help follow this guide: https://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md

scrollmagic tweens animation

1 Answers1