SWALKER

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

Hi Cassie I am so so sorry, I have been away. This worked for me - I can't thank you enough!

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

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:

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

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

Thank you!

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" }) });

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

Thank you everyone for your messages - this job has since been completed

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

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!

Hi Daniel Thanks for your reply Do you mean immediately after that extra JS? I tried that but then the images did not load at all I will add the offending JS to my codepen now EDIT - I added it to codepen but its still not showing there - it is definitely whats causing it on the live site though

So I have realised that it's actually caused by this JS above $(document).ready(function() { $(".expanding-video").prev().addClass("bottom-excess-video"); }); $(document).ready(function() { $(".expanding-image").prev().addClass("bottom-excess-image"); }); // Add top padding to blocks after $(document).ready(function() { $(".expanding-video").next().addClass("top-excess-video"); }); $(document).ready(function() { $(".expanding-image").next().addClass("top-excess-image"); }); This is there so that whenever a video or image is added, padding is added to the container above and below and then the image sits in between the two sections. I assume the scrolltrigger is calculating the position BEFORE the padding is added? - Not sure why it would only do this on hard reload Is there a way to force it to recalculate when it moves?

I have made a codepen, but the issue doesn't seem to appear there - I have included the live site too

Hi there - I am doing it right now - just juggling a 2 year old!

I have a very basic scroll trigger animation where a box expands on page scroll and then shrink back on reverse scroll For some reason if I clear the page cache, it works fine, but on a normal page reload, the image is already half expanded. I can't work out what the issue is. Working on a pen but I have this so far In some cases I have multiple instances of this on one page I have done more complex animation than this but this one just will not work! I have recreated it i a pen, but of course, the issue isn't happening there on page refresh, the images are already half expanded, but on hard reload/cleared cache they work as expected from 0 width to 100vw .expanding-image .expanding-container { width: 0vw; height: 46vw; margin: 0 auto; overflow: hidden; } gsap.registerPlugin(ScrollTrigger); var sections = gsap.utils.toArray('.expanding-image .expanding-container'); sections.forEach((section) => { gsap.to(section, { scrollTrigger: { trigger: section, start: "top bottom", end: "top 5%", scrub: true, }, width: '100vw', ease: "ease-in-out" }); })

I have some very basic animations that aren't working as expected and my project deadline is in 3 days. They are very basic scroll trigger animations which I suspect are very easy but I am very new to GSAP and don't have long enough to try and fix them. If anyone is interested in providing services to help that would be appreciated Thanks Sheree

I am also having the same issue - if I clear the cache it works but not a plain refresh I am working on a demo but you can see it here EDIT - I made a demo but started a new thread - the issue was resolved

Hi Daniel Thanks so much for your help. For some reason when I replace my js with yours, nothing happens - as in, all effects are gone. I hope I have understood correctly, but I have added ScrollTrigger.refresh(); at the end of my js file after all my GSAP items - is that right?

Hi Daniel - you can see the issue here https://eei.shereewalker.com/ I will try your solution though!

I am using scrolltrigger to animate the way the sections (the coloured blocks with images) appear on screen. It is working BUT it's really inconsistent and I can't work out why. 6 or 7 out of 10 times it's perfect but sometimes the right hand boxes switch from position relative to fixed to early. What am I doing wrong? I have been fiddling with it for a week so any help would be greatly received

Hi there, thanks for that. Unfortunately that first piece of code did not work. I will go through and see if i can narrow it down. How would I add will-change or force3D onto this for example? gsap.to(".letter", { scrollTrigger: { trigger: ".letter", start: "top 93%", }, x: 0, duration: 1, opacity: "94%", ease: "ease-in-out", delay: 1.2 });

I have finished my website but there is one issue I just cannot seem to fix. On ipad, the 3 basic animations which animate three titles from left to right using x values, stick, flicker and then jump. I have tested in many other browsers and desktop and it's perfect but not ipad - it's also slower on ipad? It is the same issue using either chrome or safari on ipad (and probably others). I can't understand it as I have used the exact same type on multiple objects and they all work perfectly. I can't see any syntax errors in my code The link URL is https://tinyurl.com/b3frsvyh and it's the 3 links that say Facebook, Instagram and Newsletter I have tried to make a codepen to replicate the environment as much as I can but the issue doesn't seem to happen on ipad and I can't work out what the difference is between this and my site I included all my tweens because I thought maybe it was an issue in a previous tween that was causing it? The tweens in question are near the bottom, just above the match media ones It's driving me mad so any help would be greatly appreciated

Hi there - gosh that was a fast response! Thanks so much for that - I will read through it I have pasted all my JS here if this helps https://codepen.io/shereewalker/pen/ZEJbXvG