Stacking pins with overlap - needing help #620

Open
Twisterking opened this Issue Nov 21, 2016 · 0 comments

Projects

None yet

1 participant

@Twisterking

So I have some scrollmagic scenes with svgs in it and using TweenMax.
What I am trying to achieve is the following:

Scene 1 with trigger1 starts a little bit down the page, so trigger1 has:

#trigger1 {
    position: absolute;
    top: 60vh;
    height: 0;
}

scene1 contains a glass sphere "falling down", so it is pinned and moved slightly downwards in a tween. As soon as scene 2 appears at the bottom of the screen (containing an svg, simulating the floor), scene1 should now overlap with scene2. The pinned glass sphere "hits the floor" in scene2 and from now own, both the svgs in scene1 as well as the ones in scene1 should be pinned (the glass sphere has hit the floor, it "explodes" and some more stuff happens).

tl;dr:
scene1 contains an svg representing a glass sphere, which should "drop down" (by being pinned) and hitting a floor in scene2, thus "exploding".

my scenes (scene 1 and 2 are basically almost the same):

var scene1 = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 1000, tweenChanges: true})
    .setPin("#home_top")
    .setTween(main_timeline1)
    .addIndicators()
    .addTo(controller);

I really hope someone can help, as I can't get it to properly overlap while keeping the glass sphere pinned and pinning the floor in scene2 at the right time.

Thanks in advance,
best P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment