JE551

Hey @AndyWhite007, Sorry if I'm misunderstanding you in anyway or if I'm repeating anything you may know already?. I'm new to GSAP but work with WordPress quite often so maybe this will help you in someway. I'm not 100% sure, but it looks like you are adding an iframe that points to an html file that houses your animation which is then included onto your post via the iframe. This means that animation actually exists outside the page as it's stored in the html file here and your only reference to the JS scripts exist on the html file rather than on your site and all the pages and posts within your site. When I set up my custom theme or child theme (you should really consider using a child theme, otherwise your changes in the theme directory would get overwritten if the theme updates), this is my approach to adding GSAP and custom JS. I add the GSAP scripts and my custom scripts that call my GSAP functions into my theme directory and use WordPress's recommended way to enqueue the scripts onto the site. Here's a tutorial. If needed, you can also use 'if statements' to only add those scripts to specific pages of the site (ie: only add the scripts on the 'test2-gsap' page you have), here's another resource that shows you how to do that. After the scripts are added to the theme directory and enqueued, you should be able to add your desired blocks within your page itself using the block builder and add your css (some themes have specific places you can add this or you can always add it in your custom CSS). Provided those steps are done correctly, it should work out Unsure if this helps in anyway but I hope you find the solution soon ?

Yikes I'm so many versions behind ? appreciate the heads up and the ScrollTrigger.create() tip @GreenSock I get a bit of anxiety posting things on forums as I find it a bit intimidating but I've had a really positive experience here and I sincerely appreciate the time you and others put into supporting me. THANK YOU!

I think I solved this with... end: () => "100% 50%+=" + document.querySelector("#img-cat").offsetHeight / 2

Hi ? Thank you for your continued support! Sorry if this is a stupid question, what I hope to achieve is pinning the element while keeping it vertically centred (assuming this means my start position should be 50% 50%/center center which I have in place in the pen) but I want the end point to be when the pinned elements bottom reaches the bottom of the list on the right. Any thoughts on how I could achieve this? -UPDATE- I think I solved this myself, answer in reply below

Oh gosh nothing to apologise for, THANK YOU? for taking the time to explain all of this and the refresh() tip will definitely come in handy for me.

Thanks @alig01 your solution looks a lot cleaner, really appreciate you taking the time to respond so quickly. Regarding adding ScrollTriggers after the page has loaded, I 100% am the confused one?. When I set-up GSAP timelines, without any scroll triggers my go to method is something like this: var gsapTL = gsap.timeline(); function init() { //Add some stuff to gsapTL } window.addEventListener("load", function(event) { //run the init function after page load init(); }); I grabbed the code above from a tip from this video (3:10min mark). But let's say I am using ScrollTrigger with my timelines, using your pen as an example, should I lay it all out in the load event listener; basically call it all after the page loads? I'm assuming yes because what you mentioned about markers being set-up properly makes sense, I should probably wait for the page to load everything before I set-up markers to make sure the markers are positioned accurately. window.addEventListener("load", function (event) { let flowCharts = gsap.utils.toArray(".flow-chart-item"); flowCharts.forEach((chart) => { let box = chart.querySelector(".flow-chart-item-inner"); let line = chart.querySelector(".flow-chart-line"); let steps = gsap.timeline({ scrollTrigger: { trigger: chart, start: "0 50%", markers: true } }); steps .to(box, { scale: 1, opacity: 1, autoAlpha: 1 }) .to( line, { opacity: 1, autoAlpha: 1, width: "58%" }, "<+=50%" ); }); });

Hello, I'm sorry if this has been asked before but I'm trying to animate a flow chart when it's scrolled into view. I only want to animate in the step in the flow chart when it's in view and only if the previous step has finished animating. Here's a quick codepen (sorry for the repetitive functions) of what I have, I've tried to use a delay based on how much of the previous animation is left to play but it's not behaving as intended. Meaning it adds a delay when that step is in view even if the other animation is complete and in this case what I want is that it plays instantly without a delay since the previous one is complete and the current step is in view (I want it to be seamless, steps of the flow chart animate in as it comes into view). The other thing I tried was to only set-up the subsequent scrollTriggers after the previous timeline is complete but unsure if this is the best way to do this as I've read it may not be ideal to create a scrollTrigger after the page has loaded. I'm probably going about this wrong but would love some direction or support on this.

Yaaaas! That's exactly where I got confused, thank you both so much.

Woah that's so much better, you guys truly ROCK thank you for the continuous support ❤️ In regards to this, here's a screenshot of what I meant. Seems like in order for the element to go out of view it only has to reach about -78vh and from what I understood, the reason it was taking so long to come into view was because 100vh seemed way lower than just the bottom of the screen and -100vh was way higher than just above the top of the screen. Maybe it's just my misunderstanding of how the units work but curious as to why that is. Regardless of my question above though your solution works much better, I like the timing of the transitions. Thank you again, you've saved a huge chunk of time in my life!

Hello again (sorry for all the questions?), I am trying to pin the text in the left column when it's in view and have the 'slides/articles' on the right slide up from the bottom to the centre and then back up. This should repeat through however; when the user first views this section the first slide should already be centred to the text on the left and in view so it's next step would just be to slide up out of view and the the rest of the 'slides/articles' slide into view from the bottom following that; the last slide should stay in view (centred to the text on the left). I don't want to have a 'fade out' sort of effect, I'm hoping they could just move up and down vertically out of view. I used 'vh' units to move the 'slides/articles' out of view but it seems like it takes a long time for the next slides to come into view. The 'vh' calculations seem like they go further up and down the page than the height of the pinned section making it seem a bit janky. Any thoughts or suggestions??

Thank you so much! Wow I had no idea this existed, really helpful ❤️

Hi, Complete newbie here, please forgive me if I'm not explaining this correctly ]= I'm hoping to shrink the logo in the hero section to fit the logo size in the header (almost appearing as if the logo in the hero is shrinking as you scroll and getting fixed to the top left section of the header). At the top of the page the header should be transparent but as a user passes the hero section I'm hoping to change it to have a background of white and swap to a coloured logo. I'm having a tough time trying to figure out how to make the logo stick to the header since the logo in the hero section is relative to it's parent container and figuring out how and when to switch the header to show a white background with the coloured logo rather than the original logo from the hero section. Any help would be appreciated ?