Jump to content
Search Community

Single Element Parallax with delay

Clms test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I want to recreate a scrolling effect from a gif: https://imgur.com/c1vgdkg

On object (box with text in it, image, etc) scrolls at a different speed than the rest of the page.

So I decided to try it with scrollmagic + greensock.

The result was okish but not really what I intended. Two things are missing:

 

- My box (which should scroll slower than the rest of the page) starts scrolling slowly only after it is almost completely in the viewport. It should already enter the viewport with a different speed than the rest of the page.

- Once I stop scrolling, the box immediately stops as well. I  would love to recreate this "delay" effect like the box is sliding a bit further, even tough scrolling has stopped. A bit similar to like when it would be on the ice and can't break immediately.

Thanks!

- Clmsvie

 

See the Pen aRjXRX by clmsvie (@clmsvie) on CodePen

Link to comment
Share on other sites

Thanks so much.

It looks promising but I don't really grasp the idea yet. It is about moving elements up and down instead of actually scrolling?
 

Wouldn't it be possible to check for the end of the scrolling movement then calculate the distance from the last scroll, take a fraction of that distance and apply a y transform with easing to one element, so it has an effect of "slowing down" with little friction?

 

I found two other websites using this effect.
One has a js included, that is not minified with comments. Nonetheless, I don't understand the code.

The other example has a smoother / nicer scrolling effect tough. I would love to be able to use the same effect.

Website 1: https://techstylefashiongroup.com/
JS Website 1: https://techstylefashiongroup.com/wp-content/themes/techstyle/js/scripts.js?ver=20161204 (please look for "function animateParalax() ")

Website 2: https://www.shift-capital.com/about
 

Cheers!

Link to comment
Share on other sites

Sorry, but we don't have the resources to dive into full websites and we need to keep our support focused on GSAP. 

 

My advice would be to take what you found on those websites and combine it with the info from the thread above about smooth page scrolling and put together a demo. I'd just start with a few plain divs and go from there. If you get stuck, we're happy to help with any GSAP related problems or questions.

 

 

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