Jump to content
GreenSock

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

Triggering animation on scroll

Recommended Posts

Hi!

 

I'm struggling with horizontal scroll implementation. The main goal is to change default vertical scrolling to horizontal and based on actual position, background opacity which is fixed and on center of my screen. In image below I tried to visualize it :)

 

801002607_Screenshotfrom2020-05-0223-16-32.thumb.png.bffd6e985fe7ef270fc380630abb9ac5.png

 

Based on codepen, I've created my implementation with gsap + scroll magic. 

Unfortunately I couldn't achieve smooth scrolling with it, so result isn't satisfied me. Here is a example of how smooth scrolling could looks like. 

 

See the Pen MWaOaVv by Faelivrinx (@Faelivrinx) on CodePen

 

I was trying use that code with scroll magic and implementation of horizontal scroll below, but there was a lot of weird artifacts via scrolling. I'd like to give up with scroll magic and use only gsap, but I could't figure out how to properly implement it. I need to track scrolling, where background image (fixed position) have to change opacity depends on visible section. There is any option using gsap to achive it? 

I'd be grateful for some examples :) 

 

 

See the Pen 818f73c3fc47722c5255cfa2ddeeacfd by osublake (@osublake) on CodePen

Share this post


Link to post
Share on other sites

I'm working on horizontal website and finally I've found some solution for smooth scrolling. I resigned for ScrollMagic, cause there was a lot of problems with simple smooth effects but now I don't know how to trigger my animation. 

 

I'd like to fade-in my section which entering and on leaving fade-out it. It should work for each section. 

Have you any suggestions or examples? 

Share this post


Link to post
Share on other sites

Hey Faelivrinx and welcome. 

 

This sort of thing will be much easier using the new scroll plugin that we at GreenSock are developing. It's currently in private beta and development. We're hoping to release publicly in the next month or so.

 

But the key to this sort of thing is to:

  1. Setup the animation that you want to use (in this case moving the container to the left and fading out sections when appropriate).
  2. Attaching that animation to the scroll position.

I talk about how to do this (and other related techniques) in my article on animating efficiently. I highly recommend giving the whole thing a read.

  • Like 1

Share this post


Link to post
Share on other sites

@ZachSaucier thanks for reply. I'm looking forward!

 

For now I found some solution and implemented it by myself. With this solution I only have problem with scroll direction. Page should scroll further on scrolling wheel down, not like now, up. How can I invert this behavior?

 

See the Pen LYpadVR by Faelivrinx (@Faelivrinx) on CodePen

Share this post


Link to post
Share on other sites
On 5/24/2020 at 3:54 AM, Faelivrinx said:

With this solution I only have problem with scroll direction. Page should scroll further on scrolling wheel down, not like now, up. How can I invert this behavior?

It's the correct behavior for devices with inverted scrolling like on Macs :) I recommend that you use a library to handle the scroll direction more properly across devices. But to answer your question you'd  flip the sign in the wheel callback.

 

FYI your demo above acts quite weirdly if you use a horizontal scroll like with a touchpad or magic mouse.

Share this post


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.

×