Need help with executing different animations for different screen sizes [ Nextjs, Tailwind, TypeScript ]

[Hache]

Hello, I've been trying to create a codesandbox with typescript, Nextjs and tailwind but every time I get a different error so after a few hours I gave up and I'm using the nextjs + gsap template from greensock. Here I can't import the SplitText(or others like ScrollTrigger) plugin so It's commented(tried default and dist import), as it's the one giving me problems with a hook.

I'm trying to use a hook to get the window size so I can trigger different timelines with animations for mobile/tablet/desktop, it's the following one:

https://usehooks-ts.com/react-hook/use-window-size ( I'm using the react version, as I couldn't install typescript)
When I use the hook, the SplitText doesn't display, I remove the hook and it displays correctly.
 
Any recommendations on how to do this on nextjs using some hook like the one linked?

Also in the about page, for example, Is there a way to make the box start rotating infinitely as soon as the scale animation starts? Currently it scales in then starts rotating. Also trying to make the boxes with the class scroll-item fade in from the bottom as you scroll down, will keep investigating.

https://codesandbox.io/s/eloquent-grothendieck-zttkp?file=/pages/index.js

Anyone has a nice demo of gsap with next?  page transitions/best practices and similar examples? Thanks, appreciate the help!

[OSUblake]

Hi Hache,

 

You can use ScrollTrigger on codesandbox. Just import like you normally would.  And there's a way to do SplitText on codesandbox, but that's not important right now.

 

First, window resize is probably not the best approach to handling media queries. It usually better to media query listeners as they won't constantly fire.

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

 

So I would totally skip that window size hook. If I wanted to use window resize for my animations, which I'm not suggesting right now,  I would just use it directly inside my effect. Also note how I have an empty array at the end of the effect. You were missing that, which might create issues when your state changes.

 

useLayoutEffect(() => {
  
  function onResize() {
    
  }
  
  window.addEventListener("resize", onResize);
  
  return () => {
    window.removeEventListener("resize", onResize);
  }
}, []);

 

Since it sounds like you are using ScrollTrigger, it can handle media queries for you. See matchMedia and clearMatchMedia. You can create whatever animations you want inside of it.

 

For routing examples, which may not all be GSAP related, check out these.

 

 

 

 

 

 

[Hache]

@OSUblake Thanks for your answer.  

I tried importing ScrollTrigger as I have in my project and got an error trying to load the module on codesandbox(same as SplitText).

Didn't know about matchMedia, I see you can use timelines inside matchMedia, tomorrow I will try to implement different timelines using this post as an example. 

I'll update this post If I have more issues, as I said, thanks for your help!

Cheers.

[Hache]

Hi, I'm having some issues still. 

I'm doing my animations inside a useLayoutEffect but it's triggering before my fonts load from the google cdn(testing in slow 3g connection), so it starts animating with default fonts and halfway through it loads the fonts, so it looks sketchy.

 

Thought of just using fonts locally in my project to see if they load earlier or using a event listener but not sure how to set it up with ScrollTrigger or the correct way to do it.

 

const el = useRef()
const q = gsap.utils.selector(el) // Outer section
// Formatting is not great here, sorry for that

useLayoutEffect(() => {
	gsap.registerPlugin(SplitText)
	gsap.registerPlugin(ScrollTrigger)
	ScrollTrigger.matchMedia({
		// mobile
		'(max-width: 639px)': function () {
		},
		// tablet
		'(min-width: 640px) and (max-width:1279px)': function () {
		},
		// desktop
		'(min-width: 1280px)': function () {
			const intro = new SplitText(q('.header'), { type: 'chars' })
			const desktopTimeline = gsap
				.timeline({ defaults: { duration: 1.5, ease: 'power1' } })
				.from(q, { autoalpha: 0, duration: 0 })	
            	// rest of the timeline				
		}
	})
	return () => { ScrollTrigger.kill() }
})

Another issue I have:

I have another page that loads some card components. I want to create a effect like https://scrollrevealjs.org/ where the cards on viewport fade in and then the rest start appearing on scroll. I don't know how/where to setup the scrollTrigger, should I try to set the ScrollTrigger inside the card component so each card has its own ScrollTrigger or on the page that loads the cards? I tried the first, but didn't get it working. Want to use the MatchMedia example, so I can set different settings for each screensize.

 

I would also like to do this for mobile/tablet animations, because currently mi timeline executes completely even if elements are out of viewport. For desktop it's no problem but for mobile, I would prefer to use something like the scrollrevealjs example too.

I would assume all this can be done directly with the ScrollTrigger.isInViewport function

 

I'm looking for help with the first issue and maybe recommendations for tackling the second issue, as I want to experiment a bit more with ScrollTrigger.  I've set up a basic demo of the cards page and the index page, but not sure if I can throttle the network on codesandbox for the font example.

https://codesandbox.io/s/eloquent-grothendieck-zttkp?file=/pages/index.js

 

[GreenSock]

15 hours ago, Hache said:

I'm doing my animations inside a useLayoutEffect but it's triggering before my fonts load from the google cdn(testing in slow 3g connection), so it starts animating with default fonts and halfway through it loads the fonts, so it looks sketchy.

 

You should definitely wait until your fonts load before you do any splitting or initiate ScrollTriggers. 

 

15 hours ago, Hache said:

I have another page that loads some card components. I want to create a effect like https://scrollrevealjs.org/ where the cards on viewport fade in and then the rest start appearing on scroll. I don't know how/where to setup the scrollTrigger, should I try to set the ScrollTrigger inside the card component so each card has its own ScrollTrigger or on the page that loads the cards? I tried the first, but didn't get it working. Want to use the MatchMedia example, so I can set different settings for each screensize.

 

If I understand your goal correctly, sure, you can just loop through your elements and create a ScrollTrigger/animation for each and if it's in the viewport initially it'll fire right away. The others that are outside the viewport can animate when they enter the viewport (or whatever you define in your ScrollTrigger on those animations). 

[Hache]

3 hours ago, GreenSock said:

You should definitely wait until your fonts load before you do any splitting or initiate ScrollTriggers. 

 

If I understand your goal correctly, sure, you can just loop through your elements and create a ScrollTrigger/animation for each and if it's in the viewport initially it'll fire right away. The others that are outside the viewport can animate when they enter the viewport (or whatever you define in your ScrollTrigger on those animations). 

Hi, thanks for your reply!

The problem is, based on the code I posted above, how do I add an eventListener that waits for load? do I wrap all that's inside the useLayoutEffect inside it? Then I assume I have to kill the ScrollTrigger and the eventlistener in the cleanup function.

Thanks!

[Cassie]

Hello @Hache,

 

How to handle font loading is out of the scope of these forums, we try to focus on GSAP-specific questions here.

But maybe this stack overflow post will help - https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded/32292880

 

Good luck!
 

[Hache]

On 2/7/2022 at 12:19 PM, Cassie said:

Hello @Hache,

 

How to handle font loading is out of the scope of these forums, we try to focus on GSAP-specific questions here.

But maybe this stack overflow post will help - https://stackoverflow.com/questions/5680013/how-to-be-notified-once-a-web-font-has-loaded/32292880

 

Good luck!
 

Hi thanks for the link. Cheers!