Scrollmagic: Start point at the bottom of the triggerElement

[katerlouis]

I try to be quick, so- notes:

background-attachement: fixed is not on mobile? Dang! Have to simulate it..
Fixed div containing all the background-esc-images (nice, now I can use picture-tag).
To achieve the same effect as ba: f, I need to animate the clipPath. GSAP for the win; Scene starts onEnter, duration 100% of the images corresponding content (which should have the ba: f -image)– duration in percentage? Get's updated from ScrollMagic automatically. Nice! Perfect!

So far for the "enter" effect of the ba: f-thingy situation.
We are still scrolling down to the bottom of the page– Exit-tween should start when the bottom of the scene-container "gets further away from the viewport-bottom" – But how to put the start of the ScrollMagic.Scene() to the end of the scene-container without using offset?

offset is great.. but unfortunately doesn't accept a function as parameter like duration (I guess cuz of performance, right?)

Don't ask me why, but I can't handle updating the offset myself on resize.
I love that ScrollMagic handles it's refreshments on it's own.

–––––––––––––––––––––––––––––––––––––––––––––––––

So, I hope there is a way to put the start point of a Scene at the bottom of the element while keeping the triggerHook: onEnter (where now the wording wouldn't make sense anymore)

If there is no "ScrollMagic-Autoupdating-Startpoint-at-the-bottom"-way, I'd like to encourage you to add one.

Solution-Suggestions:
1) triggerHook: onBottomEnter & onBottomLeave – But I fear this is not how you intended the triggerHook to work.
2) offset accepts a function as parameter.

–––––––––––––––––––––––––––––––––––––––––––––––––

I'd vote for 2)
– it is still optional (if you are concerned about performance)
– the internal logic already exists for duration (framework-layman speaking here)
– Would be really awesome

[katerlouis]

–Gentle push–

I'd like to hear your opinion on this;

[katerlouis]

–Gentler push–

[katerlouis]

–pushing harder?–

[gpetrioli]

Just a thought after requiring the same functionality (starting when the bottom enters the viewport) and implementing it manually with setting the offset manually on resize etc.
I came to the realization that (for my use case) you can use the triggerElement option and set it at the nextElementSibling of the scene you want. So the moment the next node enters the screen is the same as the current one bottom reaches the bottom of the screen.

This is limited in this specific scenario, though, and support for actually being able to do it on the scene you want without having to think for side-effects would be greatly appreciated.

[katerlouis]

Thanks for the tip! Nice workaround–
Small caveat though: As soon as margins are involved you'd have to offset by that margin negatively again to hit perfectly.

[krnlde]

Close this issue?

[katerlouis]

I'd say no, keep it open.
the plugin-owner hasn't spoken yet and I still find it very reasonable to add function as an offset value.

[rolbr]

Since we're in Javascript-Land already when dealing with ScrollMagic, I found it to be most reliable to inject a dummy element after the element I'd wish to use 'onBottomEnter' on and then use that dummy as the trigger element.

var $triggerElement = $('<span class="trigger" style="visibility:hidden;"></span>');
$myElement.after( $triggerElement );

new ScrollMagic.Scene({
    triggerElement: $triggerElement.get(0),
    triggerHook: 1
})
.on('enter', function ( event ) {
    // do stuff...
})
.addTo(controller);

[katerlouis]

I have used a similar workaround as well, but find it quite hacky and would wish for a more stable and robust solution from the ScrollMagic creator.

[jorgemonte]

That would definitely be a good feature. I'm dealing with a layout where the trigger for the animation should be the bottom of a div, not its top. Since the deadline is very short, and I am not good enough on JS, just put an empty/ absolute positioned element at the end of my div to be the trigger item. But, probably this solution won't be always possible.

Let's hope that a simple parameter can be included :)

[katerlouis]

I still encounter situations where I'd need this feature and hope @janpaepke enlightens us with his opinion on this matter :)

[richgcook]

+1