MarkD617

I have a simple scrollTrigger / gsap animation using Nuxt 3, all is working as expected. My issue is when I run npm run generate the build is failing, I'm led to believe its my gsap setup or config as If I remove them it builds on all occasions. Is there anything that could be changed with this setup? Do I need to check if process.client? <script setup> /* imports */ import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); onMounted(() => { let matchScreenWidth = gsap.matchMedia(); const createCtaAnimation = (yValue) => { return { y: yValue, stagger: 0.2, scrollTrigger: { trigger: '.container-content--ctas', start: 'top-=150', toggleActions: 'play none none none', }, }; }; matchScreenWidth.add('(min-width: 1200px)', () => { gsap.to('.cta-animate-up', createCtaAnimation(-60)); }); matchScreenWidth.add('(max-width: 1199px)', () => { gsap.to('.cta-animate-up', createCtaAnimation(-30)); }); }); onUnmounted(() => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }); </script> <div class="grid grid-cols-2 mt-[70px] gap-3 xs:gap-7 lg:grid-cols-4 sm:max-w-[420px] w-full mx-auto lg:max-w-full" > <CtaAnimateUp v-for="item in cta" :key="item.linkTitle" :image="item.image" :linkTo="item.link" > <template #linkTitle> <span v-html="item.linkTitle"></span> </template> </CtaAnimateUp> </div>

Hmmm it seems all the examples you provided have 100vh somewhere, whether its sections around the pinned animation or above and below the container as a spacer.

So basically no matter the solution, generally you have to have a container or containing wrapper that is 100vh?

I have a horizontal scroll setup that needs to be the height of 700px. however when on a larger screen size you can see whitespace beneath the pinned section, the slides all cycle through and then section below then comes up into view as the scrollTrigger ends. IS there a way to pin and not have the whitespace underneath?

I appreciate the help! and after posting I ended up figuring it out and fixing! I used VUE refs instead of accessing the DOM elements and its working as I would like!

I have a click event (vue.js) triggering a button animation all is working! good news! I found an instance on my site where these buttons are in a row of 4 next to each other and when I click on one button the animation is being applied to all 4 of the buttons. I tried to add a wrapper (button-link) and apply a forEach() using gsap.utils but i am still getting the same results. Not sure where I am going wrong. methods: { linkTo(path) { let tlButtonLink = this.$gsap.timeline({ onComplete: function () { pushToPath(); }, }); const buttonLink = this.$gsap.utils.toArray('.button-link'); buttonLink.forEach(function (button) { tlButtonLink.to( button.querySelectorAll('.arrow-caret'), { duration: 0.5, ease: 'power2.in', x: 0, }, 0 ), tlButtonLink.to( button.querySelectorAll('.arrow-line'), { duration: 0.5, ease: 'power2.in', width: 0, opacity: 0, }, '-=0.7' ), tlButtonLink.to( button.querySelectorAll('.link-border-bottom'), { duration: 0.5, ease: 'power2.in', width: 0, opacity: 0, }, 0 ); }); const pushToPath = () => { if (!this.isAnchor) { this.$router.push({ path: path }); } else { window.open(this.buttonPathTo, '_blank'); tlButtonLink.pause(); tlButtonLink.progress(0); this.isClicked = false; } }; }, },

Hi Jack, So I added a setTimeout() to the vue mounted lifecycle hook and it worked however The timeout duration had to be at least 1000 for it to refresh the instance. The strange behavior is still flashing quickly and then it refreshes into place. Thank you for the direction, good to know it is a framework issue and not gsap issue.

I have a Nuxt / Vue App and when the app breaks to mobile (991px) I have a strange bug happening with scrollTrigger / Pin. What is happening is the timeline I am pinning is showing at the top of the page as if scrollTrigger is not initialized? As I scroll down the page the timeline remains fixed and then readjusts back to its position in the DOM but it is not working correctly even at that point. If I refresh the page it works fine, even in mobile. I tried calling ScrollTrigger.refresh() on the mounted hook but with no luck. The only other element that is using ScrollTrigger is my site header so I was thinking that could possibly be causing a clash. Any thoughts? <template> <div id="pinVerticalScroll"> <section class="grand-carousel-band section-band grand-carousel--history bg-prism bg-prism--a-left-green-plum" > <div class="container-outer"> <section class="grand-carousel-body grand-carousel-body-history"> <div class="container-outer l-section-band"> <section class="grand-carousel-body grand-carousel-body-history pb-5 pb-md-0" > <header class="grand-carousel-body-header"> <div class="container container--nested-lg"> <div class="row"> <div class="col-lg-7"> <h2 class="title-3 grand-carousel-body-title"> title</em> </h2> <p> copy </p> </div> </div> </div> </header> <div class="container container__timeline mb-5 pb-5 mb-md-0 pb-md-0" > <div class="timeline-nav"> <ul class="timeline-nav__list"> <li class="is-active timeline-nav__list-item">One</li> <li class="timeline-nav__list-item">Two</li> <li class="timeline-nav__list-item">Three</li> </ul> </div> <div class="timeline-slides"> <div class="slide"> <div class="slide--inner"> <div class="timeline-title"> <h3>Slide One</h3> </div> </div> </div> <div class="slide"> <div class="slide--inner"> <div class="timeline-title"> <h3>Slide Two</h3> </div> </div> </div> <div class="slide"> <div class="slide--inner"> <div class="timeline-title"> <h3>Slide Three</h3> </div> </div> </div> </div> </div> </div> </section> </div> </section> </div> </section> </div> </template> <script> import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger.js'; gsap.registerPlugin(ScrollTrigger); export default { name: 'ContentAboutUsHistory', components: {}, data() { return {}; }, methods: {}, mounted() { const gsap = this.$gsap; const sections = gsap.utils.toArray('.slide'); const numSections = sections.length - 1; const snapValue = 1 / numSections; let oldIndex = 0; const navList = document.querySelectorAll('.timeline-nav__list-item'); if (sections.length > 0) { gsap.to(sections, { yPercent: -100 * numSections, ease: 'none', scrollTrigger: { id: 'aboutTimeline', pin: '#pinVerticalScroll', scrub: true, snap: snapValue, end: '+=4000', onUpdate: (self) => { const currentIndex = Math.round(self.progress / snapValue); if (currentIndex !== oldIndex) { navList[oldIndex].classList.remove('is-active'); navList[currentIndex].classList.add('is-active'); oldIndex = currentIndex; } }, }, }); } }); } }, beforeDestroy() { ScrollTrigger.getById('aboutTimeline').kill(); }, }; </script>

@GreenSock PERFECT!

I'm having some issues with a horizontal scrolling carousel. I have gotten it to function as I want but I cannot seem to get the slider navigation to work properly / stable. As of now it scrolls to the first two panels but not the third. Also when I click the first panels trigger in the navigation it scrolls to the first panel and then up to the top of the page?

@akapowl AWESOME! that's exactly what I was after!

Hi! @Cassie thanks you for response! I see what you did and I do understand that, thank you. The problem is that white space underneath the slides when you set the end to a value as you did "end: '+=4000'. Referencing the codepen my goal is to have the "spacer" beneath the slides remain directly underneath the slides and the slides scroll as the do when you set that end value. How do you remove the whitespace below during the scrolling?

Hi again ALL! First of thank you for all the help with my GSAP learning / issues. The responses and support are TOP NOTCH. I have managed to get all my scrolltrigger animations and timelines working as expected! :). There is one thing I cannot figure out (last question I promise ;)). When I am trying to utilize a horizontal scroll if I set the end: 'bottom bottom" which is where I would like it to end my panels jump to the last slide. I think I understand why because there is not enough "time" to scroll through. If end: is not passed a value the slides work great however there is a white space gap at bottom on the first slide and as you scroll the content beneath "rises" up until the last slide is met. How do you just pin at the section, scroll through the slides without whitespace and then continue with the rest of the page???

yes "fake-scroll" up will work for this. I'm reading docs / browsing examples but I'm still confused on how to first PIN a main slide and then animate the sub parts inside the main slide. Sorry for all the q's just really stuck on this one.

Nice! Thank you for the direction! I'm stumped on one more thing with scrolltrigger. What is the best practice / way of chaining a timeline within a pin? What I would like to do is for each MAIN SLIDE while pinned cycle through the content within that SLIDE and THEN slide up onto the next MAIN SLIDE and cycle through it's content and so forth until all MAIN SLIDES are complete and then unpin. https://codepen.io/mDDDD/pen/dyWRqJW

@Carl Thank you for the help! I agree the fading in and out of content could be a bad user experience. How would I go about pinning at the section and then scrolling through the content in the timeline rather than a fade out fade in approach? I setup a codepen to demonstrate. Basically I would like to PIN at a section and then have an inner scroll while pinned. Is this possible with ScrollTrigger? https://codepen.io/mDDDD/pen/dyWRqJW

Hi Cassie! I created a similar codepen as to what I am trying to achieve. I'm creating a years timeline and want to pin at "2020" and cycle through 3 different content paragraphs right next to the year title. As you can see now the first paragraph starts at the top. I was thinking of possibly positioning the content paragraphs absolutely? codepen

I'm using GSAP in a vue js / nuxt project and am trying to have a simple PIN on a section and then fade out content and fade in on scroll. My issue now is the content that is being hidden to start is taking up space in the DOM and creating a large section if that makes sense. It is just small paragraphs I am trying to fade out and In in the same spot. Looking at the code, user scrolls to the "pin" and only the first P "This is P One" is showing. as user continues to scroll "This is P one" fades out and "This is P two" fades in. <div class="timeline-content" id="pin"> <p class="history-description" id="one2020"> this is P One </p> <p class="history-description" id="two2020"> This is P Two </p> <p class="history-description" id="three2020"> This is P Three </p> </div> </div> mounted() { const gsap = this.$gsap; gsap .timeline({ scrollTrigger: { trigger: '#pin', scrub: 0.5, pin: true, }, }) .fromTo('#one2020', 1, { opacity: 1 }, { opacity: 0 }) .fromTo('#two2020', 1, { opacity: 0 }, { opacity: 1 }) .to('#two2020', 1, { opacity: 0 }) .fromTo('#three2020', 1, { opacity: 0 }, { opacity: 1 }) .to('#three2020', 1, { opacity: 0 }); },

Hey Zach! Thank you for clearing that up for me and also the link to the common mistakes! I'll surely be reading through those today :)......Love GSAP and your team!

I have multiple blocks on a page with the same class name "animate-up". What I would like to achieve is as the user scrolls down the page the "animate-up" blocks slightly move up and down pending on scroll direction. I have it working now when it is only ONE element with the class name. The problem is when I add the "animate-up" class to the other blocks the whole page gets kinda janky / jumpy. when the "animate-up" is only on ONE element it works perfectly. Do I need to create a loop or possibly a timeline to achieve this outcome? I should mention this is in a Nuxt / Vue environment: mounted() { gsap.to('.animate-up', { yPercent: -30, ease: Power2.easeInOut, scrollTrigger: { trigger: '.row--blocks', scrub: 0.5, }, }) }, HTML: <div class="l-project animate-up"> <img src="../assets/img/mp-collage.jpg" class="img-responsive" /> </div> <div class="l-project animate-up"> <img src="../assets/img/mp-collage.jpg" class="img-responsive" /> </div> <div class="l-project animate-up"> <img src="../assets/img/mp-collage.jpg" class="img-responsive" /> </div>

Just started using GSAP and am a bit stumped on my next steps for this SVG morph...I like what i have going so far but is there a way to know continue the animation so the middle two paths morph into an "x"???