Jump to content
Search Community

Reset to initial position removes element

Karma Blackshaw test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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
        )

 

  • Like 3
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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(...)

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!

  • Like 1
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...