Share Posted March 4, 2019 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 Link to comment Share on other sites More sharing options...
Share Posted March 4, 2019 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. 3 Link to comment Share on other sites More sharing options...
Share Posted March 4, 2019 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 4, 2019 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! 2 Link to comment Share on other sites More sharing options...
Share Posted March 4, 2019 It's not exactly the same question, but Sahil has some neat demos for an answer in this thread: Happy tweening. 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 4, 2019 Good one, useful and cool effect indeed. Link to comment Share on other sites More sharing options...
Share Posted March 5, 2019 @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 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 5, 2019 @smallio checking it out now, thanks so much! Love this community so far, people are so helpful 3 Link to comment Share on other sites More sharing options...
Share Posted March 5, 2019 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) 4 Link to comment Share on other sites More sharing options...
Author Share Posted March 6, 2019 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 ? Link to comment Share on other sites More sharing options...
Share Posted March 6, 2019 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 6, 2019 @jesper.landberg sweet, yes that's it. Thanks, cheers man! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now