Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

MarkD617

Members
  • Posts

    15
  • Joined

  • Last visited

Posts posted by MarkD617

  1. 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.

  2. 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>

     

     

     

     

     

  3. 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

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

  5. 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
  6. 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

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

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

     

×