Scrollmagic Show and Remove Pin on div entry

Question

I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my code

// Sticky Share Bar
    var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5, 
      { bottom:-50}, 
      { bottom:0 }

);

var share = new ScrollMagic.Scene({
      triggerElement: '.entry',
      offset:60,
    })
    .setTween(stickyShareAnimation)
    .setPin('.share-bar')
    .addIndicators()
    .addTo(controller)

This is the HTML

<section class="share-bar">
        <div id="share-container" class="container">
            <div class="row">
                <div class="col-md-12">This is the content</div>
            </div>
        </div>
    </section>
    <section class="blog-content">
        <div class="container">
            <div class="row">
                <article class="single-post">
                    <div class="entry">
                        <?php the_content();?>
                    </div>
                </article>
            </div>
        </div>
    </section>
    <section class="Test">
    Where I want sharebar to tweenout.
    </section>

I know I could fade out the sharebar with another Tweenmax animation targetting the "section Test" but figured there was probably a better way to do so with my initial javascript. Is there another way or would I need to create a seperate Tween for the sharebar to hide after content (div.entry) finishes.

Codepen http://codepen.io/anon/pen/aOWBQZ

can you post relevant CSS as well please? also your JS seems to be incomplete i.e. `controller` doesn't seem to be defined? And it would be really good if you can just simply create a jsFiddle or a Codepen demo with dummy content. Possible? — Tahir Ahmed, Jun 05 '15 at 20:25
The code I have is working just wanted to see if there was an option other then creating a new animation/scene. I've added a codepen so you get the general concept. I'd like the sharebar to fade in when I scroll into the div.entry and then fade.out when I move into the next section(test). — Phrosty30, Jun 06 '15 at 18:39

score 2 · Answer 1 · edited Jun 23 '16 at 10:24

If you want scrollbound animation (scene duration > 0) then yes, you should create one scene for animating the header in and one to animate it out again.

If you want to trigger an animation and animate the same property (i.e. opacity, when fading in and out) using ScrollMagic's setTween method, there will be problems related to property overwriting.

For details see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another

NOTE: The wiki was written for ScrollMagic 1.3, but the same principle applies.

The recommended solution is this (Updated for ScrollMagic 2.x): http://jsfiddle.net/xk22Lx50/

An easier solution however might be to define a CSS class and use setClassToggle to add or remove it for a certain time. Animation can be achieved using CSS animations. See: http://scrollmagic.io/examples/basic/class_toggles.html

And one more thing: If your pinned element is always pinned (as in your example) and just animates in or out, but is never part of the DOM flow, there is no reason to make it sticky (i.e. to use ScrollMagic's pin functionality).
Just set it to position: fixed in css and you're done.

You can still use ScrollMagic to animate it in and out, but have less (unnecessary) JS code.

Scrollmagic Show and Remove Pin on div entry

1 Answers1