Jump to content
Search Community

How to create these effects on scroll?

TEQQED 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,

 

That's a fairly advanced effect that has a decent amount of complexity to it. Definitely not something we can provide step-by-step instructions for, or even a reduced demo (unless someone already has something like this built).

 

After inspecting the page with dev tools it appears they are applying a skewY to the main container div that holds all the text and images.

Something like:

See the Pen MxeMEN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

 

 

Where it gets tricky is that the amount of skew seems to be directly tied to the speed AND direction of the scroll.

Quite frankly it would take me quite a bit of time to figure it all out.

 

 

 

  • Like 3
Link to comment
Share on other sites

Hi @TEQQED,

 

So, there are a few things happening here ... and depending on what effect you want to pull off, it can go from fairly straight forward to moderately complex. Having DOM elements rotate a bit on the x/y axis in response to mouse movement and having text fade away as the user scrolls can be achieved with just a little code.

 

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

 

Having an image respond to mouse movement at varying levels depending on "depth" can be beautiful, but requires quite a bit of work .. both from a code standpoint and from an "image prep" standpoint.

 

Here is a great tutorial on that ... 

 

https://tympanus.net/codrops/2019/02/20/how-to-create-a-fake-3d-image-effect-with-webgl/

 

Example:

 

https://tympanus.net/Tutorials/Fake3DEffect/index2.html

  • Like 4
Link to comment
Share on other sites

13 hours ago, smallio said:

@jesper.landberg has been doing this exact thing. 

 

The first version is almost exactly the effect in on that site, but I've attached a slider version done made by him as well. 

 

See the Pen pxMJLW by ReGGae (@ReGGae) on CodePen

 

See the Pen EEwrRp by ReGGae (@ReGGae) on CodePen

 

 

13 hours ago, TEQQED said:

@smallio checking it out now, thanks so much! Love this community so far, people are so helpful :)


I need to update those demos to some fresher/better ones:P 

Between the other code in those demos the actual logic for the effect is pretty straight forward. You just lerp the scroll value, check the diff between the new and old value... and apply that value to anything.. like a skew in this case.

Something like the below (not tested).

 

let scrollTarget = 0
let scrollCurrent = 0
let ease = 0.1

const skewTarget = someElement

window.addEventListener('scroll', () => {
	scrollTarget = window.scrollY
})

function render() {
	scrollCurrent += (scrollTarget - scrollCurrent) * ease

	const diff = scrollTarget - scrollCurrent
	const vel =+ diff

	skewTarget.style.transform = `skewY(${vel}deg)`

	requestAnimationFrame(render)
}

requestAnimationFrame(render)

 

  • Like 4
Link to comment
Share on other sites

26 minutes ago, TEQQED said:

I understand the tilt effect on scroll, but what about the angle the content/image makes on scroll after a certain point: http://prntscr.com/mtw53w ?

 

@TEQQED What I would do is create a GSAP timeline, then increase the progress of it tied to scroll.

 

Here I created a quick demo, it doesnt have the perspective/angle, but u get the point.
 

 

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