Rerender animation on viewport change (react)

[noahtrotman]

Hi,

 

I originally posted about spacing out images diagonally in gsap in a separate thread and was able to figure that out. However, I ran into an issue when I added in my entrance animation and am trying to see if there is a better approach. The images on the slider move from top right to bottom left. If you scroll or click the next image they will slide to the next one.

 

My current approach has been to use the browser window size to calculate the position and size of the boxes/images based off of that. I am aware that this approach depends on the window size being the dependency of a useEffect and every time the view port changes it will all re-render and restart. I believe this is also hurting the performance when the images originally slide in and you see it glitch. Would anyone suggest a better approach to achieving the same outcome that wouldn't cause a re-render of the gsap timeline?

 

Steps would be:

1. Open sandbox in new window

2. wait for animation to complete

3. resize viewport

 

Sandbox: https://codesandbox.io/s/blue-dew-bs8bpc

 

Original inspiration: https://franciscamoura.com/

Original post: 

 

[GreenSock]

I'm not much of a React guy, but this question definitely seems less about GSAP and more about React, so these forums may not be the best place to find answers (we try to stay focused on GSAP-related questions), but it looks to me like you keep recreating the timeline on every size change and if you're going to do that, you should probably record the current progress of the previous one, revert() that one, and then use the progress for the new one so it looks seamless. Sorta like this: 

https://codesandbox.io/s/thirsty-haslett-j3ssqr?file=/components/Images.js

 

It does seem like you're making a lot of calls in ways that aren't optimal (not GSAP, I mean how you're engineering things in React), but we just don't have the resources to provide free consulting services for reworking how things are built in React. You're welcome to post in the "Jobs & Freelance" forum if you'd like to hire some help, or contact us directly if you want to explore paid support options. Hopefully the fork above helps get you headed in a good direction, though. Happy tweening!

[noahtrotman]

Hi Jack,

 

Ok, I see what you're getting at. I think the sandbox you provided is a good band aid for now while I look at re-engineering my thought process. 

 

I do have a follow up question. I know its possible to flex the items/images diagonally and I think that's what I ought to look into. My question is, given that I'm using gsap modifiers to create the infinite slider loop outside the viewport. Would the modifiers approach still be possible with animating flex values?

[GreenSock]

1 hour ago, noahtrotman said:

I do have a follow up question. I know its possible to flex the items/images diagonally and I think that's what I ought to look into. My question is, given that I'm using gsap modifiers to create the infinite slider loop outside the viewport. Would the modifiers approach still be possible with animating flex values?

Sorry, I'm not quite sure what you're asking. It'd be best if you could provide a minimal demo to illustrate please. 

[noahtrotman]

Ok, will do. I will post a reply when I recreate the slider using flexbox.

[Rodrigo]

Hi,

 

I don't know if I'd go with flex in this case. That would imply wrap every image in a flex column and animate the image from a specific position to the left as well, or perhaps create a series of flex rows that stack on the X axis and add the animation to move them from right to left.

 

I think is better to just set the position of the images using GSAP and then set the final position for each one and create either a timeline for all the images or a single tween for each and control everything with the wheel event.

 

Also keep in mind that GSAP has the Observer Plugin, super useful for a setup like this and everything gets wrapped nicely in GSAP goodness
https://greensock.com/docs/v3/Plugins/Observer

 

Let us know if you have more questions.

 

Happy Tweening!

[noahtrotman]

Hi Rodrigo,

 

I see what you mean and flexbox is probably not the best approach.

 

I did just come across gsap matchMedia, where both x/y and xPercent/yPercent are being used. I think utilizing that approach and matchMedia may be better as I don't believe there is a one size fits all solution to being responsive. 

Thank you as well for referring me to the Observer plugin, didn't know it existed. 

[noahtrotman]

Hi @Rodrigo,

 

I have a follow up question to this thread. I was able to re-engineer the slider so I doesn't cause a re-render and am now back to how the sandbox looks. I ended up layering copies of a css grid container and have offset each one to give the illusion that it is all part of the same grid. And so I am just animating divs. I have hooked it up with the Observer plugin as you mentioned. The question I have is, how would I create the scroll like effect from the website I linked above. I don't think this is Observer...

On 11/7/2022 at 11:34 AM, noahtrotman said:

Original inspiration: https://franciscamoura.com/

 

It seems to be a scrollTrigger, based on the dev tool sources but I'm unsure if that's even possible given the viewport container is width:100vw and height:100vh and doesn't have a scroll bar associated with it. I can create a sandbox if needed. What I'm mainly looking for is direction as I'm unsure how this is being animated. 

[Rodrigo]

Hi,

 

In the landing page there is no scroll bar so that basically works based on some specific events (wheel and pointer in desktop, probably touch events in devices), updating the position and rotation of the images container and the image.

 

In the single project page I don't see a scroll bar there and if you inspect the site, you'll see that the container in the single project pages is being animated in a fashion similar to the way GSAP ScrollSmoother works, but with events (again wheel, pointer and keyboard) to update the position of the container element.

 

This doesn't mean that you can't do that without ScrollTrigger and ScrollSmoother, that's most definitely an option for the single project page, but for the landing page I would definitely use the Observer Plugin instead of ScrollTrigger:

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

[noahtrotman]

Hi Rodrigo,

 

I realized I forgot to specify which scroll. I was speaking of the home page, which you addressed and are right on. After doing more research and coming across the response by Shaun Gorneau in the linked thread. I believe its a combination of using the deltaY value with how much I want the element to move and having a threshold. Thank you for all your help! I'll give this a whirl and if anything unexpected comes up, I'll follow up.

 

[Mendieta]

@noahtrotman I'm a bit late for this, almost a year late. I coded Francisca's portfolio. I will explain how it was built.

 

I used ScrollTrigger+SmoothScroller; the Observer plugin did not exist at the time. 

- I created a CSS invisible layout; it's full screen and has a div for each element on the slider, the div is also fullscreen. I use the usual technique for infinite scroll with ScrollTrigger. 

- I have a separate div, outside of the scroll container, with the slider images; they are sized with the aspect ratio and size of the viewport. 
- I synchronize the position of the "fake" divs to the image slider; I get the position percentage-wise within the viewport and then use that on the image slider, text slider, etc. 

- The slider images are not exactly animated diagonally; they have anchor points, kind of like a bezier. [ {x, y, rotation}, {x, y, rotation}, {x,y, rotation}, {x, y, rotation}, {x,y,rotation} ]. From left to right, bottom offscreen, bottom edge, center, top edge, top offscreen. I use the percentage to animate through the bezier

- I use different lerping values on each thing; slider images have a different lerp than for example line 1 of the title, line 2 has a different value, the number on line 1 a different one, and so on.

- The scrollbar is hidden with CSS

- I have several canvases to handle the masks on the texts and the color shift on the texts, too. 

- Everything is synced to that "fake" divs scrolling with ScrollTrigger.
- When clicking on the prev/next image, left or right keyboard arrow, I just scrollTo to the desired "fake" div within the scroll.

This is one approach, another one could be something like this: https://tympanus.net/codrops/2021/02/23/creating-an-infinite-circular-gallery-using-webgl-with-ogl-and-glsl-shaders/