Duo

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

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.

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

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

Thanks guys. I took your advice and started a new topic:

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

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

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

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

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

That has worked perfectly @PointC and less code too. Thanks so much again!

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

Hi @PointC, You are a superstar! Thanks so much for providing this outstanding example and in such a timely manner. Greatly appreciated.

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

Thanks so much for getting back to me. That method worked perfectly.

Hi, I'm a member of the GreenSock club and successfully downloaded and installed GSAP 3.0 and bonus plugins using the gsap-bonus.tgz method with YARN. I'm now trying to import the DrawSVGPLugin but it's throwing errors in my Terminal and then also in my browser. This is the setup in my main app index.js: import 'dom4' import 'svgxuse' import domready from 'domready' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin.js' import Swup from 'swup' import SwupBodyClassPlugin from '@swup/body-class-plugin' import SwupJsPlugin from '@swup/js-plugin' import GlobalHeader from '../global-header' import ProjectGallery from '../our-work/project-gallery' import Contact from '../contact' import GlobalFooter from '../global-footer' import ScrollBtn from '../scroll-btn' import InView from '../in-view' gsap.registerPlugin(DrawSVGPlugin) This is the error that is showing in my Terminal: ERROR in bundle.js from UglifyJs SyntaxError: Unexpected token: keyword (var) [./~/gsap/DrawSVGPlugin.js:208,0] And this is the console error in my browser (Chrome): Uncaught SyntaxError: Unexpected token 'export' I can see the plugin inside the node_modules/gsap folder. I'm also running webpack@1.15.0 Any help would be greatly appreciated. Thanks, Dayne

Hi PointC, That has worked perfectly. Thanks so much.

Hi, First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work! I'm trying to get the following animation to work however and am having some issues. This is the following animation. See screenshot. The animation should be as follows: The T appears The line from the T to the D animates the stroke with DrawSVG. The D appears The line from the D to the L animates the stroke with DrawSVG. The L appears The line from the L to the T animates the stroke with DrawSVG. This is the following code that I have: const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2}); tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail. Any help with this would be greatly appreciated. Thanks