Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

SWALKER's Achievements

  1. Hi @mvaneijgen Thanks so much for your reply - In the end this is actually what I did, but so it doesn't disappear at the bottom, I set the end point as bottom -1px for the footer which it never reaches as it's the end of the page Thanks!
  2. I feel bad for asking such a basic question but I can't seem to work it out. I am trying to pin a section when the top gets to the top of the screen for the rest of the scroll down and then when they scroll back up, it unpins when the bottom of the element above, comes back into the viewport. Essentially the top level navigation scrolls as normal but the second level navigation sticks, then unsticks when you scroll back up revealing the to level navigation again. I have tried so many things, various scroll triggers, onleave, onenter, toggle actions but it only ever pins until you scroll the height of the element and then unpins or just doesn't work at all. I also tried setting the end trigger as the bottom of the page wrapper but that didn't work, though I do understand why. I feel like this must be a really common need but I can't seem to find any examples. Any advice, or a point in the right direction would be much appreciated Thanks Sheree UPDATE*** After days of trying literally just after I posted this I found another solution that works! gsap.to(".ast-main-header-wrap", { scrollTrigger: { trigger: ".ast-main-header-wrap", markers: true, start: "top top", end: 99999, toggleClass: {className: 'main-tool-bar-scrolled', targets: '.ast-main-header-wrap'} }, }); ANOTHER UPDATE! Sorry for al the updates but I got it working like so: gsap.to(".ast-main-header-wrap", { scrollTrigger: { trigger: ".ast-main-header-wrap", markers: true, start: "top top", endTrigger: ".footer-row-2", end: "bottom -1px", toggleClass: {className: 'main-tool-bar-scrolled', targets: '.ast-main-header-wrap, .ast-above-header'} }, }); I have edited my codepen so you can see I have no doubt there are slicker ways to do it so by all means, let me know, but this is working Thanks!
  3. Oh wow you're right. Maybe because I used the same classes twice? Thank you so much! I never would have got that, I assumed it was an error elsewhere You're a star - Thank you!
  4. I am trying to do a simple animation of an image sliding in when an accordion is clicked I found a similar example and have done my best to edit it. The first panel works exactly how I want, but no other panels do, even if they are the first one opened on page load and I can't see the error. Any help greatly appreciated
  5. Hi Cassie I am so so sorry, I have been away. This worked for me - I can't thank you enough!
  6. So it pains me to say this, but I have had to switch back to GSAP 7.0 I have quite a few animations that require match media and I can't get it to work. I found the old version really easy (apart from the loop bit) I will have to come back to it after the project launches (tomorrow!) All I was trying to find out/documentation for was How you implement the new match media for something like this ScrollTrigger.matchMedia({ "(min-width: 901px)": function(){ gsap.to(".text-slide-left", { scrollTrigger: { trigger: ".sliding-header", start: "top bottom", end:"top top", scrub: .6, }, x: '20vw' }); }, "(max-width: 900px)": function(){ gsap.to(".text-slide-left", { scrollTrigger: { trigger: ".sliding-header", start: "top bottom", end:"top 20%", scrub: .6, }, x: '20vw' }); }, }); And how you would you do this for a loop, so how would I do this but for ALL instances: ScrollTrigger.matchMedia({ "(min-width: 1800px)": function(){ gsap.to(".expanding-video .expanding-container", { scrollTrigger: { trigger: ".expanding-video .expanding-container", start: "top bottom", end:"top 20%", scrub: true, }, width: '100vw', ease: "ease-in-out" }); }, "(max-width: 1799px)": function(){ gsap.to(".expanding-video .expanding-container", { scrollTrigger: { trigger: ".expanding-video .expanding-container", start: "top bottom", end:"top 20%", scrub: true, }, width: '1600px', ease: "ease-in-out" }); }, }); I Have tried in the codepen, but it's jumpy and does not worrk on reverse scroll
  7. Hi Cassie Thanks for this - this is correct yes, but I am trying to add the match media query in there as well so the container only expands to 1600px above 1800px width. I'm so sorry but I don't really understand this:
  8. Hi Cassie Thanks for your reply To answer your questions (sorry for my lack of explanation) I did actually watch that video and try and put it in the loop but I couldn't get it to work. There wasn't an example of a foreach loop so I assumed I was way off with it but it looks like I was maybe just a wee bit off getting it right. All I really wanted to do with this particular animation was change the width. Initially the width was changed in a 'to' statement but when I couldn't get match media to work, I made it a 'from' and changed the width with CSS media queries. It works, but only on page refresh. Sorry, my live site did have the refresh but I forgot to add it to the codepen. It didn't seem to fix it anyway. SO - now that I know how to do implement match media correctly, I would rather do a 'to' statement and use matchmedia (or at least understand how get it working so I can use it on other ones) I have swapped my copepen code to use matchmedia and it sort of works https://codepen.io/shereewalker/pen/ZExgGwz Below 1800px works fine but the query above 1800px, seems to work on scroll up, but on scroll down, it jumps to 100vw again rather than staying at 1600px and I have no idea why. Thanks again for your help
  9. Hi there I have been trying to incorporate matchmedia into a for each loop but I can't get it to work nor can I find any examples that are sort of close to my starting point. I tried following the tutorials but they are all for basic timelines In the end, I gave up and just changed my tweens to from instead of to so I could try and control it will CSS When I have a viewport about 1800px, I want my image to only be 1600px max (they will actually be videos and no doing so, means you can't see the controls when it's too big) It works, but it doesn't recalculate even though I have added scroll trigger refresh Any help would be greatly appreciated, and also, any help or a point in the right direction on how to include matchmedia would be amazing as I don't think I can use the from method in some of my other animations. I have used matchmedia before, but never in a foreach loop. Thanks1
  10. Okay so literally 2mins after I posted this worked - correct me if this is wrong but this seems to do the trick! var tl = gsap.timeline({repeat: Infinity, repeatDelay: .1}); const rotations = gsap.utils.toArray('.text-rotation'); rotations.forEach(rotation => { tl.to(rotation, { delay: .5, opacity:"100%", display:"inline" }) tl.to(rotation, { delay: .5, opacity:0, display:"none" }) });
  11. I have some headlines that appear the disappear, moving through each one I was using this... var tl = gsap.timeline({repeat: Infinity, repeatDelay: .1}); tl.to("#rotation-1", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-1", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-2", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-2", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-3", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-3", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-4", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-4", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-5", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-5", {delay: .5, opacity:0, display:"none"}) Which was working perfectly but now the client wants 13 headlines I feel stupid because I KNOW that this can be simplifies by targeting all objects with the same class but I can't seem to find the right documentation - can anyone point me in the right direction? I am only just learning GSAP I have managed to do this for items with the same class on a page, but not in a timeline
  12. Thank you everyone for your messages - this job has since been completed
  13. Hey I refactored that top code - thank you for that suggestion - yes, if I remove the refresh, the issue comes back. Thank you so much for your help, this project is due in a few days so I was started to get quite upset about the whole thing. So great to end the day with a win, really appreciate it
  14. Daniel thank you!! So two things I had a separate animation on the home page which wasn't working (I was going to tackle that next) - the code above fixed it as I was using those two functions on that page aswell. Secondly, after seeing your placement of ScrollTrigger.refresh() - I realised I had probably put your initial suggestion in the wrong place. I literally just put that line after ALL the document ready functions - like a completely separate function. After seeing the above - I changed it to this // Add bottom padding to blocks before $(document).ready(function() { $(".expanding-video").prev().addClass("bottom-excess-video"); ScrollTrigger.refresh() }); $(document).ready(function() { $(".expanding-image").prev().addClass("bottom-excess-image"); ScrollTrigger.refresh() }); // Add top padding to blocks after $(document).ready(function() { $(".expanding-video").next().addClass("top-excess-video"); ScrollTrigger.refresh() }); $(document).ready(function() { $(".expanding-image").next().addClass("top-excess-image"); ScrollTrigger.refresh() }); Is this what you meant? Doing this AND adding it to the min_tallestBox() and min_highestBox() function appears to have fixed both animations across both pages. Have I done this correctly? I hope so as it seems to be working!