Jump to content
GreenSock

Duo

ShockinglyGreen
  • Posts

    29
  • Joined

  • Last visited

Everything posted by Duo

  1. Hi @Rodrigo Thanks so much for your quick response! I've just implemented your code update and it looks like it's working perfectly so thank you for all of your help, Dayne
  2. Hi, I'm implementing ScrollTriggers with pinning on a website I'm working on but having issues when accordions are being opened/closed. When the user scrolls to the product image gallery it becomes pinned to allow for the scrolling of the product content. This works great initially but once I open the INGREDIENTS tab (any tab for that matter), it obviously increases the height of the parent container while the slider stays the height of the viewport. But if I scroll down to the next product, that products slider jumps. You can see a video reference here and you can also see this in the browser by visiting: https://eldetalleusa.myshopify.com/ (view at a 13") This is the code that I'm using to init the ScrollTriggers is: this.fixedElements.forEach(element => { ScrollTrigger.create({ trigger: element, start: "top top", end: "bottom top", pin: true, markers: true, pinSpacing: true, }) }) And the code I'm using to trigger the ScrollRefresh is: I've also tried ScrollTrigger.update() this.accordions.forEach(accordion => { accordion.addEventListener('click', e => { ScrollTrigger.refresh() }) }) Any help would be greatly appreciated. Thanks, Dayne
  3. 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.
  4. 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()
  5. 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
  6. 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()
  7. 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.
  8. 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
  9. 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
  10. I’m desperate for some help on this haha. Hoping that some one out there can heed the call.
  11. I have gone ahead and created a CodePen for testing: https://codepen.io/dayneh88/pen/RwygjWb Really hoping that someone can provide assistance. Thanks
  12. 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
  13. 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.
  14. 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
  15. 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
  16. Thanks guys. I took your advice and started a new topic:
  17. 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
  18. So I've kind of implemented this correctly but I'm having a few issues so hoping someone can help me out. Issue 1 I changed my sections to be auto width instead of 100% width like the example in this thread: https://codepen.io/nicvh/pen/gOeZKOJ This all seems to work great until I get to the last section inside a horizontal scroller. It seems to add a huge gap at the end of the horizontal scroller. There is no padding between the sections as I thought it might be calculating it and adding it. Video of issue: 2scroll-issue.mp4 When I add a vertical scrolling section, the functionality seems to work but that huge gap is still there: 2Untitled.mp4 Here is the javascript code that I've got going: gsap.utils.toArray('[data-component="scrolling-wrapper"]').forEach((section) => { if (section.dataset.type === "horizontal") { const cards = section.querySelector(".scrolling__panels"); const card = section.querySelector(".scrolling__panel"); gsap.to(cards, { x: () => { return -cards.scrollWidth + card.offsetWidth; }, ease: "none", scrollTrigger: { trigger: section, start: () => "center center", end: () => `+=${cards.scrollWidth - card.offsetWidth}`, scrub: true, pin: true, invalidateOnRefresh: true, anticipatePin: 1 } }) } else { ScrollTrigger.create({ markers: false, trigger: section, start: () => "top top", pin: false, anticipatePin: 1 }) } }) This is being called on window.load Issue 2 I've tried to implement this into GSAP ScrollSmoother and have had some success but not 100%. When ScrollSmoother is on, it doesn't seem to calculate the vertical scrolling panels and gets cut off. Any help on this would be greatly appreciated. The support in the Greensock Forums is amazing so I'm hoping that someone can help. Thanks
  19. Hi everyone, I'm wondering if any of the geniuses on this incredible forum could potentially point me in a direction to possibly modifying the ScrollTrigger Layered Pinning Demo (https://codepen.io/GreenSock/pen/KKpLdWW) to behave to something similar to this: https://gmeadow.com/ I can see that https://gmeadow.com/ is actually using GSAP and ScrollTrigger but I have no idea how to achieve some of functionality they've implemented (i.e. scroll-jacking/locking, parallax effect on section transitions etc). Any help or pointing in the right direction would of course, be greatly appreciated. Thanks, Dayne
  20. Duo

    GSAP Animated Counter

    I managed to find great example of what I'm kind of wanting from the wiz @PointC: https://codepen.io/PointC/pen/eMxmwN
  21. Duo

    GSAP Animated Counter

    Hi, I'm trying to figure out how to tackle this type of animation. Basically our client wants to have a starting figure (say for example: 2,300,000,000) and then increment that number by 23000 each week. I want to try and tackle the animation first though. I've seen example of a counter using GSAP (https://codepen.io/snorkltv/pen/NWRGwYQ, https://codepen.io/akapowl/pen/b2c2c56064274fd14620faa9d5537e40) but these are really just changing the HTML. I really need it to animate the numbers from bottom to top and count up. There is another example of a counter and then animating at the end once it reaches 100% (https://tofucollective.com/). Is something like this possible in GSAP? Or should I tackle it another way? Any help would be greatly appreciated. Thanks
  22. That has worked perfectly @PointC and less code too. Thanks so much again!
  23. Hi @PointC, I know I marked this as solved and it pretty much is. There is just a small issue of it like glitching at the bottom of the animation. You can view it here: https://bardee.com/ You can see right at the end of the animation it like glitches it's position. This is the code I've used to do the animation: gsap.set('[data-component="bardee-icon"] svg path', { drawSVG: false }) gsap.from("#target", { duration: 2, drawSVG: "0% 75%", ease: "none"}) gsap.from("#target", { duration: 2, drawSVG: "100% 175%", ease: "none", repeat: -1 }); I used from instead of to so that I could reverse the animation. Again, any help would be greatly appreciated. Thanks
  24. Hi @PointC, You are a superstar! Thanks so much for providing this outstanding example and in such a timely manner. Greatly appreciated.
  25. Hi, I'm trying to replicate this animated GIF using GSAP to increase performance and reduce a huge GIF load. I've tried using the DrawSVG plugin but I'm not having any luck. I was wondering if I might need to use MotionPathPlugin but I'm not sure how I go about setting the stroke value and then animating it like this along the SVG path. Any help would be greatly appreciated. Thanks
×