szyablo Posted April 7, 2021 Share Posted April 7, 2021 Hello i'm trying to do something similar to iphone12 pro landing page can be seen here(https://www.apple.com/iphone-12-pro/). But i don't know where to start. So far i've done this : useEffect(() => { gsap.to(".about_section", { scrollTrigger: { trigger: ".about_section", markers: true, start: "top top", end: "bottom center", scrub: true, }, yoyo: true, repeat: 1, opacity: 1, y: 0, }); }, []); as you can in the gif at the center the opacity is 0 and at top and bottom is becames 0 , it should be opposite demo : See the Pen LYxzyWB by siinghd (@siinghd) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted April 7, 2021 Share Posted April 7, 2021 Hey @szyablo There's actually quite a few different ways to do this (some contained in the example pen below) - but your code snippet seems to be working quite right for me (I only adjusted the start a bit). See the Pen b52abd6dc94f1bce7f0785b56c38e595 by akapowl (@akapowl) on CodePen Your problems might be related to tweening on the y of the trigger-element itself, which is bound to create issues. But it's impossible to tell from the GIF and your code-snippet only. So if you need furher assistance on this, it would be great if you could create a minimal demo of your issue for us to work with. 3 Link to comment Share on other sites More sharing options...
szyablo Posted April 7, 2021 Author Share Posted April 7, 2021 2 hours ago, akapowl said: Hey @szyablo There's actually quite a few different ways to do this (some contained in the example pen below) - but your code snippet seems to be working quite right for me (I only adjusted the start a bit). Your problems might be related to tweening on the y of the trigger-element itself, which is bound to create issues. But it's impossible to tell from the GIF and your code-snippet only. So if you need furher assistance on this, it would be great if you could create a minimal demo of your issue for us to work with. Hi , thanks for your answer ... i took your code and added my html and it works on codepen but not in localhost... it can be cause i'm using nextjs? when i set opacity :0 like this : gsap.to("div.container", { scrollTrigger: { trigger: "section.section4", markers: true, start: "top center", end: "bottom center", scrub: true, markers: true, }, yoyo: true, repeat: 1, opacity: 0, y: 0, }); it works but when in center the opacity is zero. here you can see opacity doesnt change So this seems to work 50% the opacity is changed inly when it is at the top: //gsap.to('.content', { // // opacity: 1, // // scrollTrigger: { // trigger: '.content', // start: 'center bottom', // end: '+=25%', // scrub: true, // markers: true // } // //}) // //gsap.to('.content', { // // opacity: 0, // immediateRender: false, // // scrollTrigger: { // trigger: '.content', // start: 'center 25%', // end: '+=25%', // scrub: true, // markers: true // } // //}) Link to comment Share on other sites More sharing options...
akapowl Posted April 7, 2021 Share Posted April 7, 2021 28 minutes ago, szyablo said: it can be cause i'm using nextjs? If it works on codepen but not in your local environment, it could very well be that it has do do with your environment/setup. Sorry, but I am not familiar with nextjs at all, so you will have to wait for someone else to swing by who knows his ways around that. But even for others it will probably be very hard to tell what could be the cause without a demo to work with. 1 Link to comment Share on other sites More sharing options...
szyablo Posted April 7, 2021 Author Share Posted April 7, 2021 27 minutes ago, akapowl said: If it works on codepen but not in your local environment, it could very well be that it has do do with your environment/setup. Sorry, but I am not familiar with nextjs at all, so you will have to wait for someone else to swing by who knows his ways around that. But even for others it will probably be very hard to tell what could be the cause without a demo to work with. Hi here is the demo : Link to comment Share on other sites More sharing options...
szyablo Posted April 7, 2021 Author Share Posted April 7, 2021 1 hour ago, akapowl said: If it works on codepen but not in your local environment, it could very well be that it has do do with your environment/setup. Sorry, but I am not familiar with nextjs at all, so you will have to wait for someone else to swing by who knows his ways around that. But even for others it will probably be very hard to tell what could be the cause without a demo to work with. @akapowl hi , i figured it out why it wasn't working. I don't know why but it looks like in react you have to set the style propriety to the element like : <div style={{opacity:0}} className="container"> Link to comment Share on other sites More sharing options...
akapowl Posted April 8, 2021 Share Posted April 8, 2021 15 hours ago, szyablo said: hi , i figured it out why it wasn't working. Just checking in to make sure, you've got things resolved now on your end. Right? I see the problem now. You were tweening .to() an opacity of 1 but you never set the element you're tweening on to have an opacity of 0 in the first place. Could have also done that via CSS. See the Pen 9af61748f2c4bac558ca4c067f5d5ede by akapowl (@akapowl) on CodePen 1 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