Jump to content
Search Community

MarkD617

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by MarkD617

    Nuxt 3 npm run generate build fails prerender

    in GSAP

    Posted

    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>

     

    Animation being applied to all instances of button at same time

    in GSAP

    Posted

    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;
        }
      };
    },
  },
     

     

     

     

    Scrolltrigger buggy when site breaks to mobile

    in GSAP

    Posted

    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.

    Scrolltrigger buggy when site breaks to mobile

    in GSAP

    Posted

    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>

     

     

     

     

     

    Horizontal scroll navigation issue

    in GSAP

    Posted

    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?

    See the Pen QWvqVzV by mDDDD (@mDDDD) on CodePen

    Scrolltrigger horizontal scroll jumps from first panel to second panel with position "end: 'bottom bottom" set.

    in GSAP

    Posted

    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?

    Scrolltrigger horizontal scroll jumps from first panel to second panel with position "end: 'bottom bottom" set.

    in GSAP

    Posted

    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???

    See the Pen MWmmpEw by mDDDD (@mDDDD) on CodePen

    • Like 1

    Pin timeline fade in / fade out content without taking up space in DOM

    in GSAP

    Posted

    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.

     

    See the Pen dyWRqJW by mDDDD (@mDDDD) on CodePen

    Pin timeline fade in / fade out content without taking up space in DOM

    in GSAP

    Posted

    @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?

     

    See the Pen dyWRqJW by mDDDD (@mDDDD) on CodePen

    Pin timeline fade in / fade out content without taking up space in DOM

    in GSAP

    Posted

    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 });
},
     

    ScrollTrigger animation on elements with the same class

    in GSAP

    Posted

    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>

     

×
×
  • Create New...