[Hover on buttons]

Perfect @PointC, thanks a lot!

 

Vincent

[Hover on buttons]

Hello!

 

I'm trying to make a simple animation on each buttons on a page, but I don't understand what I'm doing wrong.

I just need to make a "rotator" with the span : go from center to top, then, go from bottom to center.

 

Any ideas?
Thanks a lot!

Vincent

See the Pen yLRBWym by pit07 (@pit07) on CodePen

[Infinie Scrolling Text]

@Rodrigo : you're the best. It's perfect!

 

I didn't know this syntax with the "<"

Thanks a lot!

 

Vincent

[Infinie Scrolling Text]

Hi everybody!

 

I'm trying to do a simple animation... but it's complicated

 

 

 

The code is simple:

<div class="rotator">
     <span class="keyword">DESIGN</span>
     <span class="keyword">DIGITAL</span>
</div>

I looked other examples on gsap forums, but i always have a problem with the "infinite", and I can't control the dwell time of each word

 

What am I doing wrong?

Thanks a lot!

 

Vincent

 

 

See the Pen GRXVQPV by pit07 (@pit07) on CodePen

[GSAP with Nuxt: this.$gsap unknown in document.addEventListener]

Oh thanks a lot!

I'll look into it, thanks a lot

 

Edit : it's perfect, thanks a lot @Rodrigo !

[GSAP with Nuxt: this.$gsap unknown in document.addEventListener]

Oh thanks a lot!

I'll look into it, thanks a lot!

 

Edit : it's perfect, thanks a lot @Rodrigo !

[GSAP with Nuxt: this.$gsap unknown in document.addEventListener]

Hi @Rodrigo

 

46 minutes ago, Rodrigo said:

It seems to me that you're using the syntax for accessing some Nuxt/GSAP plugin. Are you 100% sure that you installed the plugin and added it to your Nuxt config file?

 

No no, i'm just using the .set() and to.(), no plugin, in a Nuxt v2 application.

I saw TweenMax was deprecied, so i tried to adapt this codepen with gsap.

 

I'm just trying to follow the mouse, but I'm not very good at it 😅

[GSAP with Nuxt: this.$gsap unknown in document.addEventListener]

Hi everybody!

 

I have an issue with this.$gsap on Nuxt.
It's unknow when i use it on a document.addEventListener:

 

 mounted(){
      const cursor = document.querySelector('.cursor')
      const follower = document.querySelector('.cursor-follower')
      document.addEventListener("mousemove", function(e, this.$gsap) {
        this.$gsap.to(cursor,{
          x: e.pageX,
          y: e.pageY
        })
      })

 

=> Uncaught TypeError: Cannot read properties of undefined (reading 'to')

 

 

I tried this too:

 

mounted(){
  this.$gsap.to({}, 0.016, {
        repeat: -1,
        onRepeat: function() {
          posX += (mouseX - posX) / 9;
          posY += (mouseY - posY) / 9;

          this.$gsap.set(follower, {
              css: {
              left: posX - 12,
              top: posY - 12
              }
          });

          this.$gsap.set(cursor, {
              css: {
              left: mouseX,
              top: mouseY
              }
          });
        }
      });
 }

 

And the this.$gsap on the OnRepeat function is undefined (=> Uncaught TypeError: Cannot read properties of undefined (reading 'set')

 

Any ideas?

Thanks a lot!

 

(i'm trying to use this : 😞

See the Pen yvxZjO by karlovidek (@karlovidek) on CodePen