Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mado1

Pin a parallax slider for a certain amount on scroll

Recommended Posts

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

Link to post
Share on other sites

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

 

 

  • Like 3
Link to post
Share on other sites

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

 

 

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

@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.

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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();

 

Link to post
Share on other sites

Hi, i'm having this problem with how the elements shows on my scene, this is my script:

image.png.99546159a010a8b2c0791693469dc4fa.png

 

and this my html:

image.png.e58dcd48d7a72ab59139a53132826085.png

 

I have this imgs whichs will appear when scroll, as the codepen example one of you update on this forum. But instead of being attached to the scroll event, my images appear one after other synchronizing with time but waiting the scroll (as I want).

I thought it could be related with the attribute of time: '1,' I send to the function fromTo(); but if I remove it the last image cover the others. So I don't know how to solve it. (I'm  pretty new on this)

 

Thanks if someone could help me. Now my code works but not the expected way.

 

Link to post
Share on other sites

Hey @sgarbidonna,

Holy moly, you're replying to an old topic haha. No problem though! I've figured a lot myself out since then and am glad a codepen example helped you out.

The thing is, it would be better if you upload/make a codepen as well so we can have a look at it. Screenshots with code usually aren't good to help you because we are not going to try and re-create your issue for you. So my advice is to go to codepen (make an account) and share it with us ;)

  • Like 2
Link to post
Share on other sites

Hey @sgarbidonna and welcome to the GreenSock forums. We highly recommend that you use our official scroll plugin called ScrollTrigger instead of third party ones like ScrollMagic. It's more powerful and we think simpler to use :) 

 

 

  • Like 3
Link to post
Share on other sites

And of course as  @ZachSaucier says, GreenSock now has it's own library for scroll triggers.

If you'd like you can take a look at a codepen I made recently with ScrollTrigger 

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

  • Like 2
Link to post
Share on other sites

Thanks @mado1 I will try it!

And thanks @ZachSaucier ok, I will learn it and refactor my code. Maybe I'll be back here in a minutes to ask for help again jaja. Hope not!

 

 

  • Like 1
Link to post
Share on other sites

@sgarbidonna no problem jajaja (eres Mexicano?) 
I think ScrollTrigger will help you a lot and is much easier to understand!
You can also have a look at this page where they show a lot of examples for ScrollTrigger: https://codepen.io/collection/AEbkkJ

  • Like 1
Link to post
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.

×