D.Cus Posted January 4, 2022 Share Posted January 4, 2022 Here is my pen I am having trouble updating the transform values on resize, I have used `invalidateOnRefresh` which I thought would work however it seems to do nothing to my pen what am I doing wrong Thanks in advance See the Pen mdBLJNw by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 Heya! So this only flushes out values from animations associated with that scrollTrigger. 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. e.g. this x value gsap.to(elem, { x: () => willRefresh, scrollTrigger: { trigger: triggerElem, scrub: true } }) However this won't be refreshed because the tween isn't associated with the scrollTrigger, it's just being called when the scrollTrigger updates ScrollTrigger.create({ trigger: triggerElem, scrub: true, onUpdate: () => { gsap.to(anotherElem, { x: () => wontRefresh, }) } }) 1 Link to comment Share on other sites More sharing options...
D.Cus Posted January 4, 2022 Author Share Posted January 4, 2022 Thanks for the info using a different approach I have done it like this but the values still don't seem to refresh on resize: See the Pen vYejzzP by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 Could you possibly elaborate a little more? There's quite a lot to parse in this pen. What behaviour are you expecting and what is it doing? Link to comment Share on other sites More sharing options...
D.Cus Posted January 4, 2022 Author Share Posted January 4, 2022 apologises for the lack of clarity the only values I need to refresh in the pen are in `startEndArr' variable and at the bottom on the js I do reset them within a resize event listener. Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 Thanks for the clarification. Ok so what's happening that's unexpected? Maybe we could take a look at this minified demo to work out what your expected behaviour is vs the outcome? See the Pen eYGrLqy?editors=0110 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
D.Cus Posted January 4, 2022 Author Share Posted January 4, 2022 @Cassie Thanks for the minimised demo, seems applying backgroundColour change to the tween does work when a resize event is applied however just doesn't seem to make changes to my x and y values in the tween in the fromTo here: `.fromTo(svg, { x: () => Math.round(startEndArr[index].startX), y: () => Math.round(startEndArr[index].startY), }, { x: () => Math.round(startEndArr[index].endX), y: () => Math.round(startEndArr[index].endY) }, 0 )` See the Pen MWEGZOb by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted January 4, 2022 Share Posted January 4, 2022 Heya @D.Cus I'm sorry to not be able to help hugely well, but it's not really clear visually what you're trying to achieve so I'm a little at a loss as to what to suggest. The values are definitely refreshing though, maybe it's just not doing what you expect aesthetically? Kapture 2022-01-04 at 15.54.48.mp4 Here's an updated pen with logs. See the Pen bGoMzVw?editors=0011 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
D.Cus Posted January 4, 2022 Author Share Posted January 4, 2022 I can see the values are updating just not passing through or updating the timeline on resize. The logic behind this pen was to match the position each marker (one from within the svg container and the other within each of the sections) as you scroll down the page. Aesthetically it does what it is desired until the user resizes the browser. I am sure it is something relatively simple but just can't wrap my head around what it is Link to comment Share on other sites More sharing options...
GreenSock Posted January 5, 2022 Share Posted January 5, 2022 Howdy, @D.Cus I just checked your CodePen and the values are all updating exactly as I'd expect (including the timeline). I'm curious why you think they're not. Would you mind explaining? Also, keep in mind that getBoundingClientRect() doesn't factor in scroll at all, so I wonder if the "broken" thing is more about your calculations? I didn't have time to try to dissect everything you're doing in there, but I can say for sure that the values in the timeline are updating as expected (well, unless I'm missing something). 🤷♂️ Also, did you know this method exists?: https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates() Link to comment Share on other sites More sharing options...
D.Cus Posted January 5, 2022 Author Share Posted January 5, 2022 @GreenSock thanks for the head ups on the static.convertCoordinates() function I will defiantly try and use this to match each of the markers for each section. @Cassie With regards to the resize issue turns out it was my fault and a quick fix for my pen was to zero the svg overlay before resetting the `startEndArr` variable, I think me using .getBoundingClientRect() does not take into account the transform applied at that time. I think maybe using the motionPathPlugin functions may make things more streamline. Anyway here is my updated code with the quick fix on resize: `window.addEventListener("resize", function () { gsap.set(svg, {x: 0, y:0}) startEndArr = getStartEnd(); ScrollTrigger.refresh(); });` See the Pen VwMdmPJ by darren-ignition (@darren-ignition) on CodePen Link to comment Share on other sites More sharing options...
Ezra Siton Posted January 22, 2023 Share Posted January 22, 2023 New option on GSAP 3.11 (Works like Magic): Quote Responsive animations and ScrollTriggers, here you come! 🥳 gsap.matchMedia() lets you tuck setup code into a function that only executes when a particular media query matches https://greensock.com/docs/v3/GSAP/gsap.matchMedia() 2 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