Reset to initial position removes element

[Karma Blackshaw]

What I am supposed to be doing is to throw the bait, and wait for 3 waves and a fish bites. When the fish bites, the bait, must look as if it was dragged down and then the fisherman gets the bait. However, after getting the bait and starting again, the bait is now gone. All that's left is the bait.

PS: When throwing the bait, the bait must come from 200px above. It works on my PC however, in codepen, I don't know why it does not go 200px above.

 

mounted() {
  this.timeline = gsap.timeline()
},
  
methods() {
	throwBait(e) {
      let vue = this;

      this.animation = this.timeline
        .fromTo(
          [this.lure, this.bait],
          1.3,
          {
            css: {
              left: e.pageX - 25, // 25: Half of lure's width
              top: e.pageY - 200,
              scaleY: 0,
              scaleX: 0,
              visibility: "hidden"
            }
          },
          {
            ease: "elastic.inOut(1, 0.75)",
            css: {
              left: e.pageX - 25, // 25: Half of lure's width
              top: e.pageY,
              scaleY: 1,
              scaleX: 1,
              visibility: "visible"
            }
          },
          0
        )
        .fromTo(
          this.wave,
          2,
          {
            y: "-5",
            width: "0px",
            height: "0px",
            border: "1px solid white",
            opacity: 1
          },
          {
            y: "-=5",
            ease: "Linear.easeNone",
            width: "50px",
            height: "10px",
            border: ".1px solid white",
            visibility: "visible",
            repeat: 2,
            opacity: 0
          },
          1
        )
        .to(
          this.lure,
          1,
          {
            y: "-=5px",
            ease: "Linear.easeNone",
            yoyo: true,
            repeat: 6
          },
          0
        )
        .to(
          this.lure,
          1,
          {
            y: 20,
            ease: "power4.out"
          },
          6
        )
        .to(
          this.lure,
          0.5,
          {
            y: -100,
            ease: "power4.in",
            opacity: 0,
            scale: 0
          },
          6.5
        )
        .then(x => vue.reset());
    },

    reset() {
      this.timeline = gsap.timeline();
      this.timeline.time(0);
    },
}

 

See the Pen zYxXmoQ by karmablackshaw (@karmablackshaw) on CodePen.

[OSUblake]

You've changed properties on the lure, like scale, and opacity. You need to reset those if you want to see it again.

 

It's also better to animate x and y instead of left and top.

 

This is kind of pointless considering you just replaced the timeline with a new one.

reset() {
  this.timeline = gsap.timeline();
  this.timeline.time(0); // <= redundant
},

 

And you don't need to wrap css properties inside a css object.

.fromTo(
          [this.lure, this.bait],
          1.3,
          {          
              left: e.pageX,
              top: e.pageY - 200,
              scale: 0,
              visibility: "hidden"          
          },
          {
            ease: "elastic.inOut(1, 0.75)",          
            left: e.pageX - 25, // 25: Half of lure's width
            top: e.pageY,
            scale: 1,
            visibility: "visible"
          },
          0
        )

 

[Karma Blackshaw]

7 minutes ago, OSUblake said:

You've changed properties on the lure, like scale, and opacity. You need to reset those if you want to see it again.

 

It's also better to animate x and y instead of left and top.

 

This is kind of pointless considering you just replaced the timeline with a new one.

reset() {
  this.timeline = gsap.timeline();
  this.timeline.time(0); // <= redundant
},

 

And you don't need to wrap css properties inside a css object.

.fromTo(
          [this.lure, this.bait],
          1.3,
          {          
              left: e.pageX,
              top: e.pageY - 200,
              scale: 0,
              visibility: "hidden"          
          },
          {
            ease: "elastic.inOut(1, 0.75)",          
            left: e.pageX - 25, // 25: Half of lure's width
            top: e.pageY,
            scale: 1,
            visibility: "visible"
          },
          0
        )

 

Thank you for the tips sir, especially in the css part. Ive read many forums on how to do things and maybe I've read the old ones.

Back on track, the beginning of the the animation sir, I've set the lure and bait from 0 scale to 1. Do I need to use set instead of fromTo to reset the properties of lure and bait, and do I need to set them separately ?

[OSUblake]

31 minutes ago, Karma Blackshaw said:

Ive read many forums on how to do things and maybe I've read the old ones.

 

Maybe. Using a css object used to be required, but that changed many years ago.

 

33 minutes ago, Karma Blackshaw said:

Do I need to use set instead of fromTo to reset the properties of lure and bait, and do I need to set them separately ?

 

You can, although it doesn't look like you are changing the opacity of the bait, so maybe just a set before your fromTo. 

 

this.animation = this.timeline
  .set(this.lure, { opacity: 1, y: -5 }, 0)
  .fromTo(...)

 

 

[Karma Blackshaw]

4 minutes ago, OSUblake said:

 

Maybe. Using a css object used to be required, but that changed many years ago.

 

 

You can, although it doesn't look like you are changing the opacity of the bait, so maybe just a set before your fromTo. 

 

this.animation = this.timeline
  .set(this.lure, { opacity: 1, y: -5 }, 0)
  .fromTo(...)

 

 

The opacity. Thank you sir! I'm very sorry for the stupid question. I'm still new to GSAP and to programming as well. Thank you!