Jump to content
Search Community

Stick elements to other elements with Scrollmagic and setPin?!

nicmare test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I try to achieve something like this: http://www.headcase.ch/

When you scroll the page, you will notice how the menu bar will stick to the window top.

 

Now i need this in my recent project too but with an offset: http://tvim.de/yachtclub  (pw: user)

 

the blue bar should stick to the fixed header as soon as it "touches" the bottom edge like this:

 

yachtclub.jpg

 

 

as you see the trigger is always in the middle of the viewport.

This is my code:

var controller = new ScrollMagic.Controller();
        var introTl = new TimelineLite();

        introTl
            .to(logoimg, 1, {width: 100, autoRound:false})
            .to(sticked, 1, {backgroundColor: "white"}, '-=1')
            .to($("#nav > ul > li > a").not("#nav > ul > li.current_page_item > a"), 1, {color: "black"}, '-=1')
        ;

        var introScene = new ScrollMagic.Scene({duration: 200}).setTween(introTl).addTo(controller);

        var scene2 = new ScrollMagic.Scene({
            triggerElement: $(window)
        })
        .setPin("#actionbar")
        .addTo(controller);

any ideas? THANKS!

 

Link to comment
Share on other sites

Hello nicmare, and welcome to the GreenSock Forum!

 

This looks more of a ScrollMagic setPin question than a GSAP related question. Have you tried posting your question in the ScrollMagic Support Issues page. Even though ScrollMagic is made with GSAP, it is not made by GreenSock. Scroll Magic is made by Jan Paepke. He said he welcomes any issues you might have with his plugin.

 

https://github.com/janpaepke/ScrollMagic/issues

 

Others in the forum might be able to assist you but i would highly recommend also posting your issue at the above link.

 

Happy Tweening :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...