Search the Community

Hi Forum, i'm having troubles refreshing the scrolltriggers in my angular project. So when the site is loaded, everything works fine, but when i resize the video in the container i not perfectly aligned anymore. I've set up a minimal demo on stackblitz: Stackblitz Demo EDITNOTE: changed from codesandbox to stackblitz due to sharing issues see: app/src/pages/home/home.component.ts as you can see, i tried some solutions I found on here the forums like invalidateOnRefresh and ScrollTrigger.refresh(true), but none of these work. Desired behaviour after resize: Actual behaviour after resize: I appreciate any help/hint/idea Thank you!

Hello, please provide an example or a small explanation of how to use GSDevTools in an Angular component . I don't know how to add GSDevTools to a demo project, but I tried to create a minimal component to make it easier for you to help me advise you on how to properly use GSDevTools.create() in an Angular component.

I've been trying to implement Gsap with ionic & angular and it seems like just don't work https://lampdigitalcol.web.app/666 https://stackblitz.com/edit/gsap-scroll-trigger?file=src/app/app.component.html Does anyone have any idea of why is this happening?

Hey guys, I am using gsap for the first time in Angular and was trying the Scrolltrigger. In my localhost all works fine with this code: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; ngOnInit(): void { // GSAP Animations gsap.registerPlugin(ScrollTrigger); this.ScrollAnimations(); } ScrollAnimations() { document.querySelectorAll('.readmore-block').forEach((box) => { const scrollBox = gsap.timeline({ scrollTrigger: { trigger: box, start: 'top bottom', markers: false, scrub: 1, end: 'top center', }, }); scrollBox.from(box, { opacity: 0 }); }); } The boxes faded in nicely but now we come to my problem. I use "ng build --prod" to generate my project and loaded it on my server. If I now look on my page, there isn't any animation and I got the following error in console: Invalid property scrollTrigger set to {trigger: p.readmore-block.fadeIn.ng-tns-c45-3, start: "top bottom", markers: false, scrub: 1, end: "top center"} Missing plugin? gsap.registerPlugin() Can anyone help me out? Greetings, Niklas

It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can't solve it by my self. 2) when i switch route for few times all pages animation start working, but it did not work when i refresh and switch route at first time it did not work, then i switch routes few time than animation start working. Contact: https://api.whatsapp.com/send?phone=919429011743&text=HI&source=&data=&app_absent= Please contact me if you know the solution.

Hello, Has anybody worked out how to perform Page/Router transitions with Angular and GSAP Thanks a lot

I want to do scroll down animation using GSAP ScrollTrigger in my Angular project like this . https://codepen.io/sanjuu01/pen/vYLmPPV?editors=1010 I tried this but this is not working. I don't know where i did a mistake. How to solve this import {Component, HostListener, OnInit } from '@angular/core'; import 'gsap'; import {TimelineMax} from 'gsap/gsap-core'; import Draggable from 'gsap/Draggable'; import ScrollTrigger from 'gsap/ScrollTrigger'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { scrollBox = new TimelineMax({paused: true, reversed: true, scrollTrigger: { trigger: '.box', pin: true, start: 'top top', end: 'bottom bottom', markers: true, toggleActions: 'play none none reverse', } }); constructor() { } ngOnInit() { this.scrollTgr(); gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin); } scrollTgr() { this.scrollBox.from('.box', { y: 30, opacity: 0 }); this.scrollBox.to('.box', { y: 0, opacity: 1 }); this.scrollBox.play(); } } https://stackblitz.com/edit/angular-scroll-trigger?file=src%2Fapp%2Fapp.component.ts

Hello Community, I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this? Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here. bottle.svg

Hello everyone I'm getting an error from gsap-core.js when i try to use gsap with angular 9. I have used gsap with angular 7 but now I am using angular 9 and getting this error: detail: angular.json: js files and directories: app.component.js: menu.component.js: and using: . what is the problem I didn't understand. How can i solve this problem. please help me. thnx a lot

I'm currently working on a project I want to use smooth scroll for. To do so I decided to use @OSUblake's codepen. Since I want a horizontal scroll, I changed the direction from: TweenLite.set(this.scroller.target, { y: -this.scroller.y }); to: TweenLite.set(this.scroller.target, { x: -this.scroller.x }); ..and set the body's height according to the scroll-container's width, not height. - It kind of works, but it seems, that this.scroller.x (originally this.scroller.y) and the container's width don't match, since it "overscrolls". How so and is there a way to implement it correctly? I created a link to additionally visualize the issue: https://vibeitin.firebaseapp.com/

I'm currently trying to implement a smooth scroll just like @OSUblake's smooth scroll. https://codepen.io/magiix/pen/MWwbmMV As for my content I solely have some images and some text. These images and texts are being fetched asynchronously, as soon as the data is set I try to resize the body to make the smooth scroll work for all of its content: doResize() { this.scroller.scrollRequest++; this.requestId = null; this.scroller.resizeRequest = 1; this.requestId = requestAnimationFrame(this.updateScroller.bind(this)); } This works fine. But somehow the text is still causing some minor height problems, not much but there's still some inset not showing all of the body's content - not always, but moste of the times. Removing the text solves the problem, but that's obviously not an option. My text component: <div class="row m-0"> <div class="col p-0"> <h1 class="title-container"> {{title}} </h1> </div> <div class="col p-0"> <p>{{text}}</p> </div> </div> Removing p solves the problem. Calling doResize() after a few second does also help, but I want it to have the correct height from the very start. BTW changing p's line height etc. does also affect the inset's size hiding some content. Any suggestion how to prevent this from happening? EDIT: After removing the custom font, everything works as well - how so?

To implement a smooth scroll I used TweenLite.set{.. within my code. Serving the project works fine without any errors. But as soon as I try to build the project using ng build, it throws following error: How so? import { TweenLite } from 'gsap'; ... TweenLite.set(this.scroller.target, { rotation: 0.01, force3D: true }); "dependencies": { "@angular/animations": "~8.1.2", "@angular/common": "~8.1.2", "@angular/compiler": "~8.1.2", "@angular/core": "~8.1.2", "@angular/fire": "^5.2.3", "@angular/forms": "~8.1.2", "@angular/platform-browser": "~8.1.2", "@angular/platform-browser-dynamic": "~8.1.2", "@angular/router": "~8.1.2", "@types/gsap": "^1.20.2", "bootstrap": "^4.4.1", "firebase": "^7.6.1", "gsap": "^3.1.1", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" }

I just want to share to fellow Angular Developers my GSAP workflow. Might come in handy. I use service for my GSAP engine and share it to any components who needs or wants it. Here's an example of simple fading animation. You can expand from these. npm i gsap gsap.service.ts: import { Injectable } from '@angular/core'; import { gsap, Power2, Elastic } from 'gsap/all'; @Injectable({ providedIn: 'root' }) export class GsapService { /*---=| GSAP v3 Animation Engine |=---*/ /*--=| Fade From |=--*/ public fFadeFrom(e, tym, alfa, dlay) { gsap.from(e, { duration: tym, opacity: alfa, ease: Power2, delay: dlay }); } } any.component.ts: import { Component, OnInit } from '@angular/core';; import { GsapService } from 'src/services/gsap.service'; @Component({ selector: 'app-any', templateUrl: './any.component.html', styleUrls: ['./any.component.scss'] }) export class AnyComponent implements OnInit { constructor(private _gsapService: GsapService) { } // inject service ngOnInit() { this.fOpeningAnim(); } public fOpeningAnim() { const anim = this._gsapService; const mainContainer = '#opening-container'; anim.fFadeFrom ( mainContainer, 1, 0, 1 ); }

Hello! I am new to GSAP and I started angular project with gsap 2, I have issue with DrawSVGPlugin, on my LocalHost I have setup animation with drawsvg, it is working as expected, but after production build and deploy, this lines stoped to drawing and just loaded http://prntscr.com/q5r0jc Here is link to my server http://185.233.116.112/ and I have also attached GIF from my LocalHost. I hope someone can advice how I can find reason or any way to debug it since I don't have any errors. Best regards

how can i get access to the coords when dragging a div in angular using gsap draggable ?

Hello, i building my first angular app. I don't know how to load a library. Please would anyone help me how can i import GSAP into angulare and how to work with it in .ts files? I tried a few tutorials but without success. This is proto. of my app.. its basic html with GSAP anims svg and i try it build it like real web aplication . http://rs3.coshoot.cz/

Greetings Greensock community I have a "simple" question, which i cannot for the life of me figure out on my own. In Angular, i have several methods in my component, it could be "closeEverything()", normally i call such function with "this.closeEverything()". Now, when i try to call such method in a TweenLite.to onComplete callback, it says undefined function. So far so good. Greensock does not know anything about the Angular scope, and i reckon Angular does now know anything about the Greensock scope. Now from what i have read, i might be able to change the scope Greensock uses in the onCompleteScope property, but i have not been able to make it work. Does anyone have an example, where out-of-scope functions are being called in Tween callbacks? What is it i am missing, i feel like a complete newbie again, trying to implement this otherwise awesome library into my existing Angular application. /Balslev

Hello, I'm facing some issues with MorphSVGPlugin. I want to use it on the index.html file of my Angular 6 project. The problem is that if I import the file in the script section of my angular.json it breaks the other scripts. I have tried to import it directly on the file with the <script> tag but Angular is not able to find it. Is there any way to use it on index.html? Thanks!!!

Hi All, I am using ScrambleTextPlugin and MorphSVGPlugin in component: import ScrambleTextPlugin from 'gsap/ScrambleTextPlugin'; import MorphSVGPlugin from 'gsap/MorphSVGPlugin'; Problem 1: The animation only happens if I console.log the versions of plugins in ngOnInit console.log(ScrambleTextPlugin.version, MorphSVGPlugin.version); Problem 2: After deploying the app to firebase, it throws TypeError: Uncaught TypeError: Cannot set property '_autoActivated' of undefined at Object.zUnb (main.1c91b1d089cbaf940e97.js:formatted:34594) /* In the bundled file (formatted), I found following lines related to _autoActivated : 34135: qh = Yc.f.TweenMax 34593: cp = qh 34594: cp._autoActivated = [Vh, jh, Bh, zh, ap, Uh, Yh, Yc.f.Back, lp, Yc.f.Bounce, Yc.f.RoughEase, Yc.f.SlowMo, Yc.f.SteppedEase, Yc.f.Circ, Yc.f.Expo, up, Yc.f.ExpoScaleEase]; */ This is the link to app on Firebase. The project runs fine on localhost. Typical Developer Life. gsap: ^2.0.0 firebase: ^5.0.4 angularfire2: ^5.0.0-rc.10 @angular/core: ^6.0.3

0down votefavorite 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?

Hey there! First thing, dope library. I just started learning it not too long ago and it's so much fun, really sky-rocketed my front end development. Now the problem that I'm having is that I'm trying to make a mobile first responsive site for a friend of mine, but my menu animation is not working when the screen resolution is below the media query requirement. This is my typescript code of the animation. let width = $(window).width(); if(width > 600){ this.menuAnimation .to(menuArea, .35, {right: '0px'}, 'open') .addPause() .to(menuArea, .35, {right: '-300px'}, 'close') .call(()=>{ this.menuAnimation.restart(); this.menuAnimation.pause(); }); } else if(width < 600){ this.menuAnimation .to(menuArea, 0, {right: '0vw'}, 'open') .addPause() .call(()=>{ console.log('open'); }) .to(menuArea, 0, { right: '-100vw'}) .addPause() .call(()=>{ console.log('close'); this.menuAnimation.restart(); this.menuAnimation.pause(); }); } This is the site so far full screen with the open and closed menu (the width > 600 animation). Then you click the x and it finishes the animation after the first pause. But this is what's happening on mobile when I click the hamburger menu. If it's hard to see, the 'open' 'close' console logs show up when you click the hamburger menu. It plays the whole animation without the pauses. And beyond that, when I click the menu again, the animation doesn't fire, unlike when it's full screen. Can anybody point me in a direction? -Regards

Good morning, I'm making a project with Angular 5 and I've imported GSAP along with TimelineMax but I can't seem to get CustomEase to work. The terminal doesn't give me errors but when I load the page in the browser I get the "Error: CustomEase is not defined" Can someone explain me the exact procedure to import and use CustomEase? Maybe I'm missing something.

Hi there, i want to draw a circle in an Angular App. This Codepen works fine ( sorry i'm not that crack to mock an Angular app in Codepen), when i use that code in Angular, i suspect the DrawSVGPlugin is not correct imported, though i got no errors, and the changes to the stroke-colors are working; it does not to be a problem with scrollmagic either. the start event fires correctly. What do i wrong? is there anything i overlooked ? how can i log or see if DrawSVG is working? i'm not that familiar with angular(version 5). Help is really appreciated //package.json "gsap": "file:src/app/res/vendor/gsap/src/uncompressed", // animation package / Homepage Component import 'gsap'; import * as DrawSVGPlugin from 'gsap/plugins/DrawSVGPlugin';// i can comment that out, same behaviour -.- import 'imports-loader?define=>false!animation.gsap'; // needed due to bug in ScrollMagic import ScrollMagic from 'ScrollMagic'; import 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; // code in Hompage.component.ts // ... this is wrapped in an window.load event since the circle path is inside a child component... // set duration on last element, so it will have an end event und start scrolling again const duration: number = (i === this.ao.length - 1) ? ownHeight : 0; const scene: any = new ScrollMagic.Scene({ triggerElement: el, duration: duration, offset: -triggerHeight }) .setPin(el) .addTo(smCtlr); // if you need trigger and indicators if (GlobalVariable.DEBUG) { scene.addIndicators(); } scene.on('start', (e) => { const circl = el.querySelector('.pathR'); TweenMax.set(circl, { DrawSVG: '0%' }); TweenMax.fromTo(circl, 5.25, { drawSVG: 0,stroke: '#ff0000' }, { drawSVG: '0% 100%', stroke: '#00ff00', ease: Power2.easeInOut }).play(); console.log(TweenMax.isTweening(circl)); });

I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel