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