deVitae

Thanks @Cassie! Updating an old (and fairly stable rankings-wise) proof of concept website with GSAP animations right now. It's not going to be an extensive case study but the next time there's a core algorithm update, I'll come back to this thread to share any changes in the rankings (and potential reasons). But would imagine that you're absolutely right, so long as the initial content on page load is fully visible, there shouldn't be any penalties. Thanks again! And just a personal suggestion, if I may: you might want to emphasise or at least mention this somewhere in the GSAP's sales pitch. I'm sure there are plenty of people who, just like me, have been conditioned that all animations are bad for SEO.

Hi @lizettevanboom! I'm fairly new to GSAP but ran into a similar problem myself yesterday - hope this might help. I think the issue is with how you define itemW and/or use it in calculations done under allItems.forEach loop that sets initial width and height of all items - right now the width of each item is set to 1924px independent of the item's actual width (use chrome's inspect to see this). I'm certain that there's a simple and efficient way to solve this but my solution was to simply utilise GSAP's seamlessLoop helper https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ The second demo there (https://codepen.io/GreenSock/pen/gOvvJee) has items of variable width with clean gaps. Perhaps you can utilise the helper or just copy certain bits from it for your itemW calculations.

Thank you @mvaneijgen! I completely agree. However, I still think that it's vital to understand how animated content affects SEO. And, more specifically, how GSAP's animations are perceived - does Google bot generally ignore all GSAP's animations and see the content only as it is displayed initially in html and css? There are always exceptions and certain content/pages can be more heavily animated to control all aspects of users' journey and perception - think product presentations or specific About pages. For example: https://www.apple.com/airpods-3rd-generation/ or https://i2-camera.polaroid.com/ How to make the call which elements are safe to animate (and how), if one has no idea how each choice will affect the SEO strategy? This becomes even more important when dealing with clients who rely on search traffic to get users on their pages and then use design (including animations) to convert them. For now, I'll be playing around with GSAP for my personal projects only and testing as much as possible but any large scale experimentation is outside my budget. And without having any idea how GSAP's animations are perceived by Google, I'm unable to recommend it to anyone (well, besides saying that "stuff will look pretty but there's a chance that no one will see it"). Essentially, I'm hoping that someone else ran into these same questions as I have and would be generous enough to share their experience and best practices discovered. Will keep this thread "unsolved" if that's ok - perhaps someone else will have something to share or my experiments will yield at least some concrete results that I could share. For now, all I could find was a video from 2017, where John Mueller "suggested" that partly visible content or content starting invisible and becoming visible when the rendering is finished, is treated as visible: So, with this in mind, it could be said the it's best practice to have content start at 0.5/0.7 opacity and animate to 1? Or have content sliding in from position only partly offscreen? Or have elements fully visible further down on page load and then use GSAP to do whatever you want with them as user scrolls down (for example: https://codepen.io/vitaeludus/pen/gOqQGXP)?

Hi all! Built an infinitely loopable product image gallery with the help of GSAP's priceless https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ It works and I'm fairly happy with it - hopefully it'll be of use to someone else too, if only to learn from my quite crude approach However, I've got a few questions and would greatly appreciate if anyone could spare a moment or two and point me in the right direction. 1. On every active element change, I'm dynamically adding CSS classes to previous, active and next elements (the only three that will be visible in a proper desktop viewport) and then, inside CSS stylesheet, adding "will-change: transform, opacity;" to those three elements. After the element leaves the viewport, classes are removed. Lines 13 to 38 in JS code. Is this a valid way to optimise for performance? Anything I could be doing better? 2. I'm using draggable with inertia enabled. I'm loving it but how can I increase friction? Right now the images whirl just slightly too fast for my taste. I suspect that I need to edit snap value or something else in the helper code (from line 267 onwards)? 3. On page load, the first (red) image begins in the left corner rather than the centre. An interaction (of any kind) is needed for the photos to end up in correct layout. I could just make loop.toIndex(0) to play on page load but I'd love to understand what I'm missing here. 4. Lazy loading images. I assume GSAP scroll trigger lazy load (https://codepen.io/mrWilson123/pen/oNbKLvL) wouldn't work, as images are laid out on horizontal axis? Am I correct in thinking that, for this specific use case, I should hook lazy loading into previous, active and next element functionality? Or is there a better way to achieve this? 5. Animating rotation based on distance dragged. Right now I'm using simple gsap.to on active element change to rotate the images. To have dynamic rotation based on distance dragged/moved, I assume I'd need to fiddle with the helper functionality? And is that even advisable - updating the rotation with every movement, no matter how small? Thank you! (note: it's using vh for all dimensions and looks better in full screen)

Hi all, I fully understand that my question is way beyond what these public free forums can answer. However, I'm hoping that someone ran into these dilemmas before (or perhaps even ran some tests or found some case studies) or simply has better technical understanding of how it all works and could share their wisdom. I also think that this topic is important for GSAP marketing as well. Not knowing how animations will affect the SEO is the main reason I haven't upgraded yet - and if I had to guess, I'm probably not the only one with such concerns. Most likely, I'll pull the trigger anyway, if only for animating ad oriented landing pages. But I would greatly appreciate any advice and thoughts on this matter, as I'm sure many others would too. For example, if I want to animate H1 title, I have the following options: Set visibility/display to none and use gsap to toggle it. Set opacity to 0 and use gsap to change that. Set the initial position somewhere off screen and move it into view. The parent container could have overflow hidden, thus making the text invisible OR you could move the text by 100vh units down, ensuring that it's still on page and visible, just out of immediate view. Set the H1 color to transparent and use background-image property and gsap to create a linear gradient transition. Is either one of these methods better than the others? Why? Using Split text plugin that splits every letter/word into <span> elements deserves a separate mention. I found a thread from 2019 asking the same question and the answer from @Jonathan there seems to suggest that google bot reads the html BEFORE gsap kicks in and splits the text into spans/animates it. However, a few weeks after that thread was posted, Google introduced their new googlebot that is able to render javascript. Original thread: With this in mind, would google crawler ignore the fact that the content is hidden initially (opacity/visibility/offscreen - any difference to these methods?) and only see the content after the animation transforms the text (movement/opacity etc)? Or, because GSAP kicks in only after the content has been loaded, google bot won't be able to render its animations and instead see the content the way it was presented in html and css? What I found so far on these forums, reddit and google seem to be quite old (5-10 years) and not really extensive. One suggested option was to use dynamic rendering for crawlers (https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering) but my assumption is that this would heavily impact the speed metric, doubling the webpage size as perceived by Google? Plus, this method seems very prone to errors? Visible text VS hidden text - why it's important Some case studies I found, suggest that Google values visible text more strongly than hidden (either via css or js - think accordions/tabs). Now, in terms of accordions, they are a necessity for UX and the negative effects can be somewhat lessened by using FAQ schema and <summary> & <details> semantic html tags. My question, with animations, is whether the text/animated content is still treated as hidden if it comes into view (through opacity/transform/visibility or other methods) on scroll? https://www.rebootonline.com/blog/hidden-text-experiment/ - case study showing that Google prefers visible text over hidden text. https://www.searchpilot.com/resources/case-studies/seo-split-test-lessons-bringing-content-out-of-tabs - a case study showing that Google values shown content more strongly than that placed in tabs. Content generated by interactive JS Google stated that their crawler might not be able to render javascript that requires user interactions (such as click or hover). How would scrolltrigger animations be treated then, provided that Google's bot is able to render GSAP tweens? Let's say, I have a <H2> somewhere in the middle of the body, set to opacity: 0 and a tween that changes that opacity to 1 when it comes into viewport. Would Google see it in its initial state only (invisible)? Would greatly appreciate any advice, insight, case studies, personal experiences or just thoughts!

Thanks @mvaneijgen! Will go with the toggleActions - thank you for this and for welcoming me & taking the time to look through the demo! This was my very first tween for a personal project but I'm hoping to incorporate GSAP into my toolkit from here-on-out. And no, the idea is for all pages to have a 100vh & 100% width photo/video at the top - hence the transparency of the nav. But the body below the photo will be white, so that's why I've pursued this fairly niche functionality. I feel like GSAP lets you create even the most advanced animations with a very simple syntax but that's why I was afraid of having made some really stupid mistakes here. If you don't develop good understanding of the basics in the beginning, it's bound to come back to bite you in more advanced tweens. Thanks again!

Hi all! Discovered GSAP only a few days ago but I'm already loving it - the possibilities seem endless. I've managed to achieve the functionality I needed but just wanted to double-check if I've approached this correctly. Got a gut feeling that I've complicated things way too much. Essentially, I want the navbar to appear with white logo, white links and transparent background on page load. Then, as user scrolls down, it should disappear. When the user scrolls back up - it should slide down again but with black logo, black links and white background. If the user ever returns to the top of the page, the navbar should return to its initial state: white logo, white links & transparent background. This works but I'm somewhat worried about my use of the timeline and self.progress check - I suspect there's a more elegant and less performance-intense approach? Would greatly appreciate if someone could have a look at my codepen and point out any mistakes!