ScrollMagic offset on different window height

Question

I am using ScrollMagic to get some animations on scroll. The problem is that I need to use offset so that the animation triggers on some point of scroll but it totally depends on the window height.

So in the example i have provided

https://jsfiddle.net/5tvrnfkx/12/

you can see the box coming out on scroll. https://tppr.me/RpkVa

Notice the window height https://tppr.me/hoyhs try resizing the height or preview panel and run.

So in 426px window height, it works perfectly. starts the page with no box and animates on scroll.

Try increasing the height and check https://tppr.me/sYJ5a, the box appears at the start. similarly, if you reduce the height, the box appears only after few scroll.

So I was wondering if there's any way to make the offset value dynamic so in any window height, the animation starts at the exact same point of scroll of page.

score 1 · Accepted Answer · answered Jul 29 '19 at 23:39

1

Yes, instead of using offset, you can use triggerHook and set it to 0 (or very close to it).

Like this:

jQuery(function() {

  var controller = new ScrollMagic.Controller();

    var tween = TweenMax.to("#boxAnim", 1, {className: "+=animate"});
    var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300, triggerHook: 0})
            .setTween(tween)
            .addTo(controller);


  var height = $(window).outerHeight();

  $('.height').append(height);
});

answered Jul 29 '19 at 23:39

Azametzin

5,223
12
28
46

that worked, thank you. could you briefly explain how this is working? what the difference using `offset` and `triggerhook` ? – Lucian Jul 30 '19 at 00:11
1

Sure. Briefly, `offset` is based on pixels and `triggerHook` is relative - number 0 to 1. They're use `triggerElement` as reference. In general you may prefer to use `triggerHook` instead of `offset`. I found this if you want to know more: https://ihatetomatoes.net/visual-guide-scrollmagic (Probably explains a lot better than me). – Azametzin Jul 30 '19 at 00:27
do you know if there's any way to disable it for wider screen? I tried something like this `$(window).on('resize', function() { var winWidth = $(window).width(); if (winWidth >= 1680) { scene.destroy(); } else { scene.refresh(); } }).resize();` below the code but it won't work. – Lucian Jul 30 '19 at 16:04
1

Yes, but we need some more changes. Take a look: https://jsfiddle.net/02ng716z/. Quick explanation: var `scene` now is declared globally. Created `function initScrollMagic()`. Then when resize, if `winWidth>= 1680` && `scene` is not undefined, it'll destroy `scene` (`true` to reset `tween`) and set scene to `undefined`. The opposite, if `winWidth < 1680` and `scene` is undefined, it will call `initScrollMagic` to create it again. – Azametzin Jul 30 '19 at 17:46
that helped but now i figured out exactly what my problem was. It's when we have more that 1 element to animate. like in real time, i have lot of animation to be handled and this is how i have used it https://jsfiddle.net/z4srp2bq/3/ so what happens is, it works great on page refresh but on resize the page jumps. should i be using `$(each)` statement? – Lucian Jul 30 '19 at 21:05
with some workaround, i used unique variable for all scene and tween like this https://jsfiddle.net/z4srp2bq/5/ and it worked. would this be a good call though? – Lucian Jul 30 '19 at 21:18
That's cool. I believe it can be simplified because it has details that repeat. At the moment I don't know exactly how. – Azametzin Jul 31 '19 at 01:30

ScrollMagic offset on different window height

1 Answers1