Web Bae

Hi! I'm using ScrollTrigger pin on an element that has height set to 100dvh. I noticed that when the url bar goes away, the pin element doesn't update it's height, leaving an undesired blank space. Is this possible to fix? Am I doing something wrong here? I provided a minimal codepen, but I'm not sure that will trigger the behavior on mobile as scrolling in the pen doesn't trigger the url bar in/out. Is there a better way to share minimal demos with issues on mobile? Here's the hosted site you can load on mobile to see the issue with 100dvh: https://fixed-image-gallery.webflow.io/en/test-mobile For now, changing to 100vh is a good fix but I'm wondering if there's something that can be done to work with dvh? Thanks! Keegan

Hey @JuicyDisorder congrats on joining the club and @Rodrigo thanks for the shout out! @JuicyDisorder Feel free to message me if you get stuck getting GSAP Bonus plugins into your project!

@Mohamad Tohme this is a normal warning in Webflow.

Beautiful. Thank you both.

In my previous post Rodrigo was kind enough to help me get a working Flip animation with CSS grid: I'm working on a more complex example that recreates the effect seen here: https://tympanus.net/codrops/2023/04/26/image-tiles-menu-animation/ Unfortunately, when I try to add/remove the '.is-current' class which handle opacity and scale, the images jump instantly to their final positions and don't animate. How can I combined the desired hover and Flip effects while still tracking an "active item"? The end result will have multiple images flipping from menu style layout to full style layout as in the provided example. Thanks again pros! Keegan

Thanks Rodrigo! Worked great - I am working on a more advanced example with hover effects that aren't playing nicely - will post another thread on that one. Keegan

Hey all, I'm having a heck of a time flipping grid children around. In this example I'm trying to flip images from grid-one over to target divs in grid-two. I experimented a bit with some grid CSS properties (grid-column-start grid-row-end etc.) thinking that might be making them not fit properly but haven't been able to get something proper working. I thought maybe making a wrapper div that controlled the div position and the just flipping the image between those two divs might be the way to go but still no joy. Any help is appreciated! Have a great weekend. Keegan

Thanks everyone! I appreciate the help big time.

Thanks Jack - I'm going to ask my client to revisit the designs to see if we can simplify the final result a bit, which I'll probably end up chopping up like you mentioned. Just curious what everyone's ideas are, I think I've only used drawSVG once before on a project.

Hi All! I have a complex SVG with multiple paths I'm trying to animate. I was able to follow the tutorial on motiontricks but have issues where the path crosses itself. Of course motiontricks has a more advanced tutorial for that too, but I'm getting stuck (and overwhelmed) thinking about the final desired result, which involves an even more complex SVG than the one in the codepen - I'll attach a screenshot. Anyways, just wondering if you all had any advice on how I should best proceed. Maybe this would be easier in After Effects (not a lot of experience here) and export to Lottie? Thanks! Keegan

stumbled on this today. The green GSAP dragon can do ANYTHING ?

? GSAP ALL THE WAY!!! ?

Read this last night and this morning - very thorough and well articulated thank you. Everything making sense ☺️

Thanks so much - really helpful stuff. I'm building a component that has text content and progress bar on the left side and assets (video) on the right. So the goal is to animate some things on the left (timeline1) while the corresponding videos animate in and out on the right side. (timeline 2). I've got to sync up the timing so everything swaps over on cue. I added two more pairs of boxes to make the example a little truer to my use case. I've been able to get it working with Jack's solution. (thanks again). It's a little unintuitive to me that calling masterTl.duration() in the greenbox tween makes it take the duration that I want it to take (call it 1 "scroll distance unit"). I would think that masterTl.duration() would be 3x "scroll distance units" based on the ScrollTrigger trigger and start/end points. Can you help explain why my intuition is incorrect? Trying to explain it to myself, I'm thinking that ordering them with orangeTimeline first, followed by green, when we call .duration() is just the duration for the tween at that 'point in time' i.e. the second and third animation pairs or .add and .to aren't affecting the duration at this point, just the first orangeTime (green box doesn't matter since we are explicitly telling it to have the duration of the masterTl at this point in time and it starts at same time as orange). Would that be a good way to think about it? I like Rodrigo's id examples as well - going to dive into that now. Thanks again!

Is there a recommended way to make one scrollTrigger timeline last the same duration as another timeline? In the codepen example, I want the orange box to complete it's timeline over the time it takes the green box to rotate 360 degrees. I found this post which says the solution is to not nest them. I made it work for my example but was wondering if there's a .add() sort of syntax to have a master timeline? Thanks!