Jump to content
Search Community

Updating height values on window resize

zofia test
Moderator Tag

Recommended Posts

Hi,

I need advice on how to create responsive timelines (+ scrollTrigger).

In my animation, I want to use different target heights (gsap.to) depending on the width of the browser window.
In my case, I have a divider that should be higher on mobile and lower on desktop devices (after the animation is finished). These values should update when someone resizes the browser window. I tried to do this (codepen included) but when I resize the browser window, the animation behaves strange. 
I'm not sure if I should kill the animation and then recreate it... Ah, my head is tired today, please help :)


Thank you!

See the Pen wvPrEqL?editors=1010 by zofiaifoz (@zofiaifoz) on CodePen

Link to comment
Share on other sites

Hi zofia,

 

You can create your ScrollTriggers/animations inside matchMedia with the sizes you want...

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

Or you can put invalidateOnRefresh: true in your ScrollTriggers...

 

Quote
invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

And then use functions for values that need be dynamic.

 

.to(".b1", {
   height: () => window.innerWidth < 900 ? "40vw" : "15vw",  
   duration:1
 })

 

  • Thanks 1
Link to comment
Share on other sites

Yesterday I noticed that when I navigate from one page to another in my svelte app using ScrollTrigger.matchMedia and then resize the browser window, I see warnings in the console: "GSAP target not found"
@OSUblake could you help me to get rid of them? :) What am I doing wrong?

 

Here is a demo:
https://stackblitz.com/edit/sveltejs-gsap-220222-b

npm run dev

 

Any help will be appreciated! 🙏

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