Move an element according to scroll distance

[tschoartschi]

Hello!

I'm learning ScrollMagic and also GSAP, so my question may be a n00b question. What I'm trying to do is, to move an element according to scroll distance. When I scroll down 50% of the scene then the element should be moved 50% into the direction of its final destination. I hope it is clear what I mean. I looked at several examples and found the third animation of the example "advanced tweening" [1] The element grows in size according to the scroll position. I want the same but with translateX. It seems to work but I have problems with the vendor prefixes. The CSS property translate is update as I want but the -webkit-translate always overwrites the updated translate property and therefore the element always jumps to it's final position without moving. If I use margin instead it works, but internet told me that moving element with margin is bad for performance...

My code snippets look as follow:

var tween = TweenMax.to(".wannaknow", 1, {className: "+=fish"});
  new ScrollScene({
    triggerElement: '#scene-2-start',
    triggerHook: 0,
    offset: sceneHeight,
    duration: 200
  }).setTween(tween)
    .addTo(controller)
    .addIndicators({suffix: "Move"});

.fish {
  transform: translateY(300px);
}

Is this the correct way to achieve what I want, or is there a better solution.

Thanks Tschoartschi [1] http://janpaepke.github.io/ScrollMagic/examples/advanced/advanced_tweening.html

[janpaepke]

Hi Tschoartschi, What you are describing is what we call "scroll bound animation" as opposed to "scroll triggered animation". That is totally possible and happens every time you add a duration to a ScrollMagic scene.

The internet told you right: transform is a lot better for performance, because it requires less repainting. The example you are referring to though isn't actually the one you're looking for. That example is about how to tween class names.

If you just want to animate a css value, you should look at the second example for simple tweening. This should leave you with this code:

var tween = TweenMax.to(".wannaknow", 1, {y: 300});
  new ScrollScene({
    triggerElement: '#scene-2-start',
    triggerHook: 0,
    offset: sceneHeight,
    duration: 200
  }).setTween(tween)
    .addTo(controller)
    .addIndicators({suffix: "Move"});

Now if you prefer for some reason to do it the className - way, you just need to add the necessary vendor prefixes. As you can see, when you paste your css into Pleeease, you'll also have to define it for webkit. So you'd end up with:

.fish {
  -webkit-transform: translateY(300px);
          transform: translateY(300px);
}

Both approaches should work.

hope this clears things up.

[janpaepke]

Did this solve your issue?

[tschoartschi]

I think it solves my issue. I didn't have time to try it out. But thanks a lot for all your help and efforts :+1:

[janpaepke]

glad I could help

[romio95]

How to make such vertical scrolling on the example of this site? https://www.malai.co/