NuxtJS & GSAP - New pages not rendering without GSAP

[kprkr]

Hi all, bit of an odd one today.

So, I have been playing with GSAP (Mainly ScrollTrigger) on my homepage, and it is working great.

I figured it was time to make an "About" page. However, if I am not wanting to use GSAP on that page, I run into an issue.

 

I noticed that my HTML and CSS wasn't rendering, but was showing up in devtools. It would only show up after I visited, and then refreshed the page.

I carried on, and later I decided to add GSAP like so:
 

mounted () {
  this.portfolio()
},
methods: {
      const gsap = this.$gsap

      const q = this.$gsap.utils.selector(this.$el)

      const tl = gsap.timeline()

      gsap.to('body', 0, { css: { visibility: 'visible ' } })

      // hero aniamtions
      tl
        .from('.portfolio-page .work-intro .work-title', 0.75, {
          delay: 0.25,
          opacity: 0,
          y: 10,
          ease: 'Power4.ease'
        }) 
}

and the page now renders everything straight away, without having to refresh (even the stuff not being animated).

What am I doing wrong? Is it something to do with having to kill GSAP upon leaving the homepage? 

[Cassie]

Hey KpKr,

 

I'm a bit confused by this question I'm afraid.

GSAP wouldn't stop DOM content or CSS from rendering. Do you mean that your tween targeting visibility wasn't rendering?

If you could make a minimal demo that would help us to help you.

Also - a little tip.

 

// old tween max duration syntax and css object not needed
gsap.to('body', 0, { css: { visibility: 'visible ' } })

// should be
gsap.set('body', { autoAlpha: true})

 

[kprkr]

Hey @Cassie 

Yeah, it confused me too and is quite a hard one to explain 😅

Im not sure how I could go about making a minimal demo, as im not exactly sure what is happening, just that without GSAP on the secondary page, it is not rendering, but with it, it does. I can however share the site, maybe there is a clue in there if you think that would help at all?

And oh awesome, thanks for that tip, much cleaner!

[Cassie]

'without GSAP on the secondary page it's not rendering'

You're using GSAP to show the content right in that snippet. Without GSAP the content would still be visibility none in the CSS surely?

I'm afraid we can't help debug live sites. You'll need to try and recreate this in a minimal demo.

Reason being - when you made a reduced test case (usually) you figure out the issue along the way. And if you don't it's easier for us to isolate.

[kprkr]

Cassie, i'm an idiot.

GSAP is enabling the visibility to visible, otherwise it is hidden. 

Thank you for pointing out my so obvious mistake 😂

[Cassie]

Ahaha. No worries, we all have those days.

[kprkr]

On 8/27/2021 at 12:32 PM, Cassie said:

 

// old tween max duration syntax and css object not needed
gsap.to('body', 0, { css: { visibility: 'visible ' } })

// should be
gsap.set('body', { autoAlpha: true})

@Cassie I just wanted to follow up on this.

When I swap out the code, it now just gives me

element.style {
	visibility: hidden;
}

Essentially, (even after removing hidden from my css)

[OSUblake]

Did you try...

gsap.set('body', { autoAlpha: 1})

 

Quote

autoAlpha

Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want.

 

[Cassie]

Apologies, typing without thinking.

It's autoAlpha : 1 or 0

autoAlpha's a special property that toggles visibility and tweens opacity.