Jump to content
Search Community

Why onRepeat function in tweenMax works only once?

iyaroslav 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

  • 4 months later...

I have the same problem with Angular2 version 2.1.0 and gsap 1.19.0

 

changePhoto() is call once.

 

fusee.component.ts code is here :

import { Component, Inject, OnInit } from '@angular/core';
import { FirebaseApp } from 'angularfire2';



@Component({
  selector: 'app-fusee',
  templateUrl: './fusee.component.html',
  styleUrls: ['./fusee.component.css']
})
export class FuseeComponent implements OnInit {

  photoUrl: string;

  photoIndice = 0;
  fb: any;
  tl: any; // = new TimelineMax({ repeat: -1, onRepeat: this.changePhoto() });

  constructor( @Inject(FirebaseApp) firebaseApp: any) {

    this.fb = firebaseApp;
    this.tl = new TimelineMax({ repeat: -1, onRepeat: this.changePhoto() });

  }

  ngOnInit() {
    this.tl.from('.cloud', 1, { alpha: 0 })
      .to('.rocket-wrapper-2', 3, { y: -400, ease: Expo.easeIn })
      .to('.cloud', 3, { attr: { cy: 185 }, ease: Expo.easeIn }, '-=3')
      .set('.cloud', { clearProps: 'all' })
      .set('.rocket-wrapper-2', { y: 450 })
      .to('.rocket-wrapper-2', 4, { y: 0, ease: Elastic.easeOut.config(0.5, 0.4) })
      .to('.trail-wrapper-2', 2.5, { scaleX: 0.5, scaleY: 0, alpha: 0, ease: Expo.easeOut }, '-=2.0');

  }

  changePhoto(): void {
    let nomPhoto;
    if (this.photoIndice === 0) {
      nomPhoto = 'Photo_007.jpg';
      this.photoIndice++;
    } else {
      nomPhoto = 'Photo_008.jpg';
      this.photoIndice--;
    };
    console.log('I need a ' + nomPhoto + new Date());

    const storageRef = this.fb.storage().ref().child('photos/' + nomPhoto);
    storageRef.getDownloadURL().then(url => this.photoUrl = url);

  }

}
Link to comment
Share on other sites

Hi lauren,

 

Welcome to the GreenSock forums. 

It is always best to supply a simple demo, preferably without any Angular code which is likely unrelated to the problem.

From what I can see the solution for you would be the same.

 

change:

this.tl = new TimelineMax({ repeat: -1, onRepeat: this.changePhoto() });
to
this.tl = new TimelineMax({ repeat: -1, onRepeat: this.changePhoto});
 
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...