Skip to content

Commit

Permalink
bugfix: fixed cascading pinning with absolute elements
Browse files Browse the repository at this point in the history 
Fixes janpaepke#291

Also resolves issue with pinning an element in multiple directions,
which was a long term bug (yay)
  • Loading branch information
@janpaepke
janpaepke committed Apr 29, 2015
1 parent e453bab commit 7aec4a6
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 17 deletions.
27 changes: 14 additions & 13 deletions dev/src/ScrollMagic/Scene/feature-pinning.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,14 @@ Scene
var updatePinState = function (forceUnpin) {
if (_pin && _controller) {
var
containerInfo = _controller.info();
containerInfo = _controller.info(),
pinTarget = _pinOptions.spacer.firstChild; // may be pin element or another spacer, if cascading pins

if (!forceUnpin && _state === SCENE_STATE_DURING) { // during scene or if duration is 0 and we are past the trigger
// pinned state
if (_util.css(_pin, "position") != "fixed") {
if (_util.css(pinTarget, "position") != "fixed") {
// change state before updating pin spacer (position changes due to fixed collapsing might occur.)
_util.css(_pin, {"position": "fixed"});
_util.css(pinTarget, {"position": "fixed"});
// update pin spacer
updatePinDimensions();
}
Expand All @@ -50,7 +51,7 @@ var updatePinState = function (forceUnpin) {
fixedPos[containerInfo.vertical ? "top" : "left"] += scrollDistance;

// set new values
_util.css(_pin, {
_util.css(_pinOptions.spacer.firstChild, {
top: fixedPos.top,
left: fixedPos.left
});
Expand All @@ -62,7 +63,7 @@ var updatePinState = function (forceUnpin) {
top: 0,
left: 0
},
change = _util.css(_pin, "position") != newCSS.position;
change = _util.css(pinTarget, "position") != newCSS.position;

if (!_pinOptions.pushFollowers) {
newCSS[containerInfo.vertical ? "top" : "left"] = _options.duration * _progress;
Expand All @@ -74,7 +75,7 @@ var updatePinState = function (forceUnpin) {
}
}
// set new values
_util.css(_pin, newCSS);
_util.css(pinTarget, newCSS);
if (change) {
// update pin spacer if state changed
updatePinDimensions();
Expand All @@ -95,7 +96,7 @@ var updatePinDimensions = function () {
before = (_state === SCENE_STATE_BEFORE),
during = (_state === SCENE_STATE_DURING),
vertical = _controller.info("vertical"),
spacerChild = _pinOptions.spacer.children[0], // usually the pined element but can also be another spacer (cascaded pins)
pinTarget = _pinOptions.spacer.firstChild, // usually the pined element but can also be another spacer (cascaded pins)
marginCollapse = _util.isMarginCollapseType(_util.css(_pinOptions.spacer, "display")),
css = {};

Expand All @@ -109,7 +110,7 @@ var updatePinDimensions = function () {
}
} else {
// minwidth is needed for cascaded pins.
css["min-width"] = _util.get.width(vertical ? _pin : spacerChild, true, true);
css["min-width"] = _util.get.width(vertical ? _pin : pinTarget, true, true);
css.width = during ? css["min-width"] : "auto";
}
if (_pinOptions.relSize.height) {
Expand All @@ -121,7 +122,7 @@ var updatePinDimensions = function () {
}
} else {
// margin is only included if it's a cascaded pin to resolve an IE9 bug
css["min-height"] = _util.get.height(vertical ? spacerChild : _pin, true , !marginCollapse); // needed for cascading pins
css["min-height"] = _util.get.height(vertical ? pinTarget : _pin, true , !marginCollapse); // needed for cascading pins
css.height = during ? css["min-height"] : "auto";
}

Expand Down Expand Up @@ -354,18 +355,18 @@ this.removePin = function (reset) {
updatePinState(true); // force unpin at position
}
if (reset || !_controller) { // if there's no controller no progress was made anyway...
var spacerChild = _pinOptions.spacer.children[0]; // usually the pin element, but may be another spacer...
if (spacerChild.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // copy margins to child spacer
var pinTarget = _pinOptions.spacer.firstChild; // usually the pin element, but may be another spacer (cascaded pins)...
if (pinTarget.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // copy margins to child spacer
var
style = _pinOptions.spacer.style,
values = ["margin", "marginLeft", "marginRight", "marginTop", "marginBottom"];
margins = {};
values.forEach(function (val) {
margins[val] = style[val] || "";
});
_util.css(spacerChild, margins);
_util.css(pinTarget, margins);
}
_pinOptions.spacer.parentNode.insertBefore(spacerChild, _pinOptions.spacer);
_pinOptions.spacer.parentNode.insertBefore(pinTarget, _pinOptions.spacer);
_pinOptions.spacer.parentNode.removeChild(_pinOptions.spacer);
if (!_pin.parentNode.hasAttribute(PIN_SPACER_ATTRIBUTE)) { // if it's the last pin for this element -> restore inline styles
// TODO: only correctly set for first pin (when cascading) - how to fix?
Expand Down
8 changes: 4 additions & 4 deletions examples/expert/multiple_scroll_directions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,7 @@
<h1 class="badge gsap">Multiple Scroll Directions</h1>
<h2>When scrolling one way just isn't enough.</h2>
<p>
If you want to react on more than one scroll direction just add more than one controller.<br>
Just bare in mind that in the current version pinning an element in more than one direction is buggy.
If you want to react on more than one scroll direction just add more than one controller.
</p>
<a href="#" class="viewsource">view source</a>
</div>
Expand All @@ -55,11 +54,12 @@ <h2>When scrolling one way just isn't enough.</h2>
var controller = new ScrollMagic.Controller();

// build tween
var tween = TweenMax.to("#animate", 0.5, {scale: 3, y: 400, ease: Linear.easeNone});
var tween = TweenMax.to("#animate", 0.5, {scale: 3, ease: Linear.easeNone});

// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#multiDirect", duration: 400, offset: 250})
.setTween(tween)
.setPin("#animate")
.addIndicators({name: "resize"}) // add indicators (requires plugin)
.addTo(controller);

Expand All @@ -84,4 +84,4 @@ <h2>When scrolling one way just isn't enough.</h2>
</div>
<script type="text/javascript" src="../../js/tracking.js"></script>
</body>
</html>
</html>

0 comments on commit 7aec4a6

Please sign in to comment.