Creek

If it's possibly helpful to anyone else - this tutorial appears to require less... knowledge? He appears to be using an older version of GSAP, etc. The other tutorial is obviously far superior - this one is just... more elementary?

THANK YOU!!!! Very much looking forward to digging deeper and figuring this out.

Thanks. If it's okay to ask here - I don't know what it is I'm looking for? I really like GSAP, as the timeline approach really makes sense. But I sadly do end up with massive single HTML files. So, does barba.js work really well with GSAP, or - as I suspect? - are they two libraries that have nothing to do with each other? ie - I can't call or invoke or whatever a barba.js interpage animation from within a GSAP timeline? Basically - you're the guru, I'm just trying to figure out the best way to present small business client websites with engaging animation to keep the visitor "hooked" - relating the "small business" bit because they don't tend to have massive amounts of content. The problem with using only GSAP is that I end up with only one giant HTML page - whereas apparently with whatever barba.js is, I can have the multiple pages so that obnoxious Google and it's SEO can fill up the search engine with the separate about page, and the contact page - because that's what Google likes to do. And Google runs the Internet, so we must do whatever Google requires of us to the very best of our ability. From glancing at barba.js, it looks like it's doing what I've requested - animating between different HTML pages. So that's awesome. So what would you suggest? I'm currently obviously throwing a tantrum inside my head right now about how much I hate Google - but I'm making Google cry, so I'll stop that now? Are you relating that I likely need to learn barba.js to better achieve the goal I'm putting forward here? I wouldn't likely know that until I'd spent quite a bit of time experiementing with it - as, being a guru, you'd likely know off hand? On one hand, small business client that Google only indexes by a single HTML page. On the other hand, small business client that Google references with 5 or 6 pages. Based on Google indexing gazillions of pages - the difference between the 1 and the 6 shouldn't statistically matter? But, because it's only one, Google possibly decides to just ignore the site altogether? I have no idea? But I do know that Google refuses to index the site with the single index.html I referenced above.

My apologies if this has already been asked - But GSAP allows content that would normally encompass multiple HTML pages to exist on a single HTML page. Rather than presenting multiple HTML pages - the user can interact with the elements on a single page - with GSAP timelines then smoothly animating between the various "sections" within the single HTML page. Whereas (as far as I know?) if the user is instead navigating from one HTML page to another, the browser is then forced to "reload"? So there's no smooth animation possible between HTML pages? (My very bad if I'm using the wrong terms and just confusing the issue, or I'm wrong about the reloading.) But if there were a way to smoothly animate between different HTML pages, I think that might be preferable - only so that Google might then register those additional internal links, etc? ie - It would "seem" beneficial to be using multiple HTML docs rather than just the one giant HTML document - if only for SEO, because Google would then register multiple internally linked pages that could then be named "SEO appropriately" - instead of all of the initially invisible content becoming visible as the user interacts with the GSAP timeline, smoothly animating between the various "sections" presented on a single page. Anyhow - with the "section" approach, I just end up with one massive index.html that contains ALL of the site content - as I did here - https://www.tibbeecreek.com I'm currently reworking that entire project from scratch - there are multiple other problems with that site obviously, beyond the convoluted HTML - But I'm thinking there's likely a MUCH better way for me to organize the HTML content? Hopefully (possibly?) again even into multiple separate HTML documents? Without using PHP or any other server-side program? And I'm just not aware of it? Or, if not - there's likely a much better Google SEO friendly method for organizing the "one big page" of content? Just hoping the gurus here might have possible run into similar issues and have developed a more Google SEO friendly approach?

Carl is a guru god - I've previously signed up for his awesome course, couldn't have learned what I know without it! With good old Flash, I was pleased with what I could produce - so my clients were then beyond elated with it. But... with GSAP? Again, Carl's a god. And, even as the vision is streaming from his fingertips into the perfect GSAP code, he's still facing hours fine-tuning that code to get things just right - with guru level knowledge of what it is that needs to be fine-tuned. So I just need to be much more realistic in approaching all of this. Flash is dead and it ain't never coming back My obvious hope with broaching this topic was that possibly there was a GUI in development to ease my pain. But that ain't happenin'. Greatly appreciate everyone's feedback and advice!

Ah well... need to go get sized for my hair net. Mr. Mijavascriptagi is just too stern a taskmaster. YOU MAKE MISTAKE, DANIELSAN! NO! YOU FIND MISTAKE! WELL? THEN YOU READ MORE BOOK! NO MISTAKE! YOU MISPLACE ONE CHARACTER! ERROR!!!! GRAHR!!! NOW I HAVE KILLED DANIELSAN WITH MAGIC FLYING CRANE KICK! BUT HE MAKE MISTAKE! NO MISTAKE! I WAIT FOR BETTER PUPIL! WILLING READ AND LEARN INFINITE MASTERY OF SUPER SECRET ART NO ERROR JAVASCRIPT! NO! NOT JAVA! NO! SCRIPT! UNRELATED! NOT JAVA! SHUT UP YOU STUPID! HOW MANY TIMES WE TELL YOU? IT CLEVER CODING JOKE! GRAHR!!! WE LIKE THIS JOKE! IN ALL JAVASCRIPT BOOK! REPEAT MANY TIME! NO! YOU ERROR!!!!

Far beyond agreed! But I primarily work with small businesses. Almost all of them have an incredibly bright niece or nephew who builds websites on the Internet where everything is free. So they know to watch out for those shady operators attempting to charge for things that are free! Sure - they'll pay Microsoft or Google $15+/mo for life for a stupid email account - so 30 accounts for their employees - $450/mo! But Google and Microsoft are special exceptions to the "everything is free on the Internet" rule. Like when they buy stuff from Amazon. Sadly, as fellow guru Carl kindly put it - given I am forced to work for whichever breadcrumbs might fall off the table - I certainly can't devote the additional hours, beyond having attempted to master GSAP, into properly fine-tuning the animations. Especially what with the nieces and nephews explaining that no one even needs a website anymore - because everyone lives on Facebook! Like... duh! With Flash, I could quickly build out marketing animations to the best of my abilities. With GSAP? Only then to the best of my coding abilities. Ouch. Mickey D's does offer excellent benefits, AND I get a free hairnet! And, after work, I can hang out with everyone on my phone on the Facebook. Oh, a new TikTok challenge! Yep, that's gonna maim me for life - but... oh, Facebook is just gonna be SO jelly! The neverending insanity aside - my background is in marketing. I can certainly learn coding, but I sadly lack the gene that makes it exciting... or even remotely interesting? It's simply a horrific chore, wherein javascript simply allows for NO mistakes! All broken. So could a marketing animation created easily in Animate then be adapted through GSAP? I would SO VERY MUCH like more money. Then I'd happily hire someone to code everything for me in GSAP. But, until then? Just desperately hunting an easier solution?

Obviously not being a guru - are you relating that you still use Animate code? Or you're only using it to get the animation down, following then with the "cleaner" GSAP (guessing here) ? What I find so infuriating - not yet being able to code as well as I can type - is that I can't even GET to the fine-tuning aspect. I'm just looking at a mess of code, yanking my hair out, just happy I finally have ANY approximation of what I'd envisioned. As for what's screwing everything up - I have no idea. I'm just elated when I find whatever might be screwing everything up, fixing whatever it was that broke everything, and at least I then have a working animation again. So I'm just HOPING - like a child who wishes to escape another savage beating rather than spend the next few months waxing Miyagi's cars and end it all with the wizardry of GSAP's flying crane kick - Animate makes sense to me. Possibly I was younger and willing to put in the time when I initially learned Flash? But I could SEE what it is I was actually doing - so I think that possibly played a part? I'm not clear as to whether Animate is a bastardization of all that should be - thus I must thoroughly master the crane kick with GSAP - Or is Animate a viable alternative? Because if it is, I'm more inclined to just wax off wherever I can? Only submitting myself to the tedium where Animate falls terribly short? And I apologize if any or all of this is inappropriate. My problem, beyond having to create a fluid design that automagically adapts to almost any screen size, is introducing animation within that design. People are obviously naturally drawn to animation. So my worry is that Animate might create an animation - but that animation would then refuse to adapt to various screen sizes - because Animate doesn't allow for viewport units? Or is Animate an abomination of all that is good and pure on the web, as its predecessor Flash apparently was, for whatever reason? Thanks SO VERY MUCH for everyone's feedback!

Is there any program you might recommend for easily creating animation - that perhaps just spits out video? Clients don't tend to "get" concepts? You can certainly just ram it down their throats - ie "Well... if you had ANY idea how much time it took to build this? This is all javascript. So... unless you just really hate it - we're gonna run with it." Y'all are obviously the guru gods - for me, attempting to "storyboard" with XD takes more time than it would to code. So how do y'all go about presenting various animation concepts, prior to all of the coding? Or is it just a start frame, some middling stuff, and the end? I'm quite obviously admitting my complete ignorance on all of this. I tried to create an animation with GSAP, I came somewhat close to the Ed Wood version of what I imagined - because I was too deeply buried in code already - sub timelines were over-riding other sub-timelines, etc etc. So it was a mess. So I'm not certain I'll ever reach the proper level to create a GSAP animation that matches what I'm hoping to see - but I now know for absolute certain that I lack the skills to use GSAP to "test" various "approaches" - I think I'd be much better off instead using a program that provides the GUI I need to create the "vision" - and then, once I get it -only THEN try to match that "vision" with the GSAP magic? Or do all of you gurus just understand GSAP so well that it's basically the same as me typing a message here on the forum? The animation in your head just naturally spits out to code? Thanks VERY MUCH for any guidance!

Is there a GUI for GSAP3, featuring a timeline like Adobe Animate provides? And I apologize that this is basically a repost - but the older post was flagged as existing prior to GSAP3. The two products mentioned in that post appear to be abandonware? It escapes me as to why people working on a GUI would not be active in the forum here, promoting their awesome tool? Seems very weird? But possibly GSAP3 then made it impossible to continue developing those GUIs? Obviously - heck if I know?

Thanks - I'll dig into it this evening. Given once they finally stop tapping at their phones, the animation continues - I just thought it was kinda funny to watch them tapping away, even getting angry about it. And the fish is already angry and then swallows them, so... BUT the parent who thought their child might enjoy the fish sees them reacting negatively - which I hadn't thought about until someone was kind enough to relate how it's then an issue

With my site's animation, I'm hoping to solve for a problem where - if a user clicks multiple times, the animation begins again. I'm hoping there's a simple solution where I can insert code in the animation sequence begun by the click that immediately disables the clickable area? http://www.tibbee.com If you click multiple times on the catfish, the animation repeats again and again from the beginning of his end animation.

Thank you, thank you... Please... no no... please... thank you so very much. Oh, you're too kind. Please... I would just like to thank the Academy... and remind everyone -

Incredibly psyched to present my very first GreenSock animation: http://www.tibbeecreek.com Just please be gentle with Elvis? He does have a temper. gsap.registerPlugin(Uh, ThankYa, ThankYaVeryMuch);

Very cool! Really fascinating how all of this actually works.

Just wondering if there is any such thing? I was just testing in a VM, purposefully overloading it - just to see what happens - and the formerly smooth animation presents as expected? Frame skips, visual glitches, etc. I'm guessing the browser's rendering engine has to know that it's being overtaxed - otherwise, instead of the frame skipping, it would just present the animation in stuttered slow motion? Just seems that it would be preferable to control that? ie If overtaxed, then... ? Possibly even serve an alternate page altogether for the slower devices - kill the opacity tricks, or whatever it is you gurus might advise should likely be omitted for the slower devices? I'd most definitely rather quickly simplify a more complex animation, serve up the simplified version - than have the slower processor just try its best to glitch its way through? And not in any "responsive" fashion, with various levels for different CPUs. Just, if the CPU can't handle it - then here's the extremely simplified version. Or possibly the user is on a powerful device, but they just happen to have tons of background processes hogging the CPU? Then they also get the simplified version?

In working through akapowl's links - it appears that the workaround mobile logic is sadly breaking other logic that formerly worked fine? And I apparently can only actually test the design through the phone? Not exactly an optimal experience. I still need to use viewport units - and they're obviously not playing nice with the percentages. 7vh is 7% of 100vh - it's obviously not 7% of 100% minus whatever space the random "ghost bars" take away? If anyone else is running into the same issues - here's a link to running Simulator via XCode on MacOS: https://www.viget.com/articles/set-up-simulator-and-test-ios-mobile-safari-on-mac/ Huge download, but ridiculously easy to set up. So far, it's been insanely helpful in at least having an actual test environment for mobile devices. If any of the gurus might happen to know how to force any version of a browser's web developer tools to emulate the "ghost bars" for the mobile browsers - that would be awesome?

Psyched to see the css-tricks solution. Very simple and straight-forward.

Although this isn't directly related to GSAP - I'm guessing the gurus here have run into this and know the quick and easy solution? My responsive design is working as expected within both the Firefox and Chrome web developer responsive test environments. Tests all seem to indicate the design is conforming as I adjust the viewport. But then - testing in an actual mobile browser - I'm not sure what the proper terminology is - but... the address bar, bookmarks, the little slice of browser on the bottom? For whatever bizarre reason - the browser interface is apparently not included when the browser is determining the viewport? The viewport height apparently includes that interface for whatever reason? So - elements that work perfectly at 100vh within the "test environments" are actually cut off at the top and the bottom when viewed in the actual mobile browser. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> I'm guessing or at least hoping that there's a different way to indicate the content in that statement - that indicates that the actual viewport - the area available for animation - must comply with whatever user interface the browser might provide that is actually taking up the viewport space? My design can't possibly adapt to an unknown? I'm so very much hoping that it's just a different viewport statement - that fixes this nonsense? Who exactly would ever be designing for the actual height of the device - if 20% of that space isn't even available? You'd think we'd all be designing for the height ACTUALLY available within the browser window. Seems completely illogical and nonsensical otherwise? When you resize a desktop browser, the viewport changes as expected. Only at full screen, Safari overlays its interface into the viewport height until you click into the actual viewable area. So I'm guessing I've just missed the quick and easy fix? Otherwise, 100vh has no meaning? Or maybe it's a media query? Solving for viewport area hidden by browser features with some weird calc function? 100vh - browser features with browser-features margin top and browser-features margin-bottom? And then we arrive at the actual usable height, the area actually available within the viewport to present our animation?

Awesome - thanks!

Yeah, I'm looking into alternatives. I was just hoping y'all might know of a VM setup? Obviously be very cool to be able to just quickly emulate the low end device? But no dice?

I have an old Chromebook also - possibly less powerful even than the iPhone SE? I have no idea? My worry is that I have a background blur animation, with another morphSVG animation over it. What would obviously be very cool is to be able to set a lower "priority" for the background blur animation - if the processor can't handle it, then kill that animation? But I obviously have no clue how any of that works? You'd think the rending machine would complain? Do slower processors engage in frame skipping, or do they just stall out completely? Basically - if there even is a problem - then it'd be cool to set the background blur for the devices that can handle it - kill it for devices that can't? Javascript processor queries, like CSS media queries? It's a cool effect, but not worth hosing the animation to run it.

I was wondering if there might be a quick, easy way to simulate how an animation might behave on less powerful devices? Just worried that various animation techniques might be too taxing? Fwiw, I'm running an Intel MacBook Pro. Also, I can only test locally - as I'm still testing out premium plugins. I understand there's no way to actually test without having the device - but simulating for the lowest common denominator of devices currently in common use in the US? For instance, I own an original iPhone SE - but, for all I know, there's a cheap Android device that's in fairly common use, with only a quarter of its processing power? Or if the user is also running 200 other apps? I obviously have no idea what to expect? But, tying my HP48 into my rotary dial? Nothing can sweat that beast.

This might just not be possible - given I'm using Greensock to avoid Javascript as much as possible? I can just do it the messy way, but I was hoping one of the gurus here might know the javascript trick to keep the code neater? Basically, I need to inject javascript into my timeline. But if I try to do that, I break whichever javascript rule. Which is what makes javascript so much fun - ANY slightest error or typo, just drop any character out of place - and everything's broken. I just love it so much! Sarcasm aside - the animation concept I'm going for is to find and replace various html elements with javascript - repeat the same animation on the new code - possibly I need an array so it knows when to stop? So I try to hunt down on the web how to write the javascript - I find an example - I then try to plug that example into a timeline - and then everything is of course broken. And I don't know why - because I was hoping to avoid javascript - but then again, I'm trying to be a tad bit fancy to keep the code neat - so I guess I'm asking for it - and, of course, whatever I did is either wrong or isn't up to javascript snuff - and... nada. And I completely understand if this request for help is completely out of scope. Just hoping that if I see how one of you gurus might approach this problem - I can then hopefully read the guru code and see how to properly format ye olde javascript to approach the problem? I'm basically asking for a cheat sheet - then I can kinda somewhat copy the answer?

YES!!!!! I still have no idea how to kill off endlessly repeating nested function timelines But I was able to replace the offending functions with simple nested timelines. Lost a bit of variance with ye olde variables but I'd accidentally stepped off into the "too advanced" section of javascript I even tried setting a variable I could send with the basic logic - if killX=1 then KILL YOURSELF!!!! But functions are obviously against the entire notion of suicide, so good on them for being so special! Again, thanks very much to everyone for all of your patience! And I absolutely promise to create demos in the future at least trying to replicate what I think might possibly be going wrong. Not intending to waste everyone's time even further with my idiocy