Jump to content
GreenSock

D.Cus

ScrollTrigger Update transform values on resize

Recommended Posts

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

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,
    })
  }
})

 

Link to comment
Share on other sites

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

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

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

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

@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

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?
   

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

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

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

@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

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