Pin a parallax slider for a certain amount on scroll

[mado1 1 Likes (Newbie)]

Hello,

 

I am pretty new to GSAP and trying to achieve an effect that might not be possible.

 

I am trying to get a parallax slider to pin when you start scrolling so the parallax layers will show.

I would like it so that the images show up as in the .gif and start to display when you scroll. After that you continue to the normal content.

 

I have searched all over the internet but I cannot find a good example or a piece of code that achieves this.

 

ScrollMagic is supposed to be able to handle this but every time I try to apply it the parallax slider gets messed up.

 

Probably I am approaching this in the wrong way and if someone could point me into the right direction that would be very appreciated.

 

The Codepen url directs you to the parallax slider that I have been using as an example.

 

Greetings,

Mark   

See the Pen MyoBaY by zabielski (@zabielski) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Unfortunately we really have to keep our support focused on the GSAP API. Currently there isn't anything in the API related to scrolling.

 

ScrollMagic is really your best bet (unless you want to write your own custom code). From what you are describing I'm confident ScrollMagic could handle that with ease so I'd suggest posting a question on their github isssues.

 

Also, it might make sense to go through a ScrollMagic course so that you can understand it first before trying to make it do something very specific.

Petr Tichy has a free course: https://ihatetomatoes.net/get-scrollmagic-101/?ref=5 and premium one. 

 

The demo you posted looks almost identical to the effect in your gif, so I'm not exactly sure what you need that is different.

 

If you want to use GSAP for the animation, I'd suggest building a demo of your scene with the animation that you want and then try to control it with scrolling.

OSUBlake explains how to do that without ScrollMagic here: https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/?do=findComment&comment=84897

 

 

[mikel 1,823 Likes (Superhero)]

Hi @mado1,

 

Here your welcome gift hoping I understand your intention.

 

A rough concept running an animation by scrolling ...

 

See the Pen ZZGjLV by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[mado1 1 Likes (Newbie)]

Hey @mikel,

 

Thank you for your example. It does come pretty close as I want it to be. Maybe I'll fiddle around with it some more and see what I can do.

 

In the meanwhile I'll take @Carl's advice and see if I can ask the people on github of ScrollMagic if they can help me.

 

Greetings,

Mark

[PointC 8,599 Likes (Superhero)]

These are answers from other threads, but maybe they'll give you some ideas.

 

Here's a parallax on scroll demo.

See the Pen zaBYoW by PointC (@PointC) on CodePen

And here's a basic pinning demo.

See the Pen WRLEwp by PointC (@PointC) on CodePen

Happy tweening.

[mado1 1 Likes (Newbie)]

@PointC I have been looking at those. And every time I try to incorporate a pin into a parallax slider it get's all messed up.

[mikel 1,823 Likes (Superhero)]

Hi @mado1,

 

Another example ...

 

See the Pen JMvyPg by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[mado1 1 Likes (Newbie)]

Hey @mikel,

 

That comes REALLY close to what I am trying to achieve.

 

The only problem I can see is that it depends on the minimal height tag in the body/html element. When you remove that tag you'll be unable to scroll and therefore the effect doesn't work anymore.

I guess this could be solved with some of the coding in ScrollMagic; for instance a 'pin' element.

 

In the meanwhile I've been doing/watching a lot of tutorials for GSAP and SrollMagic and will show some of my results soon and hopefully come to a conclusion.

 

Greetings,

Mark

[mado1 1 Likes (Newbie)]

Alright so here is an example of what I am trying to achieve. It is nowhere near perfection but you get the idea.

See the Pen LvGdNa by monsmado (@monsmado) on CodePen

 

I have incorporated everything I've learned these couple of days and came up with this. @mikel was really close and as I stated in my previous post his example makes the effect work because of the minimal height of 250%. I now know that even with ScrollMagic it is basically the same because you adjust the duration of the pinned scene. The example above still has many issues to be solved.

 

I guess what I want is more like this as per @mikel's earlier example. This would mean I've to learn how to animate in canvas I guess?

See the Pen ZZGjLV by mikeK (@mikeK) on CodePen

 

So I guess until I get more info I would like some more info on how to start with an animation as in the example "Run animation by scrolling - 04"

Because that is exactly what I am looking for but need to figure out if there are some nice tutorials for that or if someone could somehow show me how to that over here.

 

Greetings,

Mark

[mikel 1,823 Likes (Superhero)]

Hi @mado1,

 

In your desired 'tracking shot' (your gif) is not a scale effect.
The layers shift in the y-axis.

 

Here a slightly different version.

 

See the Pen rbOgey by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[mado1 1 Likes (Newbie)]

Hey @mikel

 

I have updated my my codepen because indeed you were right about the layers shifting through the y-axis. Looks a bit better now.

Still have to find a solution to as what you did in your new example so that there is no alpha/fade effect towards the next content. 

 

See the Pen LvGdNa by monsmado (@monsmado) on CodePen

 

Greetings,

Mark

 

edit --

 

I came across this code in this topic: 

 

This might help doing the trick that I am looking for? I am not sure as there is no demonstration of what this exactly does.

 

function setupAnimations() {

        var progress = $('.fill-bar'),
                show = new TimelineMax()
                .set(progress, {scaleY: 0, transformOrigin: "center top", ease: Power0.easeNone})
                .to(progress, 1, { scaleY: 1, transformOrigin: "center top", ease: Power0.easeNone});

        var timeline = new ScrollMagic.Scene({
                    triggerElement: "#timeline",
                    duration: $(window).height() * $('.period').length,
                    triggerHook: 0
                })
                .setPin("#timeline", {pushFollowers: false})
                .setTween(show)
                .addTo(controller);

        thing.each(function(index, elem) {

            new ScrollMagic.Scene({
                triggerElement: elem,
                triggerHook: "onLeave",
                offset: $(window).height() * -1
            })
            .addTo(controller)
            .addIndicators({name: "period marker"});
        });

}
setupAnimations();

 

[mikel 1,823 Likes (Superhero)]

Hi @mado1,

 

Here a scrollMagic version

 

See the Pen ZZWMPg by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel