Jump to content
GreenSock

Duo

ShockinglyGreen
  • Posts

    27
  • Joined

  • Last visited

About Duo

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Duo's Achievements

  1. Hi @GreenSock, Apologies for not getting back to you sooner but thank you so much for all of your help and assistance. There seems to be other issues going as to why it's throwing inconsistencies on resize but the client doesn't care haha so we are going to launch it with that issue there. Not ideal I know but they want the project live instead of investing more time into trying to fix it and holding up delivery. Thank you again for all of your help and assistance, it is greatly appreciated.
  2. Hi @GreenSock Thanks for your new CodePen. Appreciate you again, taking the time to assist me. I've implemented your code exactly as you have it into my project and it works but only sometimes. I'm so over trying to get this to work. Why does nothing ever work in a real environment haha. You can view the live page here: https://orconeau.com/cecilstreet/spaces/living/ If you open the page and have the viewport open half of the height of your screen and then resize it down so that it is full viewport height, the calculation is all off again. If you resize it again, some of the last few sections are cut off. Refresh the page completely and it calculates properly, but resize it different ways and it breaks. Your demo though, works perfectly. Across all browsers. I even tried turning off scrollSmoother and changing the eventListener to "refresh", instead of "refreshInit" on ScrollTrigger but the issue remains. This is the code I've implemented: import '../sass/app.scss'; import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { ScrollSmoother } from 'gsap/ScrollSmoother' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin) class CecilStreet { constructor() { this.initCecilStreet(); } initCecilStreet() { ScrollSmoother.create({ smooth: 2, effects: false, smoothTouch: 0.1 }) window.addEventListener('load', (event) => { document.querySelectorAll('[data-component="horizontal-scroller"]').forEach(element => { const horizontalCards = element.querySelector('.cards') const horizontalCard = element.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) let distance function refreshDistance() { let cleaner = gsap.set(".card .inner", { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1 }); distance = horizontalCards.scrollWidth - window.innerWidth * 0.5 + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2); cleaner.revert(); } refreshDistance(); ScrollTrigger.addEventListener("refreshInit", refreshDistance); const horizontalTween = gsap.to(horizontalCards, { x: () => -distance, ease: "none", scrollTrigger: { trigger: element, start: () => "top top", end: () => "+=" + distance, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector(".inner"); gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }); const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }); ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 2, animation: tween }); }); }) }) ScrollTrigger.normalizeScroll(true); } } export default CecilStreet; const cecilStreet = new CecilStreet()
  3. Hi Jack, I've created a new CodePen with the issue: https://codepen.io/dayneh88/pen/eYrEEdx And you can view it without any of the extra CodePen stuff here (view it in Firefox and resize to see the issue at hand): https://codepen.io/dayneh88/live/eYrEEdx Thanks
  4. Hi Jack, What is the issue that you've addressed on Safari in the latest beta? asI've got it working in Safari? I've managed to get it all working across browsers successfully. I have placed all of the functionality inside a window.load event with smoothScroller initialising before the window.load event. I also added ScrollTrigger.normalizeScroll(true); after everything to stop the bouncing on the viewport in Safari when over-scrolling the start and end points of the page. The only issue I'm having before I can officially sign this off is that when the browser is resized, the scroll distance seems to not be updated. This is very evident in Firefox. If you view the STAGING link you'll see what I mean: https://orconeau.com/cecilstreet/spaces/location/ (load and resize the browser) This is what I have in my app.js: import '../sass/app.scss'; import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { ScrollSmoother } from 'gsap/ScrollSmoother' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin) class CecilStreet { constructor() { this.initCecilStreet(); } initCecilStreet() { ScrollSmoother.create({ smooth: 2, effects: false, smoothTouch: 0.1 }) window.addEventListener('load', (event) => { document.querySelectorAll('[data-component="horizontal-scroller"]').forEach(element => { const horizontalCards = element.querySelector('.cards') const horizontalCard = element.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const horizontalTween = gsap.to(horizontalCards, { x: () => { let cleaner = gsap.set(".card .inner", { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1 }), width = -(horizontalCards.scrollWidth - window.innerWidth * 0.5 + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)); cleaner.revert(); return width; }, ease: "none", scrollTrigger: { trigger: element, start: () => "top top", end: () => `+=${horizontalCards.scrollWidth - window.innerWidth * 0.5 + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2) }`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector(".inner"); gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }); const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }); ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 2, animation: tween }); }); }) }) ScrollTrigger.normalizeScroll(true); } } export default CecilStreet; const cecilStreet = new CecilStreet()
  5. Also, when the browser is resized the width isn't recalculated so the gap at the end appears. On Firefox scrolling almost fails to work again. I think on resize the x: => width needs to be recalculated.
  6. HI, Thanks for getting back to me and helping out. Greatly appreciated. I was getting inconsistencies across browsers and sometimes it wasn't even initialising the scrolling functionality (Safari) but it seems to be working much better when I run the functionality for the horizontal scrolling inside a window.addEventListener('load', (event) Is it ok to have this functionality initiate in the window load event? This is the code inside my app.js: import '../sass/app.scss'; import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { ScrollSmoother } from 'gsap/ScrollSmoother' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin) class CecilStreet { constructor() { this.initCecilStreet(); } initCecilStreet() { ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); window.addEventListener('load', (event) => { const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const horizontalTween = gsap.to(horizontalCards, { x: () => { let cleaner = gsap.set(".card .inner", {rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1}), width = -(horizontalCards.scrollWidth - window.innerWidth * 0.5 + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)); cleaner.revert(); return width; }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${ horizontalCards.scrollWidth - window.innerWidth * 0.5 + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2) }`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector(".inner"); gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }); const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }); ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, animation: tween }); }); }) } } export default CecilStreet; const cecilStreet = new CecilStreet() I'm so close to having this working the way I want it to across browsers so I really do appreciate any continued support in order to nail this. Thanks
  7. Hi @Rodrigo Thanks so much for getting back to me. Huge respect for you looking at this on your phone, in the middle of a blackout. I really appreciate you offering to help me out. Thank you again
  8. I’m desperate for some help on this haha. Hoping that some one out there can heed the call.
  9. I have gone ahead and created a CodePen for testing: https://codepen.io/dayneh88/pen/RwygjWb Really hoping that someone can provide assistance. Thanks
  10. Hi, Hoping that a genius in these forums can help me out. I've got a project which is using horizontal scrolling, scrollTrigger and smoothScroller. You can view it here: https://orconeau.com/cecilstreet/spaces/location/ The issue I'm having is that when the user scrolls towards the end of the horizontal scrolling section, it's adding a huge gap and not stopping on the last section with it centered. I've spent hours trying to tweak the math but I just can't get it to work properly and I'm pulling my hair out. Happy to set up a codepen but I wanted to see if anyone could have a look at the STAGING link and the code that I'm using and maybe make a suggestion. The CSS is: [data-component="horizontal-scroller"] { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; .cards { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; flex-shrink: 0; gap: 10vw; .card { width: auto; height: 100%; display: flex; align-items: center; flex-shrink: 0; justify-content: center; background-color: blue; backface-visibility: hidden; overflow: visible; padding-top: 101px; padding-bottom: 120px; box-sizing: border-box; .inner { height: 100%; position: relative; will-change: transform; transform-style: preserve-3d; } picture { img { @include app-breakpoint-3 { width: auto; height: 100%; } } } &:nth-of-type(odd) { background-color: purple; } } } } The javascript is: const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const smoother = ScrollSmoother.create({ smooth: 1.5, effects: true, smoothTouch: false }) const horizontalTween = gsap.to(horizontalCards, { x: () => { return -((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)) }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2))}`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector('.inner') gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }) const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }) ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, markers: true, animation: tween }); }); I've got the horizontalTween working and then I have an animation for each .card element inside the scrolling .cards section. The animation in there is doing some funky transforms and the issue is that the scrollWidth is including the transforms when it's determining the width of each card. I think. When I turn it off, the scrolling overflow is better but I lose the effect. Any help would be greatly appreciated. Thanks
  11. Thanks for your quick response @SteveS You couldn't possible tweak my CodePen example and add a basic starting point could you. I'd be forever grateful.
  12. Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks
  13. Amazing work from you @akapowl This implementation has worked perfectly. Thank you so much for taking the time to look into this for me. It's greatly apprecated. Once again, the amazing people in these forums are always there and willing to help. This plugin is great! Thanks
  14. Thanks guys. I took your advice and started a new topic:
  15. Hi, I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger. I used a starting point from this great CodePen example: https://codepen.io/nicvh/pen/gOeZKOJ What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections. As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out. Thanks
×