Jump to content
GreenSock

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

oligsap

ShockinglyGreen
  • Content Count

    22
  • Joined

  • Last visited

Posts posted by oligsap

  1. Ok so I think I managed to solve it - like this : 

    See the Pen GRZORvX by olig (@olig) on CodePen

     

    Code:

     

    const sections = gsap.utils.toArray("section");
    let maxWidth = 0;
    sections.forEach((section) => {
      maxWidth += section.offsetWidth;
    });
    
    gsap.to(sections, {
      x: () => `-${maxWidth - window.innerWidth}`,
      ease: "none",
      scrollTrigger: {
        trigger: ".wrapper",
        pin: true,
        scrub: 1,
        end: () => `+=${maxWidth}`
      }
    });

     

    I'm not really sure if my code is optimized so critics welcomed !

    • Thanks 1
  2. Hi guys !

     

    I'm looping on an array of elements to toggle a class on these elements each time they enter the viewport but I don't think my code is optimized. Is there anything I could do to simplify this :

     

    const buttons = gsap.utils.toArray('.btn');
    buttons.forEach((btn) => {
      gsap.from(btn, {
        scrollTrigger: {
          start: 'top bottom',
          end: 'bottom top',
          trigger: btn,
          onEnter() {
            btn.classList.remove('disable');
          },
          onLeave() {
            btn.classList.add('disable');
          },
          onEnterBack() {
            btn.classList.remove('disable');
          },
          onLeaveBack() {
            btn.classList.add('disable');
          }
        }
      });
    });

     

    Thanks for your help

  3. Hello there,

     

    I'm having trouble pausing my Timeline. When I add paused:true it still plays the animation. Here is my code :

     

    const _this = this;
    this.animationIsPlaying = false;
    this.menuActive = false;
    
    // OPEN
    const tlOpen = new TimelineMax({
      paused: true,
      onComplete() {
        _this.animationIsPlaying = false;
      }
    });
    tlOpen.fromTo('.menu__bg', 1.2, {
      height: '0'
    }, {
      height: '100%',
      ease: Expo.easeInOut,
      force3D: true
    }).fromTo('.menu__container', 0.6, {
      y: 80,
      opacity: 0
    }, {
      y: 0,
      opacity: 1,
      ease: Power1.easeOut,
    }, '-=0.6');
    
    // CLOSE
    const tlClose = new TimelineMax({
      paused: true,
      onComplete() {
        _this.animationIsPlaying = false;
        TweenLite.set('.menu', {
          autoAlpha: 0
        });
        document.body.classList.remove('menu-active');
      }
    });
    tlClose.fromTo('.menu__container', 0.6, {
      y: 0,
      opacity: 1
    }, {
      y: 80,
      opacity: 0,
      ease: Power1.easeOut,
    }).fromTo('.menu__bg', 1.2, {
      height: '100%'
    }, {
      height: '0',
      force3D: true,
      ease: Expo.easeInOut
    }, '-=0.8');
    
    $('.btn-menu').on('click', (e) => {
      e.preventDefault();
    
      if (_this.animationIsPlaying) {
        return;
      }
    
      if (_this.menuActive) {
        _this.animationIsPlaying = true;
        _this.menuActive = false;
        tlClose.play(0);
        e.target.classList.remove('active');
      } else {
        _this.animationIsPlaying = true;
        _this.menuActive = true;
        TweenLite.set('.menu', {
          autoAlpha: 1
        });
        tlOpen.play(0);
        document.body.classList.add('menu-active');
        e.target.classList.add('active');
      }
    });

     

    My solution for the moment is to separate it like this :

     

    openMenu() {
      const _this = this;
    
      const tlOpen = new TimelineMax({
        onComplete() {
          _this.animationIsPlaying = false;
        }
      });
      tlOpen.fromTo('.menu__bg', 1.2, {
        height: '0'
      }, {
        height: '100%',
        ease: Expo.easeInOut,
        force3D: true
      }).fromTo('.menu__container', 0.6, {
        y: 80,
        opacity: 0
      }, {
        y: 0,
        opacity: 1,
        ease: Power1.easeOut,
      }, '-=0.6');
    }
    
    closeMenu() {
      const _this = this;
      const tlClose = new TimelineMax({
        onComplete() {
          _this.animationIsPlaying = false;
          TweenLite.set('.menu', {
            autoAlpha: 0
          });
          document.body.classList.remove('menu-active');
        }
      });
      tlClose.fromTo('.menu__container', 0.6, {
        y: 0,
        opacity: 1
      }, {
        y: 80,
        opacity: 0,
        ease: Power1.easeOut,
      }).fromTo('.menu__bg', 1.2, {
        height: '100%'
      }, {
        height: '0',
        force3D: true,
        ease: Expo.easeInOut
      }, '-=0.8');
    }
    
    menuInit() {
      const _this = this;
      this.animationIsPlaying = false;
      this.menuActive = false;
    
      $('.btn-menu').on('click', (e) => {
        e.preventDefault();
    
        if (_this.animationIsPlaying) {
          return;
        }
    
        if (_this.menuActive) {
          _this.animationIsPlaying = true;
          _this.menuActive = false;
          _this.closeMenu();
          e.target.classList.remove('active');
        } else {
          _this.animationIsPlaying = true;
          _this.menuActive = true;
          TweenLite.set('.menu', {
            autoAlpha: 1
          });
          _this.openMenu();
          document.body.classList.add('menu-active');
          e.target.classList.add('active');
        }
      });
    }

     

    Thanks for your help

  4. So your code suggestions didn't work : still getting the errors.

     

    Regarding tree shaking, I'm sorry I read the documentation but I don't understand what it is. Plus, I'm using webpack 2 & gulp 4 in my workflow so it's a little difficult to follow the examples.

     

    BUT

     

    Your thoughts regarding old UMD files and ES6 helped me. I solved my problem doing this :

     

    import { TweenMax } from 'gsap';
    import ScrollToPlugin from 'gsap/umd/ScrollToPlugin';

     

    Thank you very much !

    • Like 2
  5. Hello community !

     

    I'm having trouble importing plugins. I use the gsap npm doc with gsap v2.0.2.

     

    When I use this :

     

    import { TweenMax } from 'gsap';

     

    TweenMax works perfectly fine.

     

    But when I want to use the scrollToPlugin with this for example :

     

    TweenMax.to('.my-div', 2, { scrollTo: { y: 'max' } });

     

    I do this : 

     

    import { TweenMax, ScrollToPlugin } from "gsap/TweenMax";
    
    or
    
    import { TweenMax, ScrollToPlugin } from "gsap/all";

     

    I get errors saying :

     

    TweenMax.js:13 Uncaught SyntaxError: Unexpected identifier
    
    or
    
    all.js:13 Uncaught SyntaxError: Unexpected identifier

     

    Thank you very much for your help !

×