Jump to content
Search Community

ScrollMagic animation file casing compiling error in Angular

RyanIndustries8 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

Link to comment
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. :)

Link to comment
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.
×
×
  • Create New...