Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mahmut Demir

Nuxt.js - Trigger a GSAP animation in a visible on screen.

Recommended Posts

I have an index.ts with several components imported. see image:

 

image.png.d1299f30ab99bb8b73deb56265e3331e.png

 

When the component is visible on my screen, i would like to trigger the animation in that specific component "gsapV1".

 

the code looks like this:

 

image.thumb.png.f1bc14a4f9f2864eeacd33e7af01260a.png

 

for now, everytime i refresh the page, the "gsapV1" is already animated. how to trigger the animation when visible on screen?

 

thanks.

Link to comment
Share on other sites

Hi OSUblake,

 

thanks :). But i already use the scrolltrigger, sorry for not mentioning it. its In my index.vue:

image.png.a934c00168d3eb1a956540a1bb00fefb.png

 

the .myGSAP class is in the <gsapV1> tag in the very first picture i uploaded. And in that component i do some gsap magic. So my aim is, when the user scrolls down and reaches the component, the animations should start.

Link to comment
Share on other sites

The code you just posted above isn't going to do anything. Your ScrollTrigger needs to be added to the tl in your scrollAnimation method. 

  • 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.
×