Closed wandri closed 7 years ago
Same issue but with Browserify, I don't understand what I'm doing wrong.
You add animation.gsap.js but import animation.gsap.min.js...
Hi,
I am using this starter https://github.com/AngularClass/angular-starter and if I install gsap, scroll magic and imports-loader
npm install gsap
npm install scrollmagic
npm install imports-loader // this is important
Import Typescript definition from here https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap
(npm install @types/gsap not helps - I don't know why)
In webpack.common.js add
resolve: {
....
alias: {
"ScrollMagicGSAP": "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"
}
},
...
module: {
rules: [
....
{
test: /\.js$/,
loader: "imports-loader?define=>false"
},
.....
It can be used
App.servise.ts
import { Injectable } from "@angular/core";
@Injectable()
export class AppState {
public ScrollMagic : any;
public controller :any;
constructor(){
this.ScrollMagic = require("scrollmagic");
require("scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap");
this.controller = new this.ScrollMagic.Controller();
}
}
home.component.ts
import { Component, OnInit, ElementRef, ViewChild } from "@angular/core";
import { AppState } from "../app.service";
import { TweenMax, TimelineMax } from "gsap";
@Component({
selector: "home",
styleUrls: ["./home.component.css"],
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
@ViewChild("test") test: ElementRef;
constructor(private appState: AppState) {
}
public ngOnInit() {
var scene = new this.appState.ScrollMagic.Scene({
triggerElement: "#trigger",
duration: 60
})
.setTween(TweenMax.to(this.test.nativeElement, 0.5, { y: -40 }))
.addTo(this.appState.controller);
}
}
Please, I am not sure if this is the best practices but it works
Thanks MichalKliment.
does this package still works with angular 8 ?
it is, just managed to actually make it work with GSAP as well.
in your index.html
add the following scripts:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
and in the component you want to use ScrollMagic
just declare it as global in the following manner
declare var ScrollMagic: any;
and since it's from a CDN then shouldn't be any build issues
@DanielNetzer ... Did you tried your solution with Angular 2+ Because I think this will not work
@DanielNetzer you must try to learn Angular or React xD
@BasakKamil @mehemmelbachir - https://github.com/DanielNetzer/gurushots and here you can see the way I use it from the CDN - https://github.com/DanielNetzer/gurushots/blob/master/src/index.html
this is an angular 8 project using GSAP and scroll magic with tweening.
@DanielNetzer your solution works
Hello everyone.
I know this isnt an issue but I need your help.
My problem is simple.
How to implemenent properly ScrollMagic and gsap to an Angular-Cli (2/4) app.
I have installed:
I have added to my .angular-cli.json:
In my component, I have:
And I use in my script.:
TweenMax.to(calculator, 1.5, { scale: 2 })
...And i get the following error:
Cannot read property 'to' of undefined
If I remove the path of TweenMax in angular-cli.json, and I remove the import of animation.gsap.min.js, the following action works.
TweenMax.to(calculator, 1.5, { scale: 2 })
but the next action:
.setTween(TweenMax.to(calculator, 1, { scale: 2 }))
doesnt work and I have this error:So If someone know how to install it properly, that would be great.
Thank you.