Holo_Back Posted August 23, 2020 Share Posted August 23, 2020 Hi everyone, I would like to achieve the following image parallax effect (vertical translation) with Scrolltrigger and without Smooth Scroll. https://tympanus.net/Tutorials/SmoothScrollAnimations/ I tried the parallax demos in the docs, but they work differently then this example. Which way is the best to get this effect? Thanks Martin 1 Link to comment Share on other sites More sharing options...
Richard1604 Posted August 23, 2020 Share Posted August 23, 2020 yes that's a nice effect. If you look at that page and turn on the developer tools then it looks like the pics are divs with background images and position absolute with a translate transformation. Link to comment Share on other sites More sharing options...
Holo_Back Posted August 24, 2020 Author Share Posted August 24, 2020 Yes exactly, that's what I did too. The translation effect is easy to create with GSAP, but what I didn't get done yet, is to get the correct y-value for each image with Scrolltrigger. Does anyone have a working example to show? Link to comment Share on other sites More sharing options...
Richard1604 Posted August 24, 2020 Share Posted August 24, 2020 A google search comes up with this article which describes in detail how that effect was originally achieved https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ 1 Link to comment Share on other sites More sharing options...
Holo_Back Posted August 24, 2020 Author Share Posted August 24, 2020 Yes, but I want to use Greensocks Scrolltrigger instead, that's why I asked for a solution with Scrolltrigger. Link to comment Share on other sites More sharing options...
Richard1604 Posted August 24, 2020 Share Posted August 24, 2020 Yes of course you do, i was only trying to be helpful as a better understanding of the original effect provides A deeper insight into how it might be achieved in greensock. Link to comment Share on other sites More sharing options...
Holo_Back Posted August 24, 2020 Author Share Posted August 24, 2020 Ok thanks, no problem 😃 I will try further - if anyone could provide an example with Scrolltrigger, it would be great! Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 24, 2020 Share Posted August 24, 2020 There are several parallax demos listed in the ScrollTrigger docs that can get you started - particularly the parallax section demo. For this effect specifically, create a container for the image with overflow: hidden, make sure the image is slightly larger than the container, then translate the image by the amount of difference between the height (or some lesser amount if you wish). Attach a ScrollTrigger with the default start and end values and apply scrub: true to it and job done 2 Link to comment Share on other sites More sharing options...
Holo_Back Posted August 25, 2020 Author Share Posted August 25, 2020 Hi Zach, thanks for your fast response! I created a demo on codepen, it basically works, but on specific screen sizes you can see the background color of the container behind the parallax container: See the Pen ExKWVdq by holo_back (@holo_back) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 That just means that your calculations are off for what you want/need. It looks like you're not using the difference between the container's height and the image height like I recommended that you use. Here's what I'd do: gsap.utils.toArray(".section-parallax .parallax-content").forEach((section, i) => { const heightDiff = section.offsetHeight - section.parentElement.offsetHeight; gsap.fromTo(section,{ y: -heightDiff }, { scrollTrigger: { trigger: section, scrub: true }, y: 0, ease: "none" }); }); 2 Link to comment Share on other sites More sharing options...
Holo_Back Posted August 25, 2020 Author Share Posted August 25, 2020 You're right! I got your message wrong and therefore my calculation was incorrect. Thanks a lot! Below the working example for all future visitors See the Pen ExKWVdq by holo_back (@holo_back) on CodePen 1 Link to comment Share on other sites More sharing options...
Holo_Back Posted June 22, 2021 Author Share Posted June 22, 2021 Hi, what is the most efficient way to make the solution above responsive? So f.e. updating the offsets when resizing the browser window or putting the mobile device in landscape mode… Link to comment Share on other sites More sharing options...
OSUblake Posted June 22, 2021 Share Posted June 22, 2021 You can use invalidateOnRefresh and functions to return updated values. gsap.timeline({ scrollTrigger: { trigger: section.parentElement, scrub: true, invalidateOnRefresh: true }}) .fromTo(section, { y: () => -section.offsetHeight - section.parentElement.offsetHeight }, { y: 0, ease: "none" }); 4 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