Emulating fixed background parallax with Scroll magic and GS

[fagan]

Hi there,

 

 

I'm wondering if there is a solution to emulate a fixed background with GS ? 

 

I have created 2 versions of the same site. One uses background fixed with a swipe parallax effect here  http://fressko.webflow.io/ 

 

the other uses gs to tween the slides in and out of opacity as seen here  http://freshko.webflow.io/ 

 

 

all of this is done via scroll magic and it's ability to pin.

 

 

 

 

QUESTION - is there ANY way to recreate the swipe / scrolling fixed background effect from http://fressko.webflow.io/  so I can use it on http://freshko.webflow.io/ 

 

 

[Shaun Gorneau]

You can create that effect without any Javascript at all. It's just a matter of using a fixed background image attachment on a stack of divs.

 

See the Pen left by sgorneau (@sgorneau) on CodePen

 

Of course you can then use GSAP to handle the "pop-in" elements at particular scroll positions.

 

 

*** I just reread your question and can see I misunderstood what you were asking ... but now I really don't understand at all Are you asking if GSAP can be used to position the background image in such a way (on scroll) to make it "appear" fixed when in actuality it is translating -y at the same pace the div is moving out of the viewport?

[Rodrigo]

Hi,

 

I'm having a bit of trouble visualizing what exactly you're trying to achieve. The issue is that while the first site (fressko) uses full width JPG images with a solid background, so overlapping between those images is not that complex. On the other hand the second site (freshko) uses transparent PNG files and overlapping is kind of a mess because those file don't share the same base image so to speak.

 

Take a look at this site:

 

http://www.indianacarton.com/freshness-technology

 

Go from Grease Barrier, to Window Barrier and then to Air Movement. Those are three different images but they all share the same box as an image base and they have the same dimensions, so even though those are three different images overlapping can be made without any issues. Also in this site the overlapping is done through opacity and not sliding the images.

 

Basically give all your images or containers an absolute position and stack them on top of each other, finally animate them as the user scrolls.

 

Unfortunately I can't give you any support regarding scrollMagic because I've never used it. Perhaps another user could help you in that regard, but keep in mind that, because of time issues, we don't support 3rd party plugins that work on top of GSAP as we need to stay focused on GSAP related questions. But if you need any assistance at all with a GSAP related issues please don't hesitate to come back and ask.

 

Happy Tweening!!

[fagan]

Thank you very much for the replies guys.

 

My client saw the first site (fressko) and they became attacked to the swipe parallax effect. But the problem is, that it's supposed to be a responsive website.. well those parallax effects don't really work on mobile at all. Not to mention the flasks need to flow under one another for mobile. It's really confusing me which way to take this. 

 

So, I created Freshko (the second example) without the full page fixed background images. I was hoping I could re-create the swipe effect of the first example on the second with GS. But maybe that's not possible. 

 

 

Thank you for your example though, I am reading through that now. Do you know how that would go if run on a mobile phone?

 

In fact - does ANYONE have a single example of fixed background working really well on mobile? I've never seen one. The scroll events always get updated after the user stops scrolling on a mobile. 

[Rodrigo]

Hi,

 

The Indiana Carton project was one I had to jump into as an "emergency call" they needed some animations and tried with GSAP but couldn't get anything concrete. I was only in charge of the animations of that and the food visibility pages and with a CSS already in place, it was a nightmare at some point. Also because of time and budget issues the animations were added only to large screens. Hardware limitations on small devices were considered as well. Actually is hard to find a fully animated site for small devices, the only one I can remember now is Mekanism, perhaps other users have more:

 

https://mekanism.com/

 

As for the scroll events, yep those are hard to manage and control in every scenario. One specifically difficult is the track pad of windows based laptops, while the track pad of Mac books works really well, you can see the difference in this site (if you can test it on a Win laptop):

 

http://journey.lifeofpimovie.com/

 

That's why Mekanism site works on single events and doesn't support any other while an animation is happening, like this sample by Chrysto:

 

See the Pen kDvmC by bassta (@bassta) on CodePen

[Narendra Verma]

@Rodrigo It's help me a lot but swipe not working on mobile. May I know how can I solved this issue?

[OSUblake]

1 hour ago, hybreeder said:

It's help me a lot but swipe not working on mobile. May I know how can I solved this issue?

 

Rodrigo didn't make that demo, so you're going to have to figure that out on your own. Start by reading this.

https://codepen.io/bassta/details/kDvmC#comment-id-34877