Jump to content
Search Community

Pinned layers in both directions

Hugo Priet test
Moderator Tag

Recommended Posts

Hi fantastic people of Greensock! I'm a big fan, and a shockingly green member.

I'm wrapping my head around ScrollTrigger, and I'm trying to achieve an effect like the one here: https://www.easytigerfilms.fr/en/actualites

My codepen demo only deals with one image for now. I've pinned the images so the basic overlay effect works when scrolling down, but when I scroll up (logically), the translation occurs backwards.

I'm stuck there: I don't know if I should use disable()/enable(), create two triggers, toggle classes..

I would like the active image to stay fixed in the frame while the following image translates on top, no matter if it comes from above or below.

 

If you have any idea of how I could get there and what I'm missing, that would be highly appreciated!

 

Kindly,

Hugo.

See the Pen abNMeYp by smoothdev35 (@smoothdev35) on CodePen

Link to comment
Share on other sites

Hey Hugo and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

I wouldn't use scrubbing at all in this case. I'd set it up to have one ScrollTrigger for each of your sections on the right. In the onEnter and onEnterBack callbacks you play an animation to show the image for that section. Simple :) 

See the Pen eYZwvNP?editors=0010 by GreenSock (@GreenSock) on CodePen

The only thing left to do is fix the CSS/pinning. I recommend having all of the images in a container, pinning the container for the proper duration of the scroll section to its right, and absolutely positioning the images so that they are layered. You probably also want to change the zIndex of the image that's currently being animated so it's on top. I'll leave that as an exercise for you but feel free to ask if you run into anything you can't figure out.

  • Like 2
Link to comment
Share on other sites

Ah, I see from your Twitter post that you're trying to recreate this website. I'd set that up a good bit differently than the demo above.

 

I'd create one big timeline that does all of the image transitions (i.e. clipping) one after another. Then I'd hook that timeline up to a single ScrollTrigger that goes for the duration of the sections. In their case they just fixed the position of the image container but if you need "regular" content above or below you could just pin it instead.

  • Like 3
Link to comment
Share on other sites

19 hours ago, ZachSaucier said:

Ah, I see from your Twitter post that you're trying to recreate this website. I'd set that up a good bit differently than the demo above.

 

I'd create one big timeline that does all of the image transitions (i.e. clipping) one after another. Then I'd hook that timeline up to a single ScrollTrigger that goes for the duration of the sections. In their case they just fixed the position of the image container but if you need "regular" content above or below you could just pin it instead.

 

Hi! This is obviously a little more complex than what I can do so far, so could you enlighten me just a little bit? 

What exactly do you mean by 'clipping'?

Are you referring to the sequencing of transitions in the timeline, or to the the image transitions themselves?

As for hooking the tl up to a single ScrollTrigger, I'm a bit confused about how to use a single scrolltrigger for all the sections, and how to pass the duration of the sections as a parameter for my tl.

I'm trying to wrap my head around the whole thing because I want to achieve it, thank you very much for your help!

Link to comment
Share on other sites

3 hours ago, Hugo Priet said:

What exactly do you mean by 'clipping'?

image.png

See how the images aren't being scaled or (visually) translated? Instead the images are "cut off" or clipped. That's what clipping is. 

 

You can clip images in multiple ways. One is using CSS clip-paths but they don't have great support and aren't the most performant to animate. You can also use <canvas> which is what the site you linked to is using. You can also use DOM elements where you have a container with overflow: hidden and use translations to make it clip. 

 

3 hours ago, Hugo Priet said:

I'm a bit confused about how to use a single scrolltrigger for all the sections

Why is that? If you have tweens for a given section, just sequence them in a timeline and apply that timeline to a ScrollTrigger.

 

3 hours ago, Hugo Priet said:

how to pass the duration of the sections as a parameter for my tl.

When you are using scrub (like what the site you linked to uses) duration itself doesn't have much meaning. Instead it's more so about the proportion of the durations in respect to the entire duration of the timeline. See this part of the docs for more details.

  • Like 1
Link to comment
Share on other sites

 

Hey @Hugo Priet

 

This thread is more or less a journey to roughly the effect, that you intend (my last two answers in there might be of interest for you)

 

 

 

 

I later on worked up a polished up version of that.

And now after flying over this thread and seeing your initial example on that website, I added an inverted version of the image ScrollTrigger(s) to it.

 

Animation-wise, I am basically just tweening on the height of the elements that have background-images set via CSS.

 

Maybe this can serve as inspiration to you (if you can look past the smooth-scrollbar integration and all the commented out stuff - which is a lot).

 

 

See the Pen 283e6cc8dfedb8499b89916466ff62ac by akapowl (@akapowl) on CodePen

 

 

Hope this helps a bit.

 

Cheers

Paul

 

  • Like 5
Link to comment
Share on other sites

Hi @ZachSaucier!

 

As simple as the underlying logic might seem in the end, it took me some time to understand how to animate clipping with the hidden overflow containers and translations! 

Here's the finished demo pen (second image and polishing coming later in prod), let me know if there are apparent issues in my implementation:

 

Thanks again for helping me get there!

 

Cheers,

Hugo.

  • Like 3
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...