Pan Image with Parallax Text Block?

[milkandpixels]

https://www.hotel-mirabeau.ch/en

 

I'm looking to do something like this (the text block with paired image). In this case, they have the image swapping between, but that's not necessary. I also see they are using the canvas element, which may not be needed.

 

It seems like for the text block, I'll need to dive the title into letters - and then stagger them in. How do you decide which ease to use?

 

As for the image, I really don't know where to begin! I can never figure out a way to elegantly do these scroll triggered animations. It's always clanky and not performance driven.

 

Any help or guidance would be greatly appreciated!

Thank you!

[ZachSaucier]

Hello milkandpixels and welcome to the forums,

 

I actually came across an open source library that does that image effect if you're interested in doing it.

 

For the text effect you should look into GSAP's ScambleTextPlugin and related demos:

 

 

40 minutes ago, milkandpixels said:

How do you decide which ease to use?

Trial and error  You could also play around with our ease visualizer: https://greensock.com/docs/Easing

 

40 minutes ago, milkandpixels said:

I can never figure out a way to elegantly do these scroll triggered animations. It's always clanky and not performance driven.

I'd recommend using a timeline and an intersection observer. You can read more about that approach in this forum post (or some others if you search for them):

Happy tweening! If you run into particular errors, feel free to post again including a minimal demo of your issue in something like a CodePen.

[milkandpixels]

@ZachSaucier Thank you so much! This is all very helpful and the open source library you found is amazing.

 

For the slight shift in images / panning - is that something I would do with ScrollMagic and GSAP combined? Have you seen any examples of something similar? It looks like they are using translateY and shifting the position of the image container based on scroll position. 

[ZachSaucier]

Happy to help!

 

Looking around the GSAP forums can usually find you something very related. For example you could use the same type of approach as the demo in this post (without ScrollMagic - ScrollMagic isn't related to GreenSock and often times isn't necessary).