Jump to content
Search Community

Issue with width when size change on resize

plastois test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi everyone

On the website, I want to make an animation that looks like someone is typing "hello!" after scrolling to that item. But I'm having trouble resizing the page. When someone opens a page on a small device (in the example codepen breakpoint is set to 1000px) and then resizes the screen to bigger (for example by rotating the iPad or simply resizing the browser window), gsap remembers the old width value and "Welcome" are cut in half. Is there an easy solution for this? 

See the Pen GRmKGxW by plastojs (@plastojs) on CodePen

Link to comment
Share on other sites

  • Solution

I wouldn't use a .from() animation for that. Set the width to 0 in your CSS, and then restructure your HTML so you can animate it .to() a width of "100%". 

 

Also add invalidateOnRefresh to your ScrollTrigger to recalculate values.

 

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.

 

  • Like 3
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...