Jump to content
Search Community

Create pinned parallax with fading background images

joshwhite test
Moderator Tag

Recommended Posts

First of all, hello and thanks for such an awesome tool and community of folks engaged it in!

I have just recently discovered GreenSock and hope to use it to create a similar effect like used here:

https://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/index.html

 

The only major difference is that I will only need to do this for one section of a website.

 

The idea is that when a user scrolls down to a specific section, the section will be pinned and the parallax effect will take place.

Within the parallax itself, there will be 4 or 5 sections that come into view as the user continues to scroll each part of the parallax will have

a background images that fades from one to the other -- like the example I pasted above.

 

I've managed to get GreenSock with ScrollTrigger and Tailwind2 setup as a Codepen. 

I am not a javascript expert at all. I found a similar Codepen and started there and now I am here, haha.

 

Like in the NYT link, I'd love to get the section to pause in the middle of the page while the parallax happens but would rather have the parallax disappear inside the image area vs. fading out when outside of it.

 

I've looked and looked for other similar examples but can't locate anything. If anyone has anything similar I could work from that would be great!

 

See the Pen YzGexex by josh-white-the-selector (@josh-white-the-selector) on CodePen

Link to comment
Share on other sites

  • joshwhite changed the title to Create pinned parallax with fading background images

Hey Josh and welcome to the GreenSock forums.

 

What's your question/issue? Sorry but I just see an image being pinned in your demo and no question in your post... There are a few examples of parallax effects listed in the ScrollTrigger demos page which would be good references. Basically you should create a timeline that does the animation that you want it to do then once you're done with that you attach a ScrollTrigger to it.

Link to comment
Share on other sites

Hi Zach, thanks for the response!

 

You don't see a large paragraph above the Codepen explaining what I am attempting to achieve?
There's a New York Times post I included as well that demonstrates a similar example.

 

If you can't see my paragraph text then something must be wrong with the post?

 

 

Link to comment
Share on other sites

Hey @joshwhite

 

I don't think you even need that parallax-like setup (with data-duration and so) as a base for what you want to achieve.

In the end with regard to the example you linked to, it all comes down to pinning one thing (the images), letting another thing scroll freely (the text), and the timing of when to change the image. For something like this, I suggest you read more about how durations work on ScrollTriggers with scrub applied here in the docs

 

Sidenote:

The initial .set() I am doing is there to give the images the necessary z-index - from the hightest z-index on the first-image to the lowest on the last.

The empty tween on the body I am using in the timeline of my example is just there to make sure I have an exact 'timeframe' for the duration of the scroll, so it's easier to determine the relative 'timing' of the single tweens - which can get quite tricky sometimes.

 

So this is one way to achieve that sort of effect:

 

See the Pen 612368a79a200f9193a261e2903b2e8c by akapowl (@akapowl) on CodePen

 

 

After quite a couple of minutes of tinkering with your demo, I decided to just create the effect from scratch.

 

I ( and probably most other people around here ) do not use tailwind css, so I do not know the ins and outs of that.

When it comes to scroll-based effects like these, CSS and how you set up things in the first place, is key though.

But I surely didn't want to dig deeper and find out what is set up where in tailwind neccessary for your setup.

 

Hope my example helps you getting where you want, though.

 

Cheers and a happy new year.

Paul

  • Like 4
Link to comment
Share on other sites

Hi @akapowl

 

Thank you for such a detailed response. I took a quick look and that looks pretty close to what I'd like to achieve. 

This will help me get to where I want for sure and I appreciate your write up. Hopefully someone else will come across your pen and find it useful as well.

 

I recommend checking out Tailwind. I just started to learn it myself recently and it's really easy to use and does a lot of great things.

 

Happy new year to you as well.

 

Kindly-

Josh

  • Like 1
Link to comment
Share on other sites

38 minutes ago, joshwhite said:

I recommend checking out Tailwind.

 

Yeah, by no means I wanted to denounce the use of tailwind.

 

From what I've seen, I am pretty sure, it easily gives you a lot of opportunities to do things, that you'd have to 'code' yourself otherwise.

But as mentioned, it is sort of neccessary to have a certain degree of control over your setup, and I just didn't feel that, when using tailwind.

 

In the end it is 'just' a tool - and with tools, the thing is, that people who do not know it, they also won't know what it actually does - kind of like jquery in js.   ...or even when using GSAP and asking questions about that  in a general JS forum - You get what I mean?

 

So in scenarios like these, it probably almost always would be best to set up things in plain CSS and HTML before thinking about adding some JS functionaility. You could always try and integrate whatever CSS framework you want to use afterwards.

 

I am glad though, my example gave you a sort of direction to go with.

 

Happy tweening,

Paul

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