RyanIndustries8

ScrollMagic animation file casing compiling error in Angular

Recommended Posts

I have an Angular 5 app that I'm currently implementing scroll animations using the GreenSock.js library as well as ScrollMagic.js. One really important file for some reason it will not let me include in the project without errors called

scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js

When I attempt to import this file into the project I receive a list of errors-

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Error: Can't resolve 'TimelineMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
 @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
 @ ./src/app/home/home.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
errors @ client:167
onmessage @ socket.js:41
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:883
SockJS._transportMessage @ sockjs.js:881
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2957
wrapFn @ zone.js:1166
ZoneDelegate.invokeTask @ zone.js:421
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1517
globalZoneAwareCallback @ zone.js:1543
client:167 

./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
    Module not found: Error: Can't resolve 'TweenMax' in '/Users/RyanIndustries8/Documents/Projects/WebSites/megakyle83/node_modules/scrollmagic/scrollmagic/uncompressed/plugins'
     @ ./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js 31:2-61
     @ ./src/app/home/home.component.ts
     @ ./src/app/app.module.ts
     @ ./src/main.ts
     @ multi ./node_modules/webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

Uncaught ReferenceError: tween is not defined
    at HTMLDocument.eval (home.component.ts:34)
    at l (scripts.bundle.js:2)
    at c (scripts.bundle.js:2)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
    at ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2025)

This is what I have in my component.ts file-

import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
import * as $ from 'jquery';
import { TweenMax, TimelineMax, ScrollToPlugin } from 'gsap';
import * as ScrollMagic from 'ScrollMagic';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators';

declare var $:any;
declare var TweenMax: any;
declare var TimelineMax: any;
declare var tween: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  // intro: object [];

  constructor(private router: Router) {

  }

public  ngOnInit() {
    $(document).ready(function() {
      //Init Scroll Magic
      var controller = new ScrollMagic.Controller();

      var scrollScene = new ScrollMagic.Scene({
        triggerElement: 'a.leanArrow',
        triggerHook: "onLeave"
      })
      .setTween()
      .addIndicators({
        name: 'fade scene',
        colorTrigger: 'orange',
        colorStart: '#0000ff'
      })
      .addTo(controller);

      controller.scrollTo(function (newpos){
        TweenMax.to(window, 0.5, {scrollTo: {y: newpos}});
      });

      $(document).on("click", "a[href^='#']", function(e) {
        var id = $(this).attr("href");
        if($(id).length > 0) {
          e.preventDefault();

          controller.scrollTo(id);

          if (window.history && window.history.pushState) {
            history.pushState(", document.title, id");
          }
        }
      });

    //loop through each img
    $('img').each(function() {
    //build scene
    var ourScene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook: 0.6
  })

  .setClassToggle(this, 'fade-in')
  .addIndicators({
    name: 'fade scene',
    colorTrigger: 'black',
    colorStart: '#ff0000'
  })
  .addTo(controller);
  });

    //Manage animatedMenu
    var animatedMenu = new ScrollMagic.Scene({
    triggerElement: 'section',
    triggerHook: 0.1
  })

  .setClassToggle('#animatedMenu', 'fade-in')
  .addIndicators({
    name: 'menu scene',
    colorTrigger: 'purple',
    colorStart: '#00ff00'
  })
  .addTo(controller);
}
}

Does anyone know how to fix this issue with the animation.gsap.js file in Angular?

Share this post


Link to post
Share on other sites

Unfortunately we didn't create ScrollMagic and it sounds like the issue is there. Perhaps file an issue on the ScrollMagic Github repo? 

 

I wish I had a better answer for you. We just try to keep these forums focused on GSAP-specific questions since that's certainly in our wheelhouse. :)

Share this post


Link to post
Share on other sites

No problem at all. Good luck with the project. Don't hesitate to ask about anything GSAP-specific here. Happy to help. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.