emjay

Hello GSAP friends, I am currently trying to implement the following: A video is displayed in fullscreen after opening the page, and then when I scroll or when the video is over, it should move to its actual position and size in the header. The whole thing of course only once, when I scroll up again it should stay at the end position. For the beginning I tried to move the video to its end position while scrolling. First only with gsap.from(), because I didn't achieve any significant result, I tried it now with the new FLIP plugin. With this I get it to work halfway when I click the second time. Please have a look at my example. Click once in the viewport and the video is in fullscreen. Then click again and you see what I actually want to achieve. (That the headline overlays the video I want to solve later so that it fades in from the left as soon as the video has reached its final position). And now I hope you can tell me how to do this in combination with ScrollTrigger. I haven't reached the solution with flip yet, so you have to click twice. Thanks for your help Emjay

Hello @mikel, thanks again very much for demonstrating your solution. In your last example there is a little problem. On hover the div's are not visible. Thanks, Emjay

Hello @mikel, thank you very much for your different approaches or perfecting them. I like it all much better to solve it with a SVG. However, I'm not so good at it yet, and I also have to display text that is maintained in a CMS. In the following pen I demonstrated the hover effect to make it easier to understand what I want / have to display. As you can see, it already goes quite well, what I do not understand why the box shakes briefly when closing. https://codepen.io/emjay/full/b980ba33696a413a71e2811a19e06bef But I don't want to move too far away from your solution. Do you see that I can do this with just a SVG? Or should I try to optimize my solution. The random movement I have unfortunately still not managed well. Also the effect from your last pen is really great. Really thanks again for your answers and the time you invested. Thank you! Emjay

Hello GSAP friends :), in the following pen you can see a simplified demo of a project I'm trying to implement. For better understanding a little background information about it: The lightblue circle will later be a graphic that represents a process. The lines of the 4 tooltips point to different places of this graphic. You should be able to hover over a tooltip, then it will stop to move. If you click on a tooltip it will enlarge and some text will appear. If you leave the tooltip it will close itself again. As you can see in my demo, the 4 squares are already moving. However, it doesn't really look nice because they all move quite evenly, plus there is a little pause at the end where I don't know how to prevent it. Would someone have a tip on how I can create some kind of random movement around the start position that looks a bit more fluid? (I tried to demonstrate the movement in the attached GIF). And I have one more general question. I solved the lines to the square with a SVG which has no aspect ratio. If someone has a better idea or a tip from his own experience how I could solve this more elegantly, I would be very happy about it. Thanks and best regards emjay

Hello @ZachSaucier, thanks for your message, but that didn't help, when I have a desktop viewport and load the page or the pen, the navigation is hidden with inline styles (opacity: 0). But in this case I want it to be visible. https://codepen.io/emjay/pen/642c1a8a34ad7790ac80272c6c281d1f

Hello GSAP friends, in my pen you can see a navigation that opens from the right side on mobile and should be displayed normally on desktop. The animation for mobile works as expected, but I have problems to make the navigation visible on desktop because of the inline styles set by gsap. If you expand the navigation and drag the viewport larger the navigation remains visible because the inline styles are correct in this case. But in the default state the navigation is not visible because of inline styles like opacity = 0. Do you have a tip for me, how I should either remove the inline styles or leave the animation active only in a breakpoint? In the attached gif you can see how the nav should look like on desktop and mobile. (gsap was commented out for this gif). Thanks in advance for your help.

Hello @all A small question about the following pen. When the timeline has run through and restarted there is a short pause. I have tried several things, but I can't get rid of this pause. Can anyone tell me how I can remove this pause? Additionally the reverse is not working great, what I'm do wrong? Then I would like to know if my procedure is ok or if there is an easier procedure I should choose. And last but not least, if someone knows a good easing to make the shaking a little bit nicer, I would be glad to get some information about it.

Good Morning @GreenSock, Thanks for the background information on how everything works. I have now gained some more useful insight into ScrollTrigger. With the settings you recommended, the problem described above has disappeared. Thanks for your great help as always. Maybe you could think about adding this setting to your Greensock Cheatsheet. But maybe this is already too special a setting. Have a nice Day! emjay

Hello @ZachSaucier, i totally agree with you and understand the refreshing concept, but the problem is a different one I think, because the resizing is finished. The animation works, but when I scroll up again, a wrong value is set inline, see my video for a little bit more detail. As you can see I scroll up and down several times, and scrollTrigger always adjust the values until finally a px value of 543,933px is set. Then I make the viewport a bit narrower and it looks good at first, but suddenly the old value of 543,933px is set, although the window is narrower now. This finally leads to the element wrapping to the next line. I think a wrong value is kept. I tried to refresh scrollTrigger but this wasn't changing the behaviour. Thanks for your Feedback in Advance, emjay gallery-grid-problem-2.mp4

Hello, i have made a pen from a little problem that occurs when resizing. Take a look at the attached gif. Everything works when the page is loaded initially. If you enlarge the screen a little bit there will be a space added between the images when you scroll up a bit. Is this in a problem with savestyles? Maybe someone has have a hint how I can avoid this. :) Thanks emjay

Hi @ZachSaucier, thanks for your tips for simplification. This makes everything look even clearer and easier to understand. I have updated the pen, so that other people can benefit from it too. Thanks and all the best Martin

Hi Folks, in the following pen I have a 6 boxes in a row, and I want to fade-in a certain number of boxes at the same time, as long the breakpoint that show's all at the same time isn't reached. My example works, but I have the feeling to have overcomplicated it. Can you take a look at it and tell me if there is a way to improve it? I would have loved to work with stagger, but couldn't find a way to use it. Thanks, Martin

That helped a lot @akapowl Thanks :)

Hello @all, In the following pen I use 2 timelines. One is played right after loading the page and shows the arrow. After that the span element is shown for a short time and disappears again. In addition I want the "show and hide" effect from the span element to be triggered on hover of the arrow. But this only works if I remove the "show and hide" effect fron the intro. I think the problem is the following: When the intro is done, the span has set visibility:hidden and opacity:0 inline, and on hover only the translate3d attribute is changed inline, but not visibility and opacity. Therefore the span and the effect is not visible. Do I have to proceed differently? Thanks for your feedback. Martin

@mvaneijgen I'm currently testing it to make sure that it always works, as soon as I update the pen with it I'll record the result here.

Thanks again @mvaneijgen this helped a lot. I'm now also looking on page load if there is an hash in the url and then scroll to the desired section! Martin

Hello @mvaneijgen, this is an interesting and nice solution, thank you very much for showing me this. I found one little problem, the scroll position isn't changed, so if I use button and then scroll it jumps to the actual scroll position. And one little question, would it be possible to animate to this label, just like if I would scroll? Something like "play to the defined label"? Thanks, Martin

Hello Greensock fans, i have created a pen based on the Greensock example "Slide In Panels". However, I wanted to enable a jump to another panel from a panel. Since the panels are next to each other I don't know how to slide to the next panel. Is it possible to calculate this somehow based on the height of the elements? I would be happy about feedback from you. Thanks and Happy Gsapping

Hello Jack @GreenSock, thanks for re-reading and posting a solution. I updated my demo pen and tried the solution. Like all your stuff, it works great, thanks so much for helping with this problem. https://codepen.io/emjay/pen/0cb7376d2d2ff34bff65a1b1bd633faa?editors=0011 Thanks again, Martin

@ZachSaucier I mean this post, #6 in this thread.

@ZachSaucier as you've said, this "is obviously not optimal". Would this teardown function, which was mentioned by @GreenSock help in my case? That was the reason for me to ask in this thread. Thanks, Martin

Hello @ZachSaucier, I already tried this, but with this solution we've many situations we're multiple breakpoints are matching (always if the aspect ratio = 4/3 or 2/1). 1032 * 774 = 4/3 = 1.33333 -> so 3 and 4 from your example will match both at this resolution, the next would be 1037 * 777, and so on... 1032 * 516 = 2/1 = 2 -> so 2 and 4 from your example will match, the next would be 1034 * 517, 1036 * 518, ... I updated the codepen with some output: https://codepen.io/emjay/pen/0cb7376d2d2ff34bff65a1b1bd633faa?editors=0001 Hope you have another idea. Thanks, Martin

Hey @ZachSaucier The problem is, we have 3 "states" but only two matching breakpoints. I need a way, to tell scrollTrigger the third state (if both breakpoints don't match: State 1 ( all until 1024px viewport width) : "(max-width: 1024px)" State 2 (all up 1025px with a aspect ratio between 4/3 and 2/1) : "(min-width: 1025px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 2/1)" Missing: State 3 (all up 1025px where the aspect ratio is not betweend 4/3 and 2/1) Something like this (dummy Code): ScrollTrigger.matchMedia({ "(min-width: 1025px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 2/1)": function() { }, "not-matching": function() { // if no breakpoint is matching }, }); In this Case, I also wouldn't need State 2. Thanks @ZachSaucier

Hi @GreenSock and @pxel, I found this thread using the search and think the solution would help in my case. I tried the following with ScrollTrigger.matchMedia() : ScrollTrigger.matchMedia({ "(min-width: 1025px) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 2/1)": function() { document.documentElement.style.margin = 0; document.documentElement.style.height = "100%"; document.body.classList.add("gsap"); let tl = gsap.timeline({ scrollTrigger: { trigger: "#container", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1 } }); let slides = gsap.utils.toArray(".imageText"); slides.shift(); // remove first slide, because it should be the start slide slides.forEach((slide, i) => { tl.from(slide, { xPercent: 100, scale: 0.9 }); }); }, "(max-width: 1024px)": function() { document.body.classList.remove("gsap"); document.documentElement.style.margin = 0; document.documentElement.style.height = "auto"; }, }); What I'm trying to do is based on Greensocks Sliding Panels demo, but the timeline and animations are working, thats not the problem, I have a question regarding the breakpoints. As you can see in my example I try to set a certain aspect ratio where scrollTrigger is active. Since the sliding panels always have 100% viewport height and I want to make sure that the content always fits into the viewport I use the aspect ratio in my media query and assign the needed styling for the slide in panels. Otherwise the panels are normally arranged one below the other. The reason why I give the body the class gsap is that I control the styling of the elements with this class. The two lines below, I'm adding the styles needed for the html element. Now I want to delete the gsap class and the html stylings if this aspect ratio breakpoint isn't matched anymore. And I do not know how I could do that. The All Key does not help me here, but maybe the teardown function? Thanks in advance for your reply and this amazing set of tools.