stevensunsunsun

I know, sorry! 🙂 But now that I'm using toggleActions as per… it's working perfectly. Thank you again for looking at this and helping me get to a solution!

Thank you both! That works perfect! 😄

Hi! I'd like to recreate the opacity effect seen here (the attached section of the website)… https://www.apple.com/careers/ca When the user reaches that section and it pins, a black overlay automatically increases in opacity between the image and text. When the user leaves that section, the opacity goes back to 0, and then when they return it repeats. Is that possible with gsap? I'd like to be able to do it without scrub so that it isn't dependant on the user scrolling but just happens and reverse when the section is fully in and fully out of screen. I can get the pinned section to work but am not sure how to then combine pin: true with an opacity change. Thanks!

Hi, thanks but unfortunately nothing seems to work. Is there a way that I can trigger an opacity change with scrolling? I can see that it can be set to happen on delay but I have a series of sections. And then when the user scrolls back up to one it would need to go back to opacity 0. This way I could avoid this particular puzzle all together!

Hi, thank you. I can try that. Where would ScrollTrigger.refresh() be added to the code?

Sure, I understand. So annoying that the codesandbox didn't work! Is there any reason why a refresh would calculate different values than a page navigation? Just trying to troubleshoot from that side.

Hi, thanks – but I've tried that and see exactly the same issue. When navigating to the page the start | stop are 178px above the bottom of the text box. When refreshing the page, they are -178px below the bottom of the text box. The position is consistent except that it becomes a negative value for some reason.

Ah, ok. It works at the moment like in the example. But I could try that. Where should I move the trigger to in the code example? https://codesandbox.io/s/magical-noether-01edtf?file=/components/Box.vue

Sorry I'm not sure what you mean. Does the trigger need to be somewhere else?

Ah! Thanks! So this is as close as I can get to a recreation: https://codesandbox.io/s/magical-noether-01edtf?file=/components/Box.vue This doesn't actually show the error for some reason. Perhaps because I'm using Nuxt. But when these both start with bottom, the start | stop are correctly positioned offscreen to begin with when navigating to a new page, and the opacity change kicks in as you scroll. But if you refresh the page, they reposition like the attachment. The opposite happens if they both begin with top: when navigating to a page, it looks like the screen shot. The opacity is already 0.5 because they've passed the scroller end. But then when hitting refresh, the start | stop are correctly positioned just offscreen at the bottom. start: () => "bottom bottom", end: () => "bottom bottom-=200", Unfortunately the issue isn't showing up in the codesandbox example. It's not essential that the user scrubs these. It would still work if when each section was fully in screen then the opacity changed after a small delay. The only problem is that when scrolling back to a previous section, the opacity would have to go back to 0. I can't see a way to do that hence trying it with scrub.

Hi, sorry I know I'm not sure how to recreate in Code pen as it would need to be Nuxt and route between pages. Can I send you a private link to the website where it occurs?

Ah no wait. Now it's working if you navigate to the page, but if you hit refresh then the start | end move.

Hi, thanks for getting back to me! It turns out I should have been using bottom instead of top! start: 'bottom bottom', end: 'bottom bottom-=200',

Sorry no codepen but everything is working fine except that when navigating to a new page. If you hit refresh it's all good or even just resizing the window a tad. There is an element with bottom -252px and it's positioned fine except that the start | end now appear 252px from the bottom. I've got the following code: mounted() { gsap.registerPlugin(ScrollTrigger); this.headingAnimation(); }, beforeDestroy() { ScrollTrigger.getAll().forEach(t => t.kill()); }, methods: { headingAnimation() { for (let i = 0; i < this.boxes.length; i++) { gsap.to(this.$refs.opacityChange[i], { opacity: 0.5, scrollTrigger: { trigger: `.content-${i}`, start: 'top bottom', end: 'top bottom-=200', scrub: true, invalidateOnRefresh: true, markers: true, }, }); Please let me know if there's another step for Nuxt. Thanks!

Thanks! The issue was with the container 😄