Jump to content
Search Community

GSAP + ScrollMagic bound TimeLine's animation

trapdaf test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm a student developer. I wanted to know how could i bound my animation on the scroll  : 

i tried many things but now I think I need a hand.

 

I want my sprite and my background moving in the same time bounded on the scroll.

boySprite = [
    './assets/img/scene1/boy-1.svg',
    './assets/img/scene1/boy-2.svg',
    './assets/img/scene1/boy-3.svg',
    './assets/img/scene1/boy-2.svg'
];

var controller = new ScrollMagic.Controller();


var element = $('.act_second');
console.log(element.find('.img--bg'))

var scene1 = new TimelineMax({repeat: -1});
scene1
    .set(element.find('.img--boy'),{attr: {src: boySprite[0]}}, '+=0.5')
    .set(element.find('.img--boy'),{attr: {src: boySprite[1]}}, '+=0.5')
    .set(element.find('.img--boy'),{attr: {src: boySprite[2]}}, '+=0.5')
    .set(element.find('.img--boy'),{attr: {src: boySprite[3]}}, '+=0.5')
    .add(function() {
        console.log('done')
    })

var scene1Bg = new TimelineMax({repeat: -1});
scene1Bg
    .to(element.find('.img--bg'), 3, {right: '0%', ease:Linear.easeNone});

scene1Final = new TimelineMax({repeat: -1});
scene1Final.add([scene1, scene1Bg]);


var scene1Controller = new ScrollMagic.Scene({
    duration: 1200,
    offset: 150,
    reverse: true,
    triggerElement: '.act_second'
})
    .setPin('.act_second')
    .on('start', function() {
        scene1Final.play();
    })
    .setTween(scene1Final)
    .addIndicators({name: "boy-walk"})
    .addTo(controller);


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...