fjanroid Posted June 19, 2021 Share Posted June 19, 2021 Hi I am new in GSAP and looking for solution to achieve this kind of effect. https://pegahghaemi.com/ Background image scale and increase and decrease opacity of the image and then new image loads with smooth transition. any one can help to get this in react Link to comment Share on other sites More sharing options...
OSUblake Posted June 20, 2021 Share Posted June 20, 2021 Hi fjanroid! If you're new to GSAP, then I would recommend checking out the getting started page, the ScrollTrigger docs, the ScrollTrigger demos, and this tutorial on using ScrollTrigger with React. This thread might also helpful with animating image sequences. Link to comment Share on other sites More sharing options...
fjanroid Posted June 20, 2021 Author Share Posted June 20, 2021 @OSUblake thanks man for your kind support. through other tutorials and solutions, I created this. See the Pen gOmymeo by fjanroid (@fjanroid) on CodePen might you can help me in this as well. 1. on scrolling to next slide how can i adjust opacity (slide B ) from 0 to 1 and slide C from 0 to 1 and then 0 if scroll. 2. Once I reach to Slide E I am not able to reverse the scroll with same effect. Link to comment Share on other sites More sharing options...
mikel Posted June 20, 2021 Share Posted June 20, 2021 Hey @fjanroid, Maybe this case helps a little See the Pen ZEeZewz by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 1 Link to comment Share on other sites More sharing options...
fjanroid Posted June 20, 2021 Author Share Posted June 20, 2021 @mikel is this possible, this coffee image opacity from 0 at the bottom and once its scroll down it opacity will be 1 in the center. and once we scroll furture coffee image opacity again from 1 to 0. and rasperries have same effect as coffee. check this site, I am trying to do the same effect https://pegahghaemi.com/ Link to comment Share on other sites More sharing options...
mikel Posted June 20, 2021 Share Posted June 20, 2021 Hey @fjanroid, Try to make the logic of the sequence clear to you, then a lot is possible - step by step See the Pen NWRoQJo?editors=1010 by mikeK (@mikeK) on CodePen Happy learning ... Mikel 2 Link to comment Share on other sites More sharing options...
fjanroid Posted June 20, 2021 Author Share Posted June 20, 2021 @mikel Thanks a lot 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