2

I'm trying to implement a parallax scrolling following the scrollmagic examples.

The greensock documentation says that something like TimelineMax.to defines the final position of the element within that scene (as opposed to .from which defines the initial).

However I find that .to actually affects the initial position immediately, especially if the element is right at the top of the viewport as the page is loaded.

For example this:

.to($('.intro-header .bcg'), 3, {y: "80%",rotation:0.01, ease:Linear.easeNone});

will place my element .intro-header .bcg already at a 40% position as the page is loaded, and no scrolling as taken place!

I've been scratching my brain for days but I cannot get around as to why this happens.

Only if I set the duration of the scene to something like 1200% then the elements show up in the correct initial positions as the page loads, but then the scene happens very slowly.

nonhocapito
  • 466
  • 5
  • 18

1 Answers1

0

I find out that the problem was not in the scene duration, but in the triggerHook parameter.

There is not a lot of information on this Scene parameter on Scroll Magic, but my triggerHook was set as onEnter...

I was under the false impression that the value could only be onEnter onCenter onLeave, or 0 0.5 and 1, but logically it can be any number in between.

Setting it to 0.1 did the trick. The scene does not start until the user begins to scroll, so all the elements show up in the right positions on page load.

This isn't very clear in the scrollmagic examples, so I hope my answer will help others.

nonhocapito
  • 466
  • 5
  • 18