CODEWITHSUNDEEP
javascriptgsapscrollmagic
Phrosty30
Phrosty30

Reputation: 127

Scrollmagic Show and Remove Pin on div entry

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

Upvotes: 0

Views: 6140

Answers (1)

Jan Paepke
Jan Paepke

Reputation: 2027

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.

Upvotes: 2

Related Questions