plastois Posted June 27, 2021 Share Posted June 27, 2021 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 More sharing options...
Solution OSUblake Posted June 27, 2021 Solution Share Posted June 27, 2021 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. 3 Link to comment Share on other sites More sharing options...
plastois Posted June 28, 2021 Author Share Posted June 28, 2021 Few month break from work and i forgot about this simple property... Thank you very much, this is exaclty what i was looking for 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now