CODEWITHSUNDEEP
jquerygsapscrollmagicgasp
Chris James Champeau
Chris James Champeau

Reputation: 994

Scrollmagic timelineMax duration offset

I have a pretty simple Scrollmagic event. It involves section wipes, as explained here - ScrollMagic Section Wipes Example.

So taking that I put together the following ScrollMagic setup.

var ctrl = new ScrollMagic.Controller({
    globalSceneOptions: {
        triggerHook: 'onLeave'
    }
});

var animationEvents = new TimelineMax()
    .fromTo($('#show .elem1'), 0.5, {opacity: '1'}, {opacity: '0', ease:Power1.easeInOut}, 0)
    .fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)
    .fromTo($('#show .elem3'), 0.5, {opacity: '0'}, {opacity: '1', ease: Back.easeOut}, 2.4)
    .fromTo($('#show .elem4'), 1, {opacity: '0'}, {opacity: '1', ease:Power1.easeInOut}, 3);

new ScrollMagic.Scene({
    triggerElement: '#wrapper',
    duration: '400%',
})
.setPin('#wrapper')
.setTween(animationEvents)
.addTo(ctrl);

So basically what I did was created a ScrollMagic controller, made my timeline of animations, and setup my scene.

It works great, no problems what-so-ever. However, I am trying to wrap my head around a few of these values so that I can make a scrollTo function from a menu, that can scroll to each of the elements.

I have it close to working but what I cannot seem to figure out is the following; the duration of my scene is 400% that means that as I scroll the #wrapper is pinned for the equivalent of scrolling past the element (in relation to my trigger) 4 times the height of the wrapper.

That I understand, but what I do not understand is in each element of the TimelineMax you have this...

.fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)

You can break it all down, but the 1 represents some sort of duration, of what I am not sure. and the last variable, in this case 2 represents its offset of when to start.

This is my question, what do those values represent in comparison to the duration. Since in this case I have 4 actions the first one starting at 0 and the last one finishing at a number of 4 what would make sense to me is that essentially .elem1 starts at duration point 0% and finishes at duration point 50% and elem4 starts at duration point 300% and finishes at duration point 400% however that does not seem to be the case, or atleast maybe the duration of #wrapper is not how the duration element is calculated.

At the very least I need to figure out the representation between those offset numbers within the TimelineMax and the duration.

Any help would be greatly appreciated.

Upvotes: 0

Views: 1652

Answers (1)

Ivan Modric
Ivan Modric

Reputation: 619

new TimelineMax()
    .fromTo($('#show .elem2'), 1, {x: '0%'}, {x: '-100%', ease:Power1.easeInOut}, 2)
                               ^^ --> A
                                                                                  ^^ --> B

A is the time the animation needs to play from start to end. (in this case it needs one second to move from its original to its intended position).

B is the position of the animation within the Timeline. (especially interesting when you have several Tweens in the same Timeline that shouldn't play in direct succession.) Here it means that the animation (the fromTo(...) starts two seconds into the Timeline.

The above Timeline now has a duration of three seconds.

If we apply this logic to your Timeline animationEvents we see that it has a duration of four seconds.


Now for the ScrollMagic part:

ScrollMagic projects the duration of the Timeline or Tween onto its own duration (the duration of the ScrollMagic.Scene).

Upvotes: 2

Related Questions