Jump to content
Search Community

animations and gsap.set break on reload (Vue/Nuxt)

JoaoJack test
Moderator Tag

Recommended Posts

Hello,

I have a very simple scrollTrigger animation on an iterated component. 

Everything works fine on fist load. But when I reload the page, nothing works anymore. To test it, I've reduced all my script to gsap.set autoalpha 0, and it's the same : works fine on first load, but disarmed on refresh.

my code excerpt : (sorry it would be a real mess to emulate it on codepen)  :

 

<template>
  <div id="home" class="bg-[#ffffff] relative mx-auto flex flex-col overflow-x-hidden ">
    <div class="flex flex-col mx-auto justify-around items-center  w-full">
         <stories-square-line class="targetX" v-for="(i,indexin stories" :pos="index % 2 !== 0" :key="index" :theme="i.slug" :content="i.content" />
    </div>
   </div>
</template>
 
<script>
 
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'
export default {
 
  mounted () {
     gsap.registerPlugin(ScrollTrigger)
    gsap.utils.toArray('.targetX').forEach((compi=> {
    gsap.set(comp,{autoAlpha:0})
    // gsap.fromTo(comp, {autoAlpha:0},{autoAlpha:1, duration:"2",
    //   scrollTrigger:{
    //     toggleActions: "play complete reverse reset",
    //     trigger: comp,
    //     start: "top window.innerHeight/4",
    //     onEnter: ({progress, direction, isActive}) => console.log(progress, direction, isActive)
    //   }
    // })
  })
  • Like 1
Link to comment
Share on other sites

Hi! Welcome to the GreenSock forum!

 

How do you refresh (and what did you refresh: DOM, variables, page...)? i don't understand hot to test your code.

11 minutes ago, JoaoJack said:

But when I refresh

 

You can create minimal Vue demo in codepen? 

  • Like 1
Link to comment
Share on other sites

Hi JoaoJack,

 

It does not need to be in CodePen, you can use Codesandbox, you should be able to set it up as a normal project.

 

We ask for minimal demo so that we can see the context as there could be so many things influencing the situation that hours would be spent on only trying to figure out what the setup is.

 

I, for one, cannot even imagine what could be causing your issue. Only that there's something wrong on how you are setting the code up.

  • Like 4
Link to comment
Share on other sites

OK, sorry for disturbing, guys.

Getting help when registering to Club Greensock was my #1 motivation, but I don't want, for every question I have, to install on a codepen or codesanbox tailwind, GSAP (but not via CDN, via tgz AND authentification), + nuxt in order to reproduce exactly my issue.

I thought someone could think about the problem without a codepen, maybe detecting a coding error, maybe seeing a step which should not be specified in the mounted() lifecycle hook ? Maybe providing any hints, a path, about DOM behavior on refresh, something ?

I understand this is impossible, nobody's fault but mine.

Link to comment
Share on other sites

Sorry about this pal.

Obviously if any of us were to spot an issue within the code snippet you provided we would point it out!
It's not imperative that you provide a demo, however a lot of issues are incredibly hard to spot without a look at the context the problem is occurring within, and this problem falls into this category.

 

We also don't only offer help to Club GSAP members. These forums are for everyone that needs help.

 

  • Like 5
Link to comment
Share on other sites

Allow me to reiterate that: this is a public forum. Almost everyone that is replying to posts here is doing on their own time out of goodwill.

 

Being a member of the Club Greensock does not change the level of help and support you get. If you want or need support from the makers of GSAP, they offer consultancy services. You can contact them directly and have a conversation about your needs.

 

As for the requests for a demo, that is the minimum asked in the forums as you will be helping people help you to solve your question. As you stated, it takes a significant amount of time to set the environment up, then the conditions, then the logic. Imagine someone who's browsing the forums on their spare time having to do all of that for every question that is posted here.

  • Like 5
Link to comment
Share on other sites

As to what pertains to your question. There are many unknowns.

 

My gut reaction on reading your initial post is that there is something wrong on your setup. There is no reason a page would load work and the on reload not work. When you say your page works on load, do you mean, during your hot-reloading while it is in dev mode? Are there any errors on the console? Why are you using a loop to create an animation that is based on a component from its parent, while appearing to attempt to create one set of animations per instance of the component? Why not put that into the mounted lifecycle of the child component?

  • Like 2
Link to comment
Share on other sites

@JoaoJack first of all, thanks for being a Club GreenSock member! 🙌

 

Like @Dipscom said, this sure sounds like an issue with your local dev setup. Maybe some kind of hot-swapping behavior is causing problems? I'm totally guessing here since we don't have a minimal demo to look at, but I just cannot fathom how or why refreshing the page would actually lead to DIFFERENT GSAP behavior apart from some kind of dev environment hot-swapping or browser plugin or something like that. Once we see a minimal demo, I'm sure we'll be able to offer some better insights. 

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