How to create these effects on scroll?

[TEQQED 7 Likes (Newbie)]

I'd love to know how we can create the effect where the angle of content (text/image) changes in the top of the screen and then fades on scroll. Any idea if there's a codepen for this or a tutorial?

See the Pen by (@) on CodePen

[Carl 9,066 Likes (Superhero)]

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.

 

 

 

[Shaun Gorneau 1,503 Likes (Superhero)]

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

[TEQQED 7 Likes (Newbie)]

Thanks @Shaun Gorneau and @Carl, will have a look! Was hoping there was a template for the exact effect, but I guess we have to create something ourselves to achieve a similar result. Thanks for the help!

[PointC 8,599 Likes (Superhero)]

It's not exactly the same question, but Sahil has some neat demos for an answer in this thread:

Happy tweening.

 

[TEQQED 7 Likes (Newbie)]

Good one, useful and cool effect indeed.

[smallio 89 Likes (Contributor)]

@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

 

[TEQQED 7 Likes (Newbie)]

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

[jesper.landberg 40 Likes (Newbie)]

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)

 

[TEQQED 7 Likes (Newbie)]

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 ?

[jesper.landberg 40 Likes (Newbie)]

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.
 

See the Pen 1be4b0a81ac8f1c2ddaca22f37f8ab98?editors=0010 by ReGGae (@ReGGae) on CodePen

 

[TEQQED 7 Likes (Newbie)]

@jesper.landberg sweet, yes that's it. Thanks, cheers man!